React Native animate angles of segments of pie chart

Question

I am following this tutorial: https://medium.com/@oriharel/pie-animation-in-react-native-using-svg-55d7d3f90156

In the tutorial, you make a pie chart whose end angle is animatable. The pie chart has three segments that are 20%, 20%, and 60% of the chart, respectively. The end angle of the chart animates from 0.1Pi to 2Pi.

What I want to do instead is keep the end angle constant, and instead animate the proportions of the individual segments (which so far are fixed at 20, 20, and 60).

So far what I've tried is changing this code

const demoData = [
    {
        number: 60,
        color: '#0d2f51'
    },
    {
        number: 20,
        color: '#28BD8B'
    },
    {
        number: 20,
        color: '#F66A6A'
    }
];

to this

const demoData = [
    {
        number: Animated.Value(60),
        color: '#0d2f51'
    },
    {
        number: Animated.Value(20),
        color: '#28BD8B'
    },
    {
        number: Animated.Value(20),
        color: '#F66A6A'
    }
];

but this gives me an error. Does anyone know how to approach this?

Thanks!

score 0 · Answer 1 · answered Mar 28 '19 at 04:57

You should be using the keyword new while initialising animated values. Also const keyword is used when the values assigned are never changed throughout its lifecycle. Please use state variable for holding animatable values.

this.state = {
   demoData: [
    {
        number: new Animated.Value(60),
        color: '#0d2f51'
    },
    {
        number: new Animated.Value(20),
        color: '#28BD8B'
    },
    {
        number: new Animated.Value(20),
        color: '#F66A6A'
    }
  ];
}

React Native animate angles of segments of pie chart

1 Answers1