oblador
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.
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.
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 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 :)
@LolnationCH I'm unable to reproduce this bug, can you post a minimal example code to reproduce?
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)
@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.
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.
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?
The issue still occurs, @oblador with string or float. Also, @phantom1299 temporary-fix causes onChangeText to stop working.
@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
