| Progressive Fast Image | Built-in Loading Progressive Fast Image |
|
|
Installation
Add the dependency:
npm i @freakycoder/react-native-progressive-fast-image
Peer Dependencies
IMPORTANT! You need install them
"react-native-fast-image": ">= 8.3.2"
Usage
Import
import ProgressiveFastImage from "@freakycoder/react-native-progressive-fast-image";
Fundamental Usage
It accepts every Image and FastImage props. You can use it like you used to.
<ProgressiveFastImage
source={require("./assets/my-image.png")}
thumbnailSource={require("./assets/my-image.png")}
/>
Configuration - Props
| Property | Type | Default | Description |
|---|---|---|---|
| source | Source | undefined | set the main source of the image |
| thumbnailSource | ImageSourcePropType | undefined | set the thumbnail source of the image |
| loadingSource | ImageSourcePropType | undefined | set the error source of the image |
| errorSource | ImageSourcePropType | undefined | set the loading source of the image |
| loadingImageComponent | Component | default | WARNING: Read the below! |
| blurRadius | number | 15 | change the blur radius level |
loadingImageComponent Usage
If you want to set your own component for the loading image, you should set this style for the top of the component
{
top: 0,
left: 0,
right: 0,
bottom: 0,
position: "absolute",
alignItems: "center",
alignSelf: "center",
justifyContent: "center",
}
Customization Props
| Property | Type | Default | Description |
|---|---|---|---|
| style | style | default | change or override main image style |
| loadingImageContainerStyle | style | default | change or override loading image container style |
| loadingImageStyle | style | default | change or override loading image style |
| thumbnailImageStyle | style | default | change or override thumbnail image style |
| thumbnailAnimationDuration | number | default | change the thumbnail animation's duration |
| imageAnimationDuration | number | default | change the main image animation's duration |
| onLoad | function | default | calling the onLoad |
| onThumbnailLoad | function | default | calling the onThumbnailLoad |
| onLoadEnd | function | default | calling the onLoadEnd |
| onError | function | default | calling the onError |
Future Plans
LICENSEBuilt-in Loading IndicatorBuilt-in Error Image Source- Write an article about the lib on Medium
Better with built-in bug fix
Fixes FastImage's source null bug-fix.
- https://github.com/DylanVann/react-native-fast-image/issues/623
- https://github.com/DylanVann/react-native-fast-image/issues/27
- https://github.com/DylanVann/react-native-fast-image/issues/484
- https://github.com/DylanVann/react-native-fast-image/issues/96
Author
FreakyCoder, [email protected]
License
React Native Progressive Fast Image is available under the MIT license. See the LICENSE file for more info.