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

React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI’s for both platforms.

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.

ProgressBar.js

import React , {useState, useEffect} from "react";
import {Text , View, StyleSheet} from 'react-native';
import { ProgressBar, Colors , TextInput} from "react-native-paper";

const ProgressBarExample = () => {

    const [status, setStatus] = useState() ;
    const [progressColor , setProgessColor] = useState(Colors.red400)
    const [name , setName] = useState('');
    const [age , setAge] = useState('');
    const [occ, setOcc] = useState('');
    const [location , setLocation] = useState('');

    useEffect(() => {
        if(status === 1)
          setProgessColor(Colors.green500)
    })

    return(
      <View style={styles.container}>
          <Text style={{paddingBottom:20}}>Progress Bar</Text>
          <ProgressBar progress={status}  color={progressColor} />

          <View style={styles.text}>
              <Text style={{fontSize :30}}>Fill the details below</Text>
          </View>

          <View style={styles.textInput}>
              <TextInput mode="outlined" label="Name" value={name}
                         onChangeText={(text)=> {
                         setName(text) ;
              }} onEndEditing ={() => setStatus(0.25)}/>
              <TextInput mode="outlined" label="Age" value={age}
                         onChangeText={(age)=>{
                         setAge(age);
              }} onEndEditing ={() => setStatus(0.5)}/>
              <TextInput mode="outlined" label="Occupation" value={occ}
                         onChangeText={(occupation)=>{
                         setOcc(occupation);
              }} onEndEditing ={() => setStatus(0.75)}/>
              <TextInput mode="outlined" label="Location" value={location}
                         onChangeText={(loc)=>{
                         setLocation(loc);
              }} onEndEditing ={() => setStatus(1)}/>
          </View>
      </View>

    )
}

export default ProgressBarExample ;

const styles = StyleSheet.create({
    container :{
        padding: 20
    },
    text :{
       marginTop:30
    },
    textInput:{
        marginTop : 60
    }
})

Step 5: Now import this file into your App.js

App.js

import React from 'react';
import type {Node} from 'react';
import {View} from 'react-native';
import ProgressBarExample from './components/ProgressBar';

const App: () => Node = () => {
  return (
       <View>
          <ProgressBarExample />
       </View>
  );
};

export default App;

Step to run the application: Run the application using the following command:

npx react-native run-android

Output: