Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

React Native Progress Bar

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

In this blog, you will learn about React Native Progress Bar. Progress Bar is a very important UI component. It is used to display the intermediate progress of a task/process. It makes your application more attractive visually and improves the user experience as well.


You can also read the blog React Native Status BarHooks in React JS and React Native Images on the Coding Ninjas Website to enhance your knowledge further.

React Native Status Bar

React Native Status Bar is a component that can be used to show the progress of a task. When we send a request to a server but waiting for a reply, we can use this progress bar to show waiting on the user side of the application.

The basic component of the Progress Bar is:

<ProgressBar progress={progress_no} color="progress_color" />
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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 CoursesGuided Paths for Interview PreparationCoding Ninjas Studio ContestsCoding Ninjas Studio Test SeriesCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview Experiences and Coding Ninjas Studio Interview Bundle.  Do upvote our blog to help other ninjas grow. Happy Coding!

Topics covered
1.
Introduction
2.
React Native Status Bar
3.
Installing Dependencies
3.1.
Command:
4.
Implementation of Progress Bar
4.1.
Example 1:
4.2.
App.js
4.3.
Output:
4.4.
Example 2:
4.5.
App.js
4.6.
Output:
4.7.
Example 3:
4.8.
Output:
5.
Frequently Asked Questions
5.1.
What is the difference between a determinate and indeterminate progress bar?
5.2.
What are some common react-native packages that are available for using the Progress bar?
5.3.
What is the range of values taken by the progress attribute in the Progress Bar?
6.
Conclusion