Example of React Native Image Progress NPM YARN Package

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.

yarn add react-native-image-progress

1	yarn add react-native-image-progress

npm install react-native-image-progress --save

1	npm install react-native-image-progress --save

2. Now the Image progress package usages 2 more libraries in the background. To use it properly we have to install them also. So again open your project’s main Root location in CMD and execute below command to install react-native-progress package.

npm install react-native-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.

npm install react-native-svg

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 :-

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'
  }

});

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 (

<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 :-

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'
  }

});

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 (

<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 :-

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'
  }

});

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 (

<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 :-

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'
  }

});

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 (

<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 :-

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'
  }

});

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 (

<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 🙂 .

Example of React Native Image Progress NPM YARN Package

Contents in this project Example of React Native Image Progress NPM YARN Package :-

Also Read :

Leave a Reply Cancel reply

Search Here