Skip to content
Simple cross-platform asynchronous image component for React Native πŸ™ŒπŸ» with a progressive and placeholder image support. Placeholder color otherwise with a few animation options.
TypeScript Objective-C JavaScript Python Java
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
AsyncImageAnimated
src
.gitignore
.npmignore
LICENSE
README.md
index.js
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

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

Planned Updates

  • Animate color of placeholder while loading - v2
  • Placeholder image support
  • Progressive image support
  • Tests / Detox Tests
You can’t perform that action at this time.