How to show ProgressBar in ReactNative?

ProgressBar is a way to tell users that the content will be available in sometime. It can best be used when you submit something to the server and wait for the server to respond.

To work with the progress bar component install react-native-paper module using npm.

The command to install react-native-paper is −

npm install --save-dev react-native-paper

The basic component of progress bar is as follows−

<ProgressBar progress={progress_number} color="progresscolorbar" />

To work with Progress Bar you need to import it from react-native-paper as follows −

import { ProgressBar} from 'react-native-paper';

Following are some of the important properties available on ProgressBar −

Sr.NoProps & Description
It takes value from 0 to 10. The number value to be given to show inside the progress bar.
The color of the progress bar.
The values are true/false. It helps to show/hide progressbar.
The style to be applied for the progressbar.

Example: Display of Progress Bar

It is very simple to display a progressbar. Just import it first from react-native-paper.

import { ProgressBar} from 'react-native-paper';

The show a progress bar the code is as follows −

<ProgressBar style={{ marginTop:200}} progress={0.5} color="#00BCD4" />

The default value is 0.5 and it will increment till 10.

import * as React from 'react';
import { ProgressBar} from 'react-native-paper';
const MyComponent = () => (
   <ProgressBar style={{ marginTop:200}} progress={0.5} color="#00BCD4" />
export default MyComponent;


Updated on: 01-Jul-2021


Kickstart Your Career

Get certified by completing the course

Get Started