Set progress text properly and runs the animation when the default progress is given

[mu29]

Problem

Since progressValue is set to 0 on constructor, initial progress value didn't works well when combine with animated and showsText props. See code and screenshot below.

importReact,{Component}from'react';importCirclefrom'react-native-progress/Circle'import{Platform,StyleSheet,Button,View}from'react-native';typeExampleState={progress: number;}exportdefaultclassExampleextendsReact.Component<{},ExampleState>{
state ={progress: 0.1,}render(){return(<Viewstyle={styles.container}><Circlecolor="#000000"unfilledColor="#FAFAFA"borderWidth={0}progress={this.state.progress}showsText/><Buttontitle="click!"onPress={()=>this.setState(s=>({progress: s.progress+0.1}))}/></View>)}}conststyles=StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},});

Expected behavior

Text shows 10% in the progress circle

Solution

Run progress animation on componentDidMount. This will not only update progress, but also animates progress circle to given default progress.