Do you know how to create an animated progress bar with an arrow using React Native?
Naturally, as a programmer, I always like my projects to be perfect and comply with the clients’ desired design and functionality. There are times that for some reason, the technology we are using does not support the clients’ vision, or nobody has developed what they want before. That’s when we have to turn on our creativity to make things from scratch. Our main objective may sound simple, but it’s not: to provide solutions for all the potential problems the client may face.
The challenge building a progress bar for React Native
Sometimes, the internet is just not helpful. When it comes to programming, not everything is searchable or available online for us to use. Even though I have developed features from scratch many times and know my way around search engines, I’ve had opportunities when what I needed just wasn’t as easy to create or look for as I hoped.
This is one of those stories: one where I had to go back to the drawing board and think outside of the box to develop a new thing.
This project was meant for mobile platforms, and the chosen technology was React Native. My task was to implement a circular component with a pointing arrow to show progress, like the one below.
Libraries are always helpful
I started by doing research and found out that the circle could be implemented with a very useful library called react-native-svg. To begin, I used the library’s circle component which allowed me to place text at the center of it. So far, so good: I was able to render a circle with some text inside it:
But that was just the start. This is an example of a circular progress bar with percentage. I now needed to display the progress using the arrow indicator shown in the image above.
I searched in Google and StackOverflow, the go-to places for programmers looking for answers, but I couldn’t find anything related. I quickly realized that it had to be done from scratch, so I started to try different approaches.
Crafting a custom solution
So I stuck to the basics: the library mentioned above plus a little bit of math would do the trick. I’ll show you.
Knowing that the shape is a circle, we can use the value of its radius and the progress percentage that needs to be filled to calculate the element’s position in the circumference of this circle.
This is done as follows:
- Position in x → RADIUS * COS (Angle in radians)
- Position in y → RADIUS * SIN (Angle in radians)
To calculate the angle obtained according to the assigned percentage,
you can use the following formula:
- Angle calculation → (percentage * 90) / 0.25
Creating a progress bar in React Native (Step by Step)
In this example, we are going to assign a size = 100 and a percentage = 0.61 (61%).
First of all, use the react-native-svg library to create the circle. As we see in the image below, we must use 2 circles; one that will be the complete circle without filling, and one on top of it, the one that goes “above” to show the progress:
If you run this code, you can see that the circle is created correctly but the direction of the progress bar is the opposite of what we need. To correct this we must add styles to our SVG component and perform a rotation of 180 degrees on the ‘Y’ axis and 90 degrees on the ‘Z’ axis:
The code would look like this for the correct orientation:
Our next step will be to place the text inside the circle. For that, as we mentioned above, we will place a view with absolute position and center alignment so that it’s placed in the center of the circle, as the following snippet shows:
The result after placing the text with custom styles is as follows:
Next steps
I really liked how its design turned out, but I wanted to upgrade it and add some kind of animation to it. For that, I used the react-native-reanimated library that allows you to create an animation to an already created component. In this case, I replaced the second circle, which represents the progress bar, and decided to animate it. The configuration is as follows:
The final element should look like this:
Final thoughts
Our job as programmers is to find solutions to different problems that we face on a daily basis. Sometimes we can code these solutions ourselves, for simple things, but other times we are faced with problems that require us to bring out all kinds of creativity and solutions to the table. This, to me, was a particular case. The result I was looking for was fairly simple, but I needed to use my imagination to figure out the best way to make it. There is never a single solution, but perhaps you may find my answer useful to deal with code problem-solving in some way.
Complete final code
