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.

import React, {Component} from 'react';
import Circle from 'react-native-progress/Circle'
import {Platform, StyleSheet, Button, View} from 'react-native';

type ExampleState = {
  progress: number;
}

export default class Example extends React.Component<{}, ExampleState> {
  state = {
    progress: 0.1,
  }

  render() {
    return (
      <View style={styles.container}>
        <Circle
          color="#000000"
          unfilledColor="#FAFAFA"
          borderWidth={0}
          progress={this.state.progress}
          showsText
        />
        <Button title="click!" onPress={() => this.setState(s => ({ progress: s.progress + 0.1}))} />
      </View>
    )
  }
}

const styles = 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.