javascript - Animate endAngle of Victory Pie Chart in React Native componentDidMount

Question

I'm using Victory Native charts in React Native and am attempting to animate the endAngle of Victory Pie chart from 0 to 360 to produce an effect similar to this.

I include a simplified version of my code. Simplified in the sense that I have hardcoded the dynamic data into the initial state. My code is as follows:

import React, {Component} from "react";
import {Animated, View} from "react-native";
import {VictoryPie} from "victory-native";

export default class PieGraph extends Component {
    state = {
        data: [
            {
                "color": "#D8BDC4",
                "y": 6,
            },
            {
                "color": "#D88196",
                "y": 1,
            },
            {
                "color": "#B73756",
                "y": 3,
            },
        ],
        total: 10,
        endAngle: new Animated.Value(0),
    };

    componentDidMount() {
        Animated.timing(this.state.endAngle, {toValue: 360, duration: 2000}).start();
    }

    render() {
        const {data, total, endAngle} = this.state;

        return (
            <View style={{paddingTop: 40}}>
                <VictoryPie
                    animate={{duration: 2000}}
                    data={data}
                    labels={datum => total ? `${Math.round((datum.y / total) * 100)}%` : ''}
                    colorScale={data.map(({color}) => color)}
                    startAngle={0}
                    endAngle={endAngle}
                />
            </View>
        )
    }
}

When animating the endAngle as above, the chart doesn't appear despite this.state.endAngle changing from 0 to 360. No errors or warnings were output.

When defining a static value for the endAngle prop less than 360 but above 0, the chart instantly appears in that state. When omitting the endAngle prop it instantly appears as a full circle.

I have also tried starting animation as a callback on the onLoad.before property on the animate prop, but still get the same result.

标签： javascriptreact-nativeanimationvictory-charts