Skip to content

Latest commit

 

History

History
70 lines (54 loc) · 2.06 KB

README.md

File metadata and controls

70 lines (54 loc) · 2.06 KB
Raw

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