React-native-advance-image NPM

react-native-advance-image

An Advanced Image component supporting multiple props and methods to show image on react native application in a better way.

Introduction

Advance image is an upper-layer component package created using react-native's Image Component. It provides better support for loading and errors props for react-native developers.

Features

Better Support for Image
Provides better support for Image Loading
Supports better error handling of Image

System Requirements

Globally installed node >= 6.0
Globally installed npm >= 4.0
React native version > 60

Installation

yarn add react-native-advance-image

npm install --save react-native-advance-image

Props

Name	Type	Default	Description
style	Image Style Props
source	ImageSource		The image source (either a remote URL or a local file resource).
resizeMethod	enum('auto', 'resize', 'scale')	auto	The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions.
resizeMode	enum('cover', 'contain', 'stretch', 'repeat', 'center')	cover	Determines how to resize the image when the frame doesn't match the raw image dimensions.
borderRadius	number		Define border Radius for Image.
backgroundColor	ColorValue		Define Background Color for Loading Image.
loadingType	enum('image', 'skeleton', 'indicator', 'none')	indicator	Choose a Loading type to be shown when the image will be fetched.
loadingIndicatorStyle	Image Style Props {size: 'small'or'large', color: ColorString}	{size: 'small', color: 'black'}	Style object for indicator style only.
loadingImageSource	ImageSource		The image source (either a remote URL or a local file resource) for showing image on Loading.
errorImageSource	ImageSource		The image source (either a remote URL or a local file resource) for showing image on Error.
errorImageStyle	Image Style Props

Inherits ImageProps

Usage

import React from 'react';
import {SafeAreaView} from 'react-native';
import { AdvanceImage, AdvanceImageBackground } from 'react-native-advance-image';


const App = () => {
 return (
   <SafeAreaView>
     
     {/* Indicator loading example */}
     <AdvanceImage
       loadingType="indicator"
       source={{ uri: 'https://picsum.photos/800' }}
       style={{ height: 300, width: 300, margin: 5 }}
     />

     {/* None loading example */}
     <AdvanceImage
       loadingType="none"
       source={{ uri: 'https://picsum.photos/600' }}
       style={{ height: 300, width: 300, margin: 5 }}
     />

     {/* default Image loading example */}
     <AdvanceImage
       loadingType="image"
       source={{ uri: 'https://picsum.photos/650' }}
       style={{ height: 300, width: 300, margin: 5 }}
     />

     {/* Image loading example */}
     <AdvanceImage
       loadingType="image"
       loadingImageSource={require('./assets/snack-icon.png')}
       source={{ uri: 'https://picsum.photos/950' }}
       style={{ height: 300, width: 300, margin: 5 }}
     />

     {/* Skeleton loading example */}
     <AdvanceImage
       loadingType="skeleton"
       source={{uri:'https://picsum.photos/4000'}}
       style={{ height: 300, width: 300 }}
     />

     {/* default Error example */}
     <AdvanceImage
       loadingType="indicator"
       source={{ uri: 'https://picsum.photos' }}
       style={{ height: 300, width: 300, margin: 5 }}
     />
     
     {/* Image Error example */}
     <AdvanceImage
       loadingType="indicator"
       errorImageSource={require('./assets/snack-icon.png')}
       source={{ uri: 'https://picsum.photos' }}
       style={{ height: 300, width: 300, margin: 5 }}
     />
     
     {/* ImageBackground example */}
     <AdvanceImageBackground
       loadingType="indicator"
       source={{ uri: 'https://picsum.photos/975' }}
       style={{ height: 300, width: 300, margin: 5 }}>
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text style={{ color: 'red', fontSize: 20 }}>Image Baqckground</Text>
       </View>
     </AdvanceImageBackground>

   </SafeAreaView>
 );
};

export default App;

Expo Snack Example