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. π
AsyncImageAnimated
: Asynchronous image component
npm i --save react-native-async-image-animated
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
}}
/>
-
AsyncImageAnimated
:animationStyle?: 'fade' | 'shrink' | 'explode', delay?: number, imageKey?: string, placeholderColor?: string, placeholderSource?: { uri: string } | number, source: { uri: string }, // required style: ViewStyle, // height & width required
- If
placeholderSource
is set the animationStyle is set tofade
. It just looks better.
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.
- Animate color of placeholder while loading - v2
- Placeholder image support
- Progressive image support
- Tests / Detox Tests