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

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

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.

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

Custom Progress bar in React-Native

 

Thank you 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *