Wrong text in Circle when `animated` is true

[alexcouret]

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.

[jaesius]

I'm having the same issue. Is there a solution coming for this? Thanks.

[phantom1299]

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.

[lossen]

Same issue :(

[Ashwin-Mothilal]

Is this issue solved? Still facing it...

[LolnationCH]

This issue is still not fixed, and it is very simple to fix...

@phantom1299 has found the solution to the problem about 4 months ago and it is still not fix.

[Clafouti]

Still facing this issue. The PR is pending, any news about this ?

[LolnationCH]

@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 :)

[oblador]

@LolnationCH I'm unable to reproduce this bug, can you post a minimal example code to reproduce?

[LolnationCH]

export default class CharacterInfoView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
                  exp: 0.0,
  }
render() {
    return(
<View>
<Progress.Circle size={30}
       showsText={true}
       size={150}
       progress={this.state.exp}
       borderWidth={0}
       color={'rgb(0, 255, 25)'}
       unfilledColor={'rgb(121, 119, 119)'}/>
<TextInput
                style={styles.textInput}
                placeholder="seconds"
                keyboardType='numeric'
                onChangeText={(exp) => this.setState({exp: exp})}/>
</View>
);}}

I did not test this, but it's an adaptation of my code link that I had to do the modification, otherwise it wouldn't work.

Using : "react-native-progress": "^3.4.0" (package.json)

[oblador]

@LolnationCH The problem with your code is that you are passing a string, not a number. If you replace it with onChangeText={exp => this.setState({ exp: parseFloat(exp, 10) || 0 })} then it works just fine for me.

[LolnationCH]

Still happens when its a number, this was just a example, not what im actually doing. I call a function that sets exp to a float.

[oblador]

It's really hard for me to fix if I can't reproduce, the code you just posted works fine if you fix the string bug. Could you set up an example project that demonstrates this?

[yakirbu]

The issue still occurs, @oblador with string or float.
Also, @phantom1299 temporary-fix causes onChangeText to stop working.

[Doodidan]

@oblador minimum code is:

import * as Progress from 'react-native-progress';

class SomethingNew extends PureComponent {
  render() {
    return (
      <Progress.Circle
        progress={0.67}
        showsText={true}
      />
    );
  }
}

Will be shown zero.

UPD: screenshots

*Sorry for tripled elem