AsyncImageAnimated

Simple cross-platform asynchronous image component for React Native that supports progressive and placeholder images, while providing a placeholder color when one is not provided.

Source is available in the AsyncImageAnimated/src directory. 🙂

Exports

* AsyncImageAnimated: Asynchronous image component

$3

``
npm i --save react-native-async-image-animated
`

$3

Fetch an image with a 30x30 dimension and a placeholderColor.

`javascript
source={{
uri: 'https://i.imgur.com/R5TraVR.png'
}}
placeholderColor={'#cfd8dc'}
style={{
height: 30,
width: 30
}}
/>
`

Fetch an image with a 30x30 dimension and a progressive image.

`javascript
source={{
uri: 'https://i.imgur.com/R5TraVR.png'
}}
placeholderSource={{
uri: 'https://i.imgur.com/TSl1zQR.jpg'
}}
style={{
height: 30,
width: 30
}}
/>
`

Fetch an image with a 30x30 dimension and a placeholder image.

`javascript
source={{
uri: 'https://i.imgur.com/R5TraVR.png'
}}
placeholderSource={require('./path/to/image.png')}
style={{
height: 30,
width: 30
}}
/>
`

$3

* AsyncImageAnimated:

`javacript
animationStyle?: 'fade' | 'shrink' | 'explode',
delay?: number,
imageKey?: string,
placeholderColor?: string,
placeholderSource?: { uri: string } | number,
source: { uri: string }, // required
style: ViewStyle, // height & width required
`

#### Conditions

* If placeholderSource is set the animationStyle is set to fade. It just looks better.

Running the Example

Run the following in the AsyncImageAnimated directory:

`javascript
npm i
react-native start
npm run ios // or 'android' or 'start' for both
``

Then reload to view animations again.

Stack

* React Native
* React
* TypeScript

Planned Updates

* [x] Animate color of placeholder while loading - v2
* [x] Placeholder image support
* [x] Progressive image support
* [ ] Tests / Detox Tests