Pie animation in React Native using SVG

It’s only natural that web developers, when approaching React Native, will look for the same set of tools when trying to implement their designer’s wild ideas, which most certainly will come in SVG form.

So without further a due, let’s dive into how to implement a nice pie chart and eventually we’ll also animate it using React Native Animated library. Here’s what the end result will look like:

In App.js, we’re taking sample data (demoData) and drawing it onto a pie. To do so we’re using few react-native-svg components (SVG, G and Path). The pie will be constructed out of path elements (a path element for each pie slice). We wrap the <Path> component in a custom element, called Slice and creating an animated component out of it, using createAnimatedComponent.

Here’s the code:

The animation of the pie will be done by simply drawing it from angle 0 all the way to angle 360 in a nice animated way. Now, we’d like to use React Native’s Animated library as much as possible as it’s the official and documented way of doing animations in RN.

Ideally, we would have just use the <Path> element and provide it with a d property, pointing to an Animated.Value. However, this will not work as the way Path.js is implemented in react-native-svg makes it impossible for values to be parsed from Animated.Value to primitive.

So this is why we wrapped the <Path> component with our <Slice> component, and by creating an animated component out of it, we are now able to pass down an animated value.

Using this technique, one can easily animate any shape, making designers craziest ideas come true!

Related posts:

As stated in our guide “What is Blockchain Technology?”, there are three principal technologies that combine to create a blockchain. None of them are new. Rather, it is their orchestration and…

So as to not get any reader’s alarm bells ringing, I need to clarify two things: First, I am mostly recovered from this illness. Second, my mental illness was a walk-in-the-park compared to what…

How do you select an ERP software package when you are so diverse that often software products that are rich in manufacturing features are lacking in distribution functionality, or distribution…