Installing Dependencies
We need to install react-native-paper dependency to use Progress Bar in our application. Use the following command to install this dependency.
Command:
npm install --save-dev react-native-paper
We can use the Progress Bar once this dependency is installed after writing the following line of code in our application.
import { ProgressBar} from 'react-native-paper';
Implementation of Progress Bar
This section will discuss an example containing the implementation of Progress Bar in our React Native application.
Example 1:
App.js
import * as React from 'react';
import { ProgressBar, Colors } from 'react-native-paper';
const MyComponent = () => (
<ProgressBar progress={0.8} color="#0CF01F" style={{marginTop:350, width: 400, height: 10}}/>
);
export default MyComponent;
Output:
Example 2:
Let’s look at another example of the Progress Bar in React Native. We can see the progress bar on the top of our screen as well.
App.js
import * as React from 'react';
import { ProgressBar, Colors } from 'react-native-paper';
const MyComponent = () => (
<ProgressBar progress={0.8} color="#0CF01F" style={{width: 400, height: 10}}/>
);
export default MyComponent;
Output:
Example 3:
We can change the colour and height of the progress bar as well. Let’s see how.
App.js
import * as React from 'react';
import { ProgressBar, Colors } from 'react-native-paper';
const MyComponent = () => (
<ProgressBar progress={0.8} color="#FF69B4" style={{marginTop:350, width: 400, height: 50}}/>
);
export default MyComponent;
Output:
This is how we can customize our progress bar. We can also add various styles as well. Adding the styles is same as other components in react native.
You can also read the blogs React Basics and Components and React Native Image on the Coding Ninjas Website to grow your React Native skills.
Frequently Asked Questions
What is the difference between a determinate and indeterminate progress bar?
As the name suggested, a deterministic progress bar displays the progress of processes whose completeness can be determined finitely. On the other hand, indeterminate progress denotes the progress of activities that can not be measured finitely.
What are some common react-native packages that are available for using the Progress bar?
Some of the packages that are available in React-native to use Progress Bar are react-native-progress-bar-animated and react-native-progress.
What is the range of values taken by the progress attribute in the Progress Bar?
The progress attribute takes values between 0 and 1. The default value is zero.
Conclusion
In this article, we have extensively discussed React Native Progress Bar and saw a sample application having its implementation. Check out our Android Development Course on the Coding Ninjas Website to learn everything you need to know about Android development.
We hope this blog has helped you enhance your knowledge regarding React Native Progress Bar. If you want to learn more, check out the amazing content on the Coding Ninjas Website, Coding Ninjas Courses, Guided Paths for Interview Preparation, Coding Ninjas Studio Contests, Coding Ninjas Studio Test Series, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Experiences and Coding Ninjas Studio Interview Bundle. Do upvote our blog to help other ninjas grow. Happy Coding!
569+ registered 
