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

Last Updated : 18 May, 2025

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 libraries: Import required libraries at the top of the file.

JavaScript

import React,
{
  useState,     // Import useState hook for managing state
  useEffect     // Import useEffect hook for side effects
} from "react"; // Import React and hooks (useState, useEffect)
import {
  Text,         // Import Text component for displaying text
  View,         // Import View component for layout  
  StyleSheet    // Import StyleSheet for styling
} from 'react-native'; // Import components from react-native
import {
  ProgressBar,  // Import ProgressBar component for displaying progress
  MD3Colors,    // Import MD3Colors for color themes
  TextInput     // Import TextInput component for user input
} from "react-native-paper"; // Import components from react-native-paper

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

JavaScript

// Define styles for the component
const styles = StyleSheet.create({
  container: {
    padding: 20 // Add padding around the container
  },
  text: {
    marginTop: 30 // Add margin above the form title
  },
  textInput: {
    marginTop: 20 // Add margin above the input fields
  }
});

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

JavaScript

<ProgressBar progress={status} color={progressColor} />

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

JavaScript

{/* Input field for Name */}
<TextInput
    mode="outlined"
    label="Name"
    value={name}
    onChangeText={(text) => {
        setName(text); // Update name state
    }}
    onEndEditing={() => setStatus(0.25)} // Update progress to 25% when editing ends
/>

{/* Input field for Age */}
<TextInput
    mode="outlined"
    label="Age"
    value={age}
    onChangeText={(age) => {
        setAge(age); // Update age state
    }}
    onEndEditing={() => setStatus(0.5)} // Update progress to 50% when editing ends
/>

{/* Input field for Occupation */}
<TextInput
    mode="outlined"
    label="Occupation"
    value={occ}
    onChangeText={(occupation) => {
        setOcc(occupation); // Update occupation state
    }}
    onEndEditing={() => setStatus(0.75)} // Update progress to 75% when editing ends
/>

{/* Input field for Location */}
<TextInput
    mode="outlined"
    label="Location"
    value={location}
    onChangeText={(loc) => {
        setLocation(loc); // Update location state
    }}
    onEndEditing={() => setStatus(1)} // Update progress to 100% when editing ends
/>

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

JavaScript

<Text style={{ fontSize: 30 }}>Fill the details below</Text> {/* Form title */}

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

JavaScript

// State to track the progress status (0 to 1)
const [status, setStatus] = useState();

// State to track the color of the progress bar
const [progressColor, setProgessColor] = useState(MD3Colors.error50);

// State to track the user's name
const [name, setName] = useState('');

// State to track the user's age
const [age, setAge] = useState('');

// State to track the user's occupation
const [occ, setOcc] = useState('');

// State to track the user's location
const [location, setLocation] = useState('');

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

JavaScript

// Effect to update the progress bar color when the status reaches 1
useEffect(() => {
    if (status === 1) {
        // Change color to primary when progress is complete
        setProgessColor(MD3Colors.primary0); 
    }
});

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:

ProgressBar.js

import React,
{
  useState,     // Import useState hook for managing state
  useEffect     // Import useEffect hook for side effects
} from "react"; // Import React and hooks (useState, useEffect)
import {
  Text,         // Import Text component for displaying text
  View,         // Import View component for layout  
  StyleSheet    // Import StyleSheet for styling
} from 'react-native'; // Import components from react-native
import {
  ProgressBar,  // Import ProgressBar component for displaying progress
  MD3Colors,    // Import MD3Colors for color themes
  TextInput     // Import TextInput component for user input
} from "react-native-paper"; // Import components from react-native-paper

// Define the ProgressBarExample functional component
const ProgressBarExample = () => {

  // State to track the progress status (0 to 1)
  const [status, setStatus] = useState();

  // State to track the color of the progress bar
  const [progressColor, setProgessColor] = useState(MD3Colors.error50);

  // State to track the user's name
  const [name, setName] = useState('');

  // State to track the user's age
  const [age, setAge] = useState('');

  // State to track the user's occupation
  const [occ, setOcc] = useState('');

  // State to track the user's location
  const [location, setLocation] = useState('');

  // Effect to update the progress bar color when the status reaches 1
  useEffect(() => {
    if (status === 1) {
      setProgessColor(MD3Colors.primary0); // Change color to primary when progress is complete
    }
  });

  return (
    <View style={styles.container}> {/* Main container for the component */}
      <Text style={{ paddingBottom: 20, paddingTop:50 }}>Progress Bar</Text> {/* Title for the progress bar */}
      
      <ProgressBar progress={status} color={progressColor} /> {/* Progress bar with dynamic progress and color */}

      <View style={styles.text}> {/* Container for the form title */}
        <Text style={{ fontSize: 30 }}>Fill the details below</Text> {/* Form title */}
      </View>

      <View style={styles.textInput}> {/* Container for the input fields */}
        {/* Input field for Name */}
        <TextInput
          mode="outlined"
          label="Name"
          value={name}
          onChangeText={(text) => {
            setName(text); // Update name state
          }}
          onEndEditing={() => setStatus(0.25)} // Update progress to 25% when editing ends
        />

        {/* Input field for Age */}
        <TextInput
          mode="outlined"
          label="Age"
          value={age}
          onChangeText={(age) => {
            setAge(age); // Update age state
          }}
          onEndEditing={() => setStatus(0.5)} // Update progress to 50% when editing ends
        />

        {/* Input field for Occupation */}
        <TextInput
          mode="outlined"
          label="Occupation"
          value={occ}
          onChangeText={(occupation) => {
            setOcc(occupation); // Update occupation state
          }}
          onEndEditing={() => setStatus(0.75)} // Update progress to 75% when editing ends
        />

        {/* Input field for Location */}
        <TextInput
          mode="outlined"
          label="Location"
          value={location}
          onChangeText={(loc) => {
            setLocation(loc); // Update location state
          }}
          onEndEditing={() => setStatus(1)} // Update progress to 100% when editing ends
        />
      </View>
    </View>
  );
}

export default ProgressBarExample; // Export the component as default

// Define styles for the component
const styles = StyleSheet.create({
  container: {
    padding: 20 // Add padding around the container
  },
  text: {
    marginTop: 30 // Add margin above the form title
  },
  textInput: {
    marginTop: 20 // Add margin above the input fields
  }
});

Step 5: Working with App.js

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

App.js:

JavaScript

import React from 'react'; // Import React library
import { View } from 'react-native'; // Import View component from react-native
import ProgressBarExample from './components/ProgressBar'; // Import custom ProgressBarExample component

// Define the main App component
const App = () => {
  return (    
       <View> {/* Container View for the application */}
          <ProgressBarExample /> {/* Render the ProgressBarExample component */}
       </View>    
  );
};

export default App; // Export the App component as the default export

Or

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

Complete Source Code:

App.js:

App.js

import React,
{
  useState,     // Import useState hook for managing state
  useEffect     // Import useEffect hook for side effects
} from "react"; // Import React and hooks (useState, useEffect)
import {
  Text,         // Import Text component for displaying text
  View,         // Import View component for layout  
  StyleSheet    // Import StyleSheet for styling
} from 'react-native'; // Import components from react-native
import {
  ProgressBar,  // Import ProgressBar component for displaying progress
  MD3Colors,    // Import MD3Colors for color themes
  TextInput     // Import TextInput component for user input
} from "react-native-paper"; // Import components from react-native-paper

// Define the ProgressBarExample functional component
const ProgressBarExample = () => {

  // State to track the progress status (0 to 1)
  const [status, setStatus] = useState();

  // State to track the color of the progress bar
  const [progressColor, setProgessColor] = useState(MD3Colors.error50);

  // State to track the user's name
  const [name, setName] = useState('');

  // State to track the user's age
  const [age, setAge] = useState('');

  // State to track the user's occupation
  const [occ, setOcc] = useState('');

  // State to track the user's location
  const [location, setLocation] = useState('');

  // Effect to update the progress bar color when the status reaches 1
  useEffect(() => {
    if (status === 1) {
      setProgessColor(MD3Colors.primary0); // Change color to primary when progress is complete
    }
  });

  return (
    <View style={styles.container}> {/* Main container for the component */}
      <Text style={{ paddingBottom: 20, paddingTop: 50 }}>Progress Bar</Text> {/* Title for the progress bar */}

      <ProgressBar progress={status} color={progressColor} /> {/* Progress bar with dynamic progress and color */}

      <View style={styles.text}> {/* Container for the form title */}
        <Text style={{ fontSize: 30 }}>Fill the details below</Text> {/* Form title */}
      </View>

      <View style={styles.textInput}> {/* Container for the input fields */}
        {/* Input field for Name */}
        <TextInput
          mode="outlined"
          label="Name"
          value={name}
          onChangeText={(text) => {
            setName(text); // Update name state
          }}
          onEndEditing={() => setStatus(0.25)} // Update progress to 25% when editing ends
        />

        {/* Input field for Age */}
        <TextInput
          mode="outlined"
          label="Age"
          value={age}
          onChangeText={(age) => {
            setAge(age); // Update age state
          }}
          onEndEditing={() => setStatus(0.5)} // Update progress to 50% when editing ends
        />

        {/* Input field for Occupation */}
        <TextInput
          mode="outlined"
          label="Occupation"
          value={occ}
          onChangeText={(occupation) => {
            setOcc(occupation); // Update occupation state
          }}
          onEndEditing={() => setStatus(0.75)} // Update progress to 75% when editing ends
        />

        {/* Input field for Location */}
        <TextInput
          mode="outlined"
          label="Location"
          value={location}
          onChangeText={(loc) => {
            setLocation(loc); // Update location state
          }}
          onEndEditing={() => setStatus(1)} // Update progress to 100% when editing ends
        />
      </View>
    </View>
  );
}


// Define styles for the component
const styles = StyleSheet.create({
  container: {
    padding: 20 // Add padding around the container
  },
  text: {
    marginTop: 30 // Add margin above the form title
  },
  textInput: {
    marginTop: 20 // Add margin above the input fields
  }
});

// Define the main App component
const App = () => {
  return (
    <View> {/* Container View for the application */}
      <ProgressBarExample /> {/* Render the ProgressBarExample component */}
    </View>
  );
};

export default App; // Export the App component as the default export

Output

How to create Avatar in react-native ?

samiksharanjan

Improve

Article Tags :

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

Demo Video

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Create a new component folder (optional)

Step 4: Working with ProgressBar.js

Step 5: Working with App.js

Or

Complete Source Code:

Output

Similar Reads

React Native Basics

React Native Components

React Native UI Elements

React Native API

React Native Questions

React Native Projects

Thank You!

What kind of Experience do you want to share?