react-native-img-placeholder-component

A React native image component with placeholder

Feel free to add an issue if you have any trouble!

Installation

using npm

npm i --save react-native-img-placeholder-component

using yarn

yarn add react-native-img-placeholder-component

Usage

Simple example

import ImageWithPlaceholder from 'react-native-img-placeholder-component';
....
<ImageWithPlaceholder
    useNativeDriver
    style={{ width: 100, height: 100, borderRadius: 50  }}
    placeholder={require('../images/placeholder.png')}
    source={{ uri: 'https://randomuser.me/api/portraits/men/1.jpg' }}
    fadeDuration={800}
    resizeMode='cover'
/>

Example with child

import ImageWithPlaceholder from 'react-native-img-placeholder-component';
....
<ImageWithPlaceholder
    useNativeDriver
    style={{ width: 100, height: 100, borderRadius: 50  }}
    placeholder={require('../images/placeholder.png')}
    source={{ uri: 'https://randomuser.me/api/portraits/women/1.jpg' }}
    fadeDuration={800}
    resizeMode='cover'
>
    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <Text>Hello world</Text>
    </View>
</ImageWithPlaceholder>

Options

Props	Default	Required?	Info
source	-	✓	Image source prop
placeholder	-	✓	Shows placeholder if the source can't be loaded or error
style	-	✕	Image and placeholder styles
fadeDuration	500	✕	The fade duration of the placeholder once the source loads
resizeMode	-	✕	Image resizeMode prop
useNativeDriver	false	✕	Uses the native driver when true. Default false.

License

MIT