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

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

• [x] LICENSE
• [x] Built-in Loading Indicator
• [x] Built-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, [e-mail]

License

React Native Progressive Fast Image is available under the MIT license. See the LICENSE file for more info.