react-native-progress: Wrong text in Circle when `animated` is true

Hello,

I have an issue where the text inside the circle is always at 0 if I don’t setanimated={false}. After looking at the code, it seems like this code is responsible :

componentWillMount() {
    if (this.props.animated) {
      this.props.progress.addListener((event) => {
        this.progressValue = event.value;
        if (this.props.showsText || this.progressValue === 1) {
          this.forceUpdate();
        }
      });
    }
  }

It’s never entering the listener (I put some logs), so the progressValue is always 0.

Thanks.

About this issue

  • Original URL
  • State: open
  • Created 7 years ago
  • Reactions: 10
  • Comments: 16 (3 by maintainers)

Most upvoted comments

Hi there, I had the same issue. After some digging and experimenting, I got it to work by changing

{formatText(progressValue)}

in line 187 at Circle.js (node_modules\react-native-progress\Circle.js) to

{progress ? formatText(progress._value) : this.forceUpdate()}

Hope it helps.

@Clafouti You need to modify it yourself, the author does not seem to code on this anymore. You could always fork it and make it better 😃