GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → TuNguyenThanh → React Native Image Placeholder

TuNguyenThanh / React Native Image Placeholder

React native Image Placeholder

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

react-native

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.

Option Default Info
placeholderSource require('./Images/empty-image.png') Show placeholderSource if the source can't be loaded or error.
loadingStyle size: 'small'; color: 'gray' Style ActivityIndicator
isShowActivity true Show ActivityIndicator loading
placeholderStyle Style placeholder image
customImagePlaceholderDefaultStyle Custom style image placeholder default
borderRadius Border radius

License

ISC

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].