How to stop loop animation immediately in React Native - react-native

Question

I am trying to achieve loop animation in react native. I am able to stop the animation as well, but it stops only after finishing the running animation in progress. Is there a way to stop it immediately. Since I am changing state value , I don't think I can use Animated.loop.
Edit: I tried stopping animation using
Animated.timing(this.state.opacity).stop()
But this had no effect on animation, it just kept going. So I added a boolean to control it, which works, but only after finishing the ongoing loop of animation.
Here is my code
this.state = {
varyingText: 'location',
stopAnimation: false,
opacity: new Animated.Value(0),
};
componentDidMount = () => {
this.startAnimation();
};
startAnimation = () => {
if (this.state.stopAnimation) return;
Animated.timing(this.state.opacity, {
toValue: 1,
duration: 1000
}).start(() => {
Animated.timing(this.state.opacity, {
toValue: 0,
duration: 1000
}).start(() => {
this.setState({
varyingText: 'location 1',
}, () => {
Animated.timing(this.state.opacity, {
toValue: 1,
duration: 1000
}).start(() => {
Animated.timing(this.state.opacity, {
toValue: 0,
duration: 1000
}).start(() => {
this.setState({
varyingText: 'location 2',
}, () => {
Animated.timing(this.state.opacity, {
toValue: 1,
duration: 1000
}).start(() => {
Animated.timing(this.state.opacity, {
toValue: 0,
duration: 1000
}).start(() => {
this.setState({
varyingText: 'location 3',
}, () => this.startAnimation())
})
})
})
})
})
})
})
});
};
stopAnimation = () => {
this.setState({
stopAnimation: true,
});
};
render() {
const opacityStyle = {
opacity: this.state.opacity,
};
return (
<View style={styles.view}>
<Animated.Text style={...opacityStyle}>
{this.state.varyingText}
</Animated.Text>
<Button
onPress={this.stopAnimation}
title="Stop"
color="#841584"
/>
</View>
);
}
In the code, if I stop the animation when text is location 1, it stops but only after showing location 2.