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.No | Props & Description |
|---|---|
| 1 | progress It takes value from 0 to 10. The number value to be given to show inside the progress bar. |
| 2 | color The color of the progress bar. |
| 3 | visible The values are true/false. It helps to show/hide progressbar. |
| 4 | style 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;Output
