How to add a Progress Bar in react-native using react-native-paper library ?

In this article, we’re going to create a progress bar using material design. We’ll be using the react-native-paper library to display this progress bar. The progress bar will act as a status indicator, showing how much progress has been made. In our project, we will place the progress bar at the top of the screen. Below the progress bar, there will be input fields where users can enter their data. The progress bar will update automatically as the user fills in the information.

To give you a better idea of what we’re going to create, let’s watch a short video.

Demo Video

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press "a" as mentioned in the image below.
  • For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Create a new component folder (optional)

You can create a new folder called "components" to organize all component files better, as mentioned in the image below. Alternatively, you can write the component code directly in App.js.

Step 4: Working with ProgressBar.js

In ProgressBar.js, we have imported ProgressBar, TextInput, and Colors from react-native-paper library. We will use useState and use effect hooks to update the status of the components. ProgressBar component uses a prop progress. The progress prop can take any value in the range 0 to 1.

- : Import required libraries at the top of the file.

- : Create a StyleSheet to style components like container, text, and textInput.

- : This Component is used to display a progress bar with dynamic color and status.

- : This Component is used to take input from the user.

- : This Component is used to display the text data on the screen.

- : It is used to update the state and set the default state.

- : This is used to perform side effects in function components.

Now, wrap the two ProgressBar, Text, and TextInput components with a View component and return from the ProgressBarExample component. Also, ensure to export the ProgressBarExample.

ProgressBar.js:

Step 5: Working with App.js

Now call this ProgressBarExample Component in the main "App" Component in App.js.

App.js:

Or

You can write the whole code in one file, i.e, App.js.

Complete Source Code:

App.js:

Output