/ Images

Image loader component with fallbacks for React Native apps

Image loader component with fallbacks for React Native apps

React Native Image Fallback

Image loader component with fallbacks for React Native apps.

1. What is React Native Image Fallback?

React Native Image Fallback is a lightweight image component which supports fallback images for React Native apps.

2. Getting Started

Install React Native Image Fallback

npm i react-native-image-fallback --save

3. Usage

Import it

import {ImageLoader} from 'react-native-image-fallback';

Use it in you component

render() {
  const imageSource = 'http://image.url'; // An image URL
  const fallbacks = [
    'http://another.image.url', // An image URI
    require('./local/image/path'), // A locally require'd image
  ];

  return (
    <ImageLoader
        source={imageSource}
        fallback={fallbacks}
    />
  )
}

4. Properties

This is basically a React Native Image. So all the <Image /> props will work. On top of that

  • source - The source image. Can be a string URL or a require('') image file
  • fallback - The fallback(s). Can be a string URL, a require('') image file or an array consisting of either
  • onLoadStart - Accepts a calback function with the first parameter being the image that is being loaded to the component.
  • onLoadEnd - Invoked when load either succeeds or fails. Accepts a callback function with the first parameter being the image in question.
  • onSuccess - Invoked when the component successfully loads an image. Accepts a callback function with the first parameter being the loaded image.
  • onError - Invoked when all the given images fail to load.

GitHub