React Native Animated ProgressBar

Last Updated : 21 Nov, 2023

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, etc. We’re always looking for shorter development cycles, quicker time to deployment, and better app performance.

Syntax:

<ProgressBar
     progress={*}
     height={*}
     backgroundColor="*"
   />

Props in Animated Progress Bar:

height: It is used to set the height of the progress bar.
backgroundColor: It is used to set the color of progressbar.
animated: This prop takes a boolean value for enabling or disabling animation.
indeterminate: It takes a boolean value to Set the bar to animate constantly as loading progress.
progress: It Chooses the point where the progress should animate, based on the progress bar width.
trackColor: which sets the color of the progress bar track.

Steps to Create React Native App:

Step 1: Open your terminal and run the below command.

npm install -g expo-cli

Step 2: Now expo-cli is globally installed so you can create the project folder by running the below command.

expo init "projectName"

Step 3: Now go into the created folder and start the server by using the following command.

cd "projectName"

Step 4: Installing the Required Dependency.

npm install react-native-animated-progress

Project Structure:

package.json:

  "dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^13.0.0",
    "react-native-animated-progress": "*"
  }

Example: Below is implementation of code. A simple progress bar then create an animated progress bar.

JavaScript

import React from 'react';
import { View, Text } from 'react-native';
import ProgressBar from 'react-native-animated-progress';
 
const App = () => {
  return (
    <View>
     
      <Text style={{ marginBottom: 20 }}>
        Progress without animation
      </Text>
      <ProgressBar
        progress={30}
        height={7}
        backgroundColor="#4a0072"
        animated={false}
      />
     <Text>{'\n'} {'\n'}</Text>
      <Text style={{ marginBottom: 20 }}>
        Progress with animation and increased height
      </Text>
      <ProgressBar progress={60} height={7} 
        backgroundColor="green" />
      <Text>{'\n'} {'\n'}</Text>
      <Text style={{ marginBottom: 20 }}>With indeterminate</Text>
      <ProgressBar indeterminate="true" backgroundColor="#4a0072" />
      
      <Text>{'\n'} {'\n'}</Text>
        <Text style={{ marginBottom: 20 }}>
          With TrackColor (that shows remaining part)
      </Text>
      <ProgressBar
        progress={60}
        height={7}
        backgroundColor="green"
        trackColor="yellow"
      />
    </View>
  );
};
export default App;