Finally!🙌

A couple months ago, the amazing UI designer I work with, sketched out an elegant, clean design for a progress circle. Having an eye for art myself, I was excited to code this little nugget of beauty.

Fast forward two weeks down the line; I barely had anything close to what my designer and I were doting on. I was working on a React Native app that required to show progress of a particluar process. The catch? There were nested processes inside a single process! The problem? Although having come a long way, React Native is still in its “adolescence”. For developers, it means React Native does not always provide advance cabilities where needed.

The use case lies along the lines of the following-

I want to show the availability of vacant spots for a study at NYU. The study calls for a sample set of 30 people having blood group A-ve and 10 people having blood group O-ve, forming a total of 40 people. I would want to track the progress of group A-ve and group 0-ve separately.

I want to show the delivery of a set of monitors and keyboards. Say I gave an order for 500 sets. But they are being delivered from different warehouses across the country. I would want to track the progress of monitors and keyboards separately.

I am a supermarket franchise manager who wants to check the status of all checkout counters for a given store. The status of these counters could either be idle, active or closed. I would want to track all three of these states for a given store. Something like - Store A has 3 idle, 5 active and 2 closed counters.

*Cue*

This is where my designer enters the picture. His solution -

To make a multi part progress circle to show all of the above data in a 1cm x 1cm space!!✨✨✨

When you develop for a mobile device, real estate is expensive. So this was a huge save on space!

After a ton of research, trial and errors, and what felt like forever, I finally managed to develop what I was so eager to see in my app. And here are the results-

*drum rolls*

To get more context, following are the progress circles for the use cases mentioned above-

Since I spent so much time and energy on it, I thought, might as well put some more and make it into a package so that others won’t have to go down the path I did.

So there you have it! An npm package to create custom, two part progress circles that run on both android and iOS.

Download it by running-

npm i two-part-progress-circle

Here is the link to the npm package.

And here is the link to the github repo.

Play around with the props to create custom, light weight, two part progress circles.

And the best part? It’s only dependency is React Native!

Hope this helps!