How to add a Progress Bar in react-native using react-native-paper library ?
Approach: In this article, we will create a progress bar using material design. We will use the react-native-paper library to show a progress bar. The progress bar acts as a status indicator. In our Project, we will display a progress bar on the top and below it, there will be input fields to capture data entered by the user. A progress bar will get updated automatically when a user fills the data. We will see the approach step-by-step.
Below is the step by step implementation:
Step 1: Create a project in react-native using the following command:
npx react-native init DemoProject
Step 2: Install react-native paper using the following command:
npm install react-native-paper
Step 3: Create a components folder inside your project. Inside components folder create a file ProgressBar.js
Project Structure: It will look like this
Step 4: 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.
Step 5: Now import this file into your App.js
Step to run the application: Run the application using the following command:
npx react-native run-android