how to set the progress speed of the progress bar to be equal to the time of the percentage counter? the bar is at a very fast speed, while the percentage numbers shown are slowly passing from 1 to 100. I wish the two were at the same speed, as if they were one but one, not distinct elements. Will someone help me with this please?
import React, {Component} from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';
import * as Progress from 'react-native-progress';
class App extends Component {
**constructor(props) {
super(props);
this.state = {progress: 0,};
}
startProgressIndicators() {
let progress = 0;
this.setState({progress}, () =>
setTimeout(() => {
this.setState({indeterminate: false});
setInterval(() => {
progress += Math.random() + 1 / 100;
if (progress <= 100) {
this.state.progress}
else{
this.state.progress(false)
}
this.setState({progress});
}, 500);
},1500 ),
);
}**
render() {
return (
<View style={styles.container}>
<Text style={styles.text}> Progress indicator </Text>
<View style={{margin: 5}} />
** <Button
title="Iniciar"
onPress={() => this.startProgressIndicators()}
/>**
<View styles={{}}>
{`${this.state.progress.toFixed(0)}%`}
</View>
<Progress.Bar
size={50}
progress={this.state.progress}
width={200}
style={{margin: 5, fontSize: 10}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: '#051923',
margin: 10,
fontSize: 30,
},
});
export default App;
{
/* <Progress.Bar progress={0.3} width={200} />
<Progress.Pie progress={0.4} size={50} />
<Progress.CircleSnail color={['red', 'green', 'blue']} /> */
}
```
`
**how to set the progress speed of the progress bar to be equal to the time of the percentage counter?
the bar is at a very fast speed, while the percentage numbers shown are slowly passing from 1 to 100. I wish the two were at the same speed, as if they were one but one, not distinct elements. Will someone help me with this please?**
