React Native, Multiple Animations OnPress - react-native

Question

Thanks in advance for the help.
Attempting to have an image asset (in this case "yes.png") trigger two animations on touch ("onPress).
The image itself should spring (animated.spring) and then previously hidden text should appear.
Whatever I try I can only get it to do one or the other but not both.
Tried wrap both animations in a parallel aka
_springAnimation = () =>
Animated.parallel([
Animated.spring(this.state.springValue, {
toValue: 1.33,
friction: 0.47,
useNativeDriver: true,
}),
Animated.timing(this.state.fadeValue, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start(),
]);
and add <TouchableOpacity onPress={this._start}> after the first.
Here is the current code I have:
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
springValue: new Animated.Value(0.47),
useNativeDriver: true,
fadeValue: new Animated.Value(0),
};
}
_springAnimation = () => {
Animated.spring(this.state.springValue, {
toValue: 1.33,
friction: 0.47,
useNativeDriver: true,
}).start();
};
_start = () => {
Animated.timing(this.state.fadeValue, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this._springAnimation}>
<Animated.Image
source={require('animation/assets/yes.png')}
style={[
styles.imageView,
{
transform: [{scale: this.state.springValue}],
},
]}
/>
<Animated.View
style={{
opacity: this.state.fadeValue,
height: 60,
width: 200,
backgroundColor: 'black',
justifyContent: 'center',
}}>
<Text style={styles.buttonText}>Win</Text>
</Animated.View>
</TouchableOpacity>
</View>
);
}
}

Answer 1

If you want to run animation one after another. You can do this by Animated.sequence.
Animated.sequence([
Animated.spring(this.state.springValue, {
toValue: 1.33,
friction: 0.47,
useNativeDriver: true,
}),
Animated.timing(this.state.fadeValue, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
})
]).start(); // start the sequence group
They will start stop accordingly.
And If you want to run it parallel then try below code.
Animated.parallel([
Animated.spring(this.state.springValue, {
toValue: 1.33,
friction: 0.47,
useNativeDriver: true,
}),
Animated.timing(this.state.fadeValue, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
})
]).start(); // start the sequence group