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.

License

Notifications You must be signed in to change notification settings

alexborton/react-native-async-image-animated

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

29 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

About

Simple cross-platform asynchronous image component for React Native πŸ™ŒπŸ» with a progressive and placeholder image support. Placeholder color otherwise with a few animation options.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 42.1%
  • Objective-C 26.1%
  • JavaScript 13.7%
  • Python 10.2%
  • Java 7.9%