Installation

Add the dependency:

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

Peer Dependencies

"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, [email protected]

License

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