!Platform - Android and iOS

Progressive Fast Image	Built-in Loading Progressive Fast Image
src="assets/Screenshots/React-Native-Progressive-Fast-Image.gif" />	src="assets/Screenshots/React-Native-Progressive-Fast-Image-Loading.gif" />

Installation

Add the dependency:

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

Peer Dependencies

IMPORTANT! You need install them

`js
"react-native-fast-image": ">= 8.3.2"
`

Usage

Import

`jsx
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.

`jsx
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 |

$3

If you want to set your own component for the loading image, you should set this style for the top of the component

`tsc
{
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.

-
-
-
-

Author

FreakyCoder, kurayogun@gmail.com

License

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

`

``