DEV Community

Cover image for Animated Gauge / Progress
jzion
jzion

Posted on

Animated Gauge / Progress

We've been always struggling using gauge and progress to beautify our metrics in react-native.

We were used to implement rough gauge components.

But then came a project where, you know, the designer just cracked and designed a complex gauge with gradient inside, we needed to link the gradient color with the progress. Such a mess.

BUT instead of trying to bring him back from his crazy ideas, we just took up the challenge.

Then we made a first implementation with react-native-svg which was great but not smooth enough and still miss some customizations such as : inner shadow.

And few days later, we heard about @react-native/skia which is react-native implementation of Skia.

We dropped react-native-svg in favor of Skia, we made the right choice as we seen a big performance improvement on the component. Beyond that, we were able also to implement incredible styles features as inner/outer shadow on the gauge.

We made sure that the gauge can also be used without fancy, shining effects. ( Like in the banner )

On our case we needed a heavily customized gauge like below :

react-native-custom-gauge

And today we are happy to share with you the result of that super interesting journey :

https://github.com/Winzana/rn-gauge

Latest comments (0)