Hello friends, In today’s tutorial we would learn about a image loading progress indicator package named as React Native Image Progress. We have seen simple rounded loading indicator in react native but it is different from it. Using this package we can mainly make 4 type of Progress Indicator for while loading Network image. We would learn all of them one by one in our tutorial. The most popular loading indicator for this plugin is their Progress.Bar indicator. So in this tutorial we would learn about Example of React Native Image Progress NPM YARN Package. You can learn more about this Package HERE.
Contents in this project Example of React Native Image Progress NPM YARN Package :-
1. Before getting started the app coding we have to install React Native Image Progress NPM package in our project. So open your React Native Project’s main Root directory in CMD or Terminal and execute below command.
1 |
yarn add react-native-image-progress |
OR
1 |
npm install react-native-image-progress --save |
1 |
npm install react-native-progress --save |
3. We have to install react-native-svg package also to use the PIE chart loading indicator. So execute below command to install the react-native-svg package in your react native project.
1 |
npm install react-native-svg |
Now we’re good to go. It’s time to start the coding for the application.
4. Default Progress Indicator Undefined :-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import React from 'react'; import { StyleSheet, SafeAreaView } from 'react-native'; import Image from 'react-native-image-progress'; import * as Progress from 'react-native-progress'; export default function App() { return ( <SafeAreaView style={styleSheet.MainContainer}> <Image source={{ uri: 'https://loremflickr.com/320/240' }} indicator={undefined} style={{ width: 320, height: 240, }} /> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
Screenshot :-
5. Progress Horizontal Bar Indicator :-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import React from 'react'; import { StyleSheet, SafeAreaView } from 'react-native'; import Image from 'react-native-image-progress'; import * as Progress from 'react-native-progress'; export default function App() { return ( <SafeAreaView style={styleSheet.MainContainer}> <Image source={{ uri: 'https://loremflickr.com/320/240' }} indicator={Progress.Bar} style={{ width: 320, height: 240, }} /> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
Screenshot :-
6. Progress Circle Indicator :-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import React from 'react'; import { StyleSheet, SafeAreaView } from 'react-native'; import Image from 'react-native-image-progress'; import * as Progress from 'react-native-progress'; export default function App() { return ( <SafeAreaView style={styleSheet.MainContainer}> <Image source={{ uri: 'https://loremflickr.com/320/240' }} indicator={Progress.Circle} style={{ width: 320, height: 240, }} /> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
Screenshot :-
7. Progress PIE Loading Indicator :-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import React from 'react'; import { StyleSheet, SafeAreaView } from 'react-native'; import Image from 'react-native-image-progress'; import * as Progress from 'react-native-progress'; export default function App() { return ( <SafeAreaView style={styleSheet.MainContainer}> <Image source={{ uri: 'https://loremflickr.com/320/240' }} indicator={Progress.Pie} style={{ width: 320, height: 240, }} /> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
Screenshot :-
8. Progress PIE Loading Indicator with Style :-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import React from 'react'; import { StyleSheet, SafeAreaView, Text, View } from 'react-native'; import Image from 'react-native-image-progress'; import * as Progress from 'react-native-progress'; export default function App() { return ( <SafeAreaView style={styleSheet.MainContainer}> <Image source={{ uri: 'https://loremflickr.com/320/240' }} indicator={Progress.Pie} indicatorProps={{ size: 75, borderWidth: 0, color: '#D50000', unfilledColor: 'rgba(200, 200, 200, 0.2)' }} style={{ width: 320, height: 240, }} /> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
Screenshot :-
So friends, Hope you like my tutorial 🙂 .