Custom Progress bar in React-Native

Hi Guys, I this article, we are creating a Custom Progress bar in React-Native. There are many dependencies and plugins available to display the Progress bar but if a developer wants to customize these progress bar then it’s very complex to do this. So I create a simple Progress bar to display the percentage. In this example, I have created a custom js component with the name PercentagBar.js and import it into the Dashboard screen. let’s understand with an example.

1. Create a new Project

react-native init ProjectName

I have already created a project so just create a custom component that will have to import on the Dashboard screen

2. PercentageBar.js

Here the source code for the progress percentage bar in react native. I am using const function with react native hooks in this example

As you can see, I have added two views one above another the bottom view is for background purpose and another view which is above with position absolute. also I added percentage Text below the second view

import React, {useState} from 'react';

import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';

const PercentageBar = ({
  navigation,
  percentage,
  height,
  backgroundColor,
  completedColor,
}) => {
  const [getPercentage, setPercentage] = useState(percentage);
  const [getheight, setHeight] = useState(height);
  const [getBackgroundColor, setBackgroundColor] = useState(backgroundColor);
  const [getCompletedColor, setCompletedColor] = useState(completedColor);
  return (
    <View>
      <View style={{justifyContent: 'center'}}>
        <View
          style={{
            
            width: '100%',
            height: getheight,
            marginVertical: 10,
            borderRadius: 5,
            borderColor: getBackgroundColor,
            borderWidth: 1,
          }}
        />
        <View
          style={{
            width: getPercentage ? getPercentage : 0,
            height: getheight,
            marginVertical: 10,
            borderRadius: 5,
            backgroundColor: getCompletedColor,
            position: 'absolute',
            bottom:20
          }}
        />
        <View
          style={{
            width: getPercentage ? getPercentage : 0,
            height: getheight,
            bottom:10
          }}>
          <Text style={{textAlign: 'right'}}>{getPercentage}</Text>
        </View>
      </View>
    </View>
  );
};
export default PercentageBar;

3. Import Progressbar on Dashboard.js

As you can see in the above code, to display the Custom Progress bar in React-Native You have to pass mandatory fields height, background color, Completed color, percentage.

• Height: Use to set the specific height to Progress Bar.
• BackgroundColor: Use to set background color & Border color to Progress Bar.
• CompletedColor: Use to set completed progress percentage color.
• Percentage: Use to set progress percentage.

  import React, {useState} from 'react';

  import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
  import PercentageBar from './PercentageBar';

  export default function Dashboard({navigation}) {
    const onSelectSwitch = index => {
      alert('Selected index: ' + index);
    };

    return (
      <View style={{alignItems: 'center'}}>
        <Text style={{fontSize: 25, margin: 20, textAlign:'center'}}>
          React native progress bar
        </Text>
        <View style={{width: '80%', justifyContent: 'center'}}>
          <PercentageBar
            height={20}
            backgroundColor={'grey'}
            completedColor={'blue'}
            percentage={'65%'}
          />
        </View>
      </View>
    );
  }

4. Output:

Check this output, you can easily use this component in your project also you can easily customize this component as per your requirements

Thank you 🙂