arrow icon
REGISTER

ReanimatedArc - Build Circular Animated UI Elements In React Native

2020-04-15
Download your copy of the
Ultimate Guide to React Native Optimization

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

Build good-looking and smooth animated arcs in React Native with ReanimatedArc library.

An Introduction

Circular UI elements are a common pattern in many modern apps. They are usually used to indicate some kind of progress, for example

  • your bank account balance,
  • time passing on a stopwatch in your smartphone,
  • macronutrient ratio in your diet,

and many more.

They are used whenever we want to show that something is a part of the whole. A circle seems to be the most natural way of representing this relationship.

However, rendering a circle is not trivial in <rte-code>react-native<rte-code>. One of the possibilities is to use <rte-code>react-native-svg<rte-code> with some math calculations. But what if we also want to:

  • Animate our arc
  • Animate it with native performance
  • Control the progress with gestures

This is when our new library - ReanimatedArc comes into play.

ReanimatetdArc for the rescue!

Reanimated-arc is a utility component to build various UI elements that consist of arcs with the ability to animate the rendered arc. You can use a high-level wrapper that would animate the arc based on prop value change or low-level component to control your animation with react-native-reanimated. It can be also combined together with react-native-gesture-handler to build outstanding sliders. Also, thanks to the ReanimatedArc library the animations are very smooth.

Now, let's find out what we can build with the new library!

Circular Progress Bar

This is the most obvious usage of ReanimatedArc. To build circular progress we have to combine two arcs:

  • the first will be used for background
  • the second will be used to indicate progress.

We will interpolate an animated value into the text to show the percentage of the progress. This example can be found in the repository.

gif presenting circular progress bar made with ReanimatedArc library

Donut chart

Donut charts are a great way of representing various kinds of data. For example, it may show macronutrients in a particular meal in some health apps. Also, it can display the ratio of your spendings in a particular month compared to the remaining funds in your bank’s app.

The example below shows a nicely animated donut chart. You can find the code here.

gif presenting donut chart made with ReanimatedArc library

Displaying time

What’s more, ReanimatedArc allows you to build a simple stopwatch. This type of chart can also be used in various projects like, for example, workout apps.

You can check this example here.

gif presenting stopwatch made with ReanimatedArc library

Rounded slider

The rounded slider is commonly used as a component for adjusting some settings. Let's imagine that you have a Smart Home. Your smartphone is a command center in your hand. One of your smart devices is a light bulb with adjustable brightness. Imagine how awesome it would be to dim your light with a nice-looking rounded slider… No problem.

Check slider implementation here.

gif presenting rounded slider made with ReanimatedArc library

Summary

To sum up, ReanimatedArc library allows you to build good-looking and smooth animated arcs. They can be used in many different types of applications such as banking, sports, Smart Home or diet apps.

I hope that this library will be helpful to you. If you like the project don't forget to give it a star on GitHub.

Happy Coding!

Author:
Jakub Mazurek
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.