Skip to content

WrathChaos/react-native-progressive-fast-image

Repository files navigation

React Native Progressive Fast Image

Battle Tested ✅

Customizable progressive image for React Native with FastImage

npm version npm Platform - Android and iOS License: MIT styled with prettier

Progressive Fast Image Built-in Loading Progressive Fast Image
React Native Progressive Fast Image React Native 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

  • LICENSE
  • Built-in Loading Indicator
  • 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.

Author

FreakyCoder, [email protected]

License

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