Progressive Fast Image | Built-in Loading Progressive Fast Image |
![]() |
![]() |
Add the dependency:
npm i @freakycoder/react-native-progressive-fast-image
"react-native-fast-image": ">= 8.3.2"
import ProgressiveFastImage from "@freakycoder/react-native-progressive-fast-image";
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")}
/>
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 |
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",
}
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 |
-
LICENSE -
Built-in Loading Indicator -
Built-in Error Image Source - Write an article about the lib on Medium
Fixes FastImage's source null
bug-fix.
- DylanVann/react-native-fast-image#623
- DylanVann/react-native-fast-image#27
- DylanVann/react-native-fast-image#484
- DylanVann/react-native-fast-image#96
FreakyCoder, [email protected]
React Native Progressive Fast Image is available under the MIT license. See the LICENSE file for more info.