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.
React-Native Tutorial Platform Modules
| Module | Version | Repo |
|---|---|---|
| react | 16.4.1 | React |
| react-native | 0.56.0 | React-Native |
| react-native-fast-image | 0.15 | React-Native Fast Image |
| react-native-image-progress | 1.1.1 | React-Native Image Progress |
| react-native-progress | 3.5.0 | React-Native Progress |
Installing Required Modules
$ yarn add react-native-fast-image
or
$ npm install react-native-fast-image
or
$ npm install react-native-fast-image
$ react-native link react-native-fast-image
React-Native Progress Loader
$ yarn add react-native-progress
or
$ npm install react-native-progress
or
$ 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
or
$ npm install react-native-image-progress
or
$ 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);
<FImage
style={{ height: 200, width: '100%' }}
source={{
uri: '<image_url_here>',
priority: FastImage.priority.normal,
headers: { 'accept-encoding': '' },
}}
resizeMode={FastImage.resizeMode.contain}
indicator={Progress.Pie}
indicatorProps={{
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.
import * as Progress from 'react-native-progress';
import { createImageProgress } from 'react-native-image-progress';
const FImage = createImageProgress(FastImage);
<FImage
style={{ height: 200, width: '100%' }}
source={{
uri: '<image_url_here>',
priority: FastImage.priority.normal,
headers: { 'accept-encoding': '' },
}}
resizeMode={FastImage.resizeMode.contain}
indicator={Progress.Pie}
indicatorProps={{
size: 80,
borderWidth: 0,
color: 'rgba(60,14,101, 1)',
unfilledColor: 'rgba(60,14,101, 0.2)',
}}
/>
Thanks!
Your feedback helps us improve tutorials.
No comments:
Post a Comment