rni

react-native-image-placeholder

React native Image Placeholder

Showing:

Popularity

Downloads/wk

1.2K

GitHub Stars

138

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

1

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-image-placeholder npm version

NPM

  • Support Android and iOS.
  • The image component that supports shows placeholderSource when load image network.
  • Show placeholderSource if the main source can't be loaded or error.
  • Support custom ActivityIndicator loading.

Sample

Require

React-native >= 0.46.x

What's new

Fixed render inside component

Installation

npm i --save react-native-image-placeholder

Please file an issue if you have any trouble!

Usage

import ImageLoad from 'react-native-image-placeholder';

....

<ImageLoad
    style={{ width: 320, height: 250 }}
    loadingStyle={{ size: 'large', color: 'blue' }}
    source={{ uri: 'https://4.bp.blogspot.com/-lYq2CzKT12k/VVR_atacIWI/AAAAAAABiwk/ZDXJa9dhUh8/s0/Convict_Lake_Autumn_View_uhd.jpg' }}
/>

Options

Supports all Image properties.

OptionDefaultInfo
placeholderSourcerequire('./Images/empty-image.png')Show placeholderSource if the source can't be loaded or error.
loadingStylesize: 'small'; color: 'gray'Style ActivityIndicator
isShowActivitytrueShow ActivityIndicator loading
placeholderStyleStyle placeholder image
customImagePlaceholderDefaultStyleCustom style image placeholder default
borderRadiusBorder radius

License

ISC

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100