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

Installation

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

Usage Examples

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

<AsyncImageAnimated   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.

<AsyncImageAnimated   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.

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

Props

• AsyncImageAnimated:

  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:

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

• Animate color of placeholder while loading - v2
• Placeholder image support
• Progressive image support
• Tests / Detox Tests