I have a problem with my code. I understand if my initial state of toggled = false and enter the condicional but the animation not run and the the weirdest thing is when I separeate in two function whit two different bottom the animation run but I want to run in one only function. I need help with that. Thank you.
const runTwoOption:any = () => {
setToggled(!toggled);
if(!toggled){
Animated.parallel([
runLoop(),
Animated.timing(_scale, {
toValue: 1,
useNativeDriver: false,
})
]).start();
}else{
Animated.parallel([
Animated.timing(_scale, {
toValue: 0,
useNativeDriver: false,
}),
Animated.timing(_rotate,{
toValue:0,
useNativeDriver:false
})
]).start();
}
}
these are the functions separated
const runAnimationsInParallel: any = () => {
Animated.parallel([
runLoop(),
Animated.timing(_scale, {
toValue: 1,
useNativeDriver: false,
})
]).start()
}
const stopAnimationsInParallel: any = () => {
Animated.parallel([
Animated.timing(_scale, {
toValue: 0,
useNativeDriver: false,
}),
Animated.timing(_rotate,{
useNativeDriver:false,
toValue:0,
}),
]).start();
}
That is my DOM, tha button with title null not working.
<View>
<Animated.Image
source={require('../assets/logo_baufest.jpg')}
style={styleAnimationToImage}
/>
<Button title="PLAY" onPress={runAnimationsInParallel} />
<Button title="PAUSE" onPress={stopAnimationsInParallel} />
<Button title="RUN" onPress={runTwoOption} />
</View>