Implementing multiple Progress.bar in react-native - react-native

Question

I want to achieve the WhatsApp stories like effect, where the number of progress bars on top are equal to the number of stories.
I'm using react-native-progress/bar library to achieve this effect, but I'm finding a way that how can I run second progress bar when first ends.
Actually progress of Progress.bar changes with the change of state.
What is an efficient way to do this by using a single state?
Here is code:
import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import * as Progress from 'react-native-progress';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
image: {
width: 300,
height: 200,
},
});
export default class Example extends Component {
componentDidMount() {
this.animate();
}
constructor(props) {
super(props);
this.state = {
progress: 0
};
}
animate() {
let progress = 0;
this.setState({ progress });
let myInterval = setInterval(() => {
if (progress > 1) {
progress = 1;
clearInterval(myInterval);
} else {
progress += 0.01;
}
this.setState({ progress });
}, 20)
}
render() {
return (
<View style={styles.container}>
<View style={{flexDirection:'row'}} >
<Progress.Bar
key={'0'}
style={styles.progress}
progress={this.state.progress}
indeterminate={false}
/>
<Progress.Bar
key={'1'}
style={styles.progress}
progress={this.state.progress}
indeterminate={false}
/>
</View>
</View>
);
}
}