Quick and Fast Image Loading on Android and iOS with React-Native ~ Hybrid Mobile Apps Development, React Native, Flutter, JavaScript, Darts, iOS, Android, NodeJS
Coding Savvy FB Twitter Google
» »

Quick and Fast Image Loading on Android and iOS with React-Native

On this version of React-Native Tutorial we are going to look into how to load Images Quick, Fast and Easy with React-Native Module React-Native Fast Image, We are also going to add a little animation using React-Native Image Progress Module to allow users know when image loading is in progress and when it's completed. There are three Major modules Involve in this Project that is written by Trusted React-Native Developers and backed by the great community. The main Objective of this Project is to see how we can avoid loading Images twice on Android and iOS each time our app is launched therefore saving us some bandwidth data, React-Native Fast Image does this by caching the images that have been loaded by the app. As stated on the Repo, FastImage is a wrapper around SDWebImage (iOS) and Glide (Android), These are two powerful and efficient image caching libraries on Android and iOS platform.
Quick and Fast Image Loading on Android and iOS with React-Native

React-Native Tutorial Platform Modules

react16.4.1 React
react-native0.56.0 React-Native
react-native-fast-image0.15 React-Native Fast Image
react-native-image-progress1.1.1 React-Native Image Progress
react-native-progress3.5.0 React-Native Progress

Installing Required Modules

$ yarn add react-native-fast-image
$ npm install react-native-fast-image
$ react-native link react-native-fast-image

React-Native Progress Loader

$ yarn add react-native-progress
$ npm install react-native-progress

$ react-native link react-native-fast-image

For CocoaPod users

Add the ART subspec like so:
pod 'React', path: '../node_modules/react-native', subspecs: [ 'ART', ]

Or manually:

Add the ART.xcodeproj (found in node_modules/react-native/Libraries/ART) to the Libraries group and add libART.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this are available in the React Native documentation.

React-Native Image Progress Loader

$ yarn add react-native-image-progress
$ npm install react-native-image-progress

Putting It All Together (Sample Usage)

import FastImage from 'react-native-fast-image';
import * as Progress from 'react-native-progress';
import { createImageProgress } from 'react-native-image-progress';
const FImage = createImageProgress(FastImage);

          style={{ height: 200, width: '100%' }}
            uri: '<image_url_here>',
            priority: FastImage.priority.normal,
            headers: { 'accept-encoding': '' },
            size: 80,
            borderWidth: 0,
            color: 'rgba(60,14,101, 1)',
            unfilledColor: 'rgba(60,14,101, 0.2)',
There you go, The code above can be used in any component or directly in the Render Method of the View.  The progress animation can also be changed by changing the indicator parameter i.e indicator={Progress.Circle} .  Just play around and have fun with it. If you have any suggestions or question you can leave it in the comment box below.
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment