React native - stopping an animation - react-native

Question

I'm trying to stop the animation once the data has loaded. For the sake of testing, I'm using a timer to simulate state change (data has loaded) to interrupt animation. The problem is that the animation keeps running after the state has changed.
const [isLoading, setIsLoading] = useState(false);
const animationRef = useRef(new Animated.Value(0)).current;
const loadData = () => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, 3000)
}
useEffect(() => {
const rotateElement = () => {
animationRef.setValue(0);
Animated.timing(animationRef, {
toValue: 1,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true,
}).start(rotateElement);
};
if (isLoading) {
rotateElement();
} else {
Animated.timing(animationRef).stop();
}
}, [isLoading, animationRef]);
const spin = animationRef.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
Snack:
https://snack.expo.dev/#wastelandtime/timer

Answer 1

Only try to remove the parameter rotateElement from start.
const rotateElement = () => {
animationRef.setValue(0);
Animated.timing(animationRef, {
toValue: 1,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true,
}).start();

Answer 2

You could set a really long duration, ideally as long as your configured timeout. Then, you wouldn't need to call the start function passing the rotateElement as callback as Ivan suggested. That way, when you call the stop method, it will work as desired.
Another option would be using the react-native-reanimated package for writing this function in a more declarative way, making sure that the animation would run as long as you need it to.
I edited your snack, implementing the reanimated alternative: https://snack.expo.dev/#scalfs/timer

Answer 3

On seeing the code sample, simply using Animated.loop (with the required iterations) should get this working well enough. So the useEffect in the codeblock would be like so,
useEffect(() => {
const rotateElement = () => {
// animationRef.setValue(0); This isn't necessary anymore.
Animated.loop(
Animated.timing(animationRef, {
toValue: 1,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true,
}),
{
iterations: 2,
}
).start(rotateElement);
};
if (isLoading) {
rotateElement();
} else {
Animated.timing(animationRef).stop();
}
}, [isLoading, animationRef]);
As for your use case, the iterations could be set to a high enough number and just use the if statement to stop the loop when loading is complete as you have already done here. You could also add a check for errors as well, so the loop doesn't continue ad infinitum.

Answer 4

You are creating a new instant of rotateElement each time your state changes. The animation you attempt to stop isn't the one you think.
const loadData = () => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, 1000)
}
const rotateElement = Animated.timing(animationRef, {
toValue: 1,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true,
});
useEffect(() => {
if (isLoading) {
rotateElement.start();
} else {
rotateElement.stop();
}
}, [isLoading]);
Best creating the rotateElement outside the useEffect as shown above.
I've also changed the timing of the animation because the demo was too short to simulate end of loading correctly.