Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.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
Updated on: 01-Jul-2021
750 Views
Advertisements