@freakycoder/react-native-progressive-fast-image N

Installation

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