React Native doesn't update state - reactjs

Question

I'm writing a simple animation and trying to reset it after it's complete
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Image, Animated, Easing } from 'react-native';
export default function App() {
const [leftPos, setLeftPos] = useState(new Animated.Value(0))
useEffect(() => {
cycleAnimation()
}, []);
const cycleAnimation = () => {
console.log('STARTING ANIMATION:', leftPos)
Animated.sequence([
Animated.timing(
leftPos,
{
toValue: 430,
duration: 3000,
easing: Easing.linear,
useNativeDriver: false
}
)
]).start(() => {
setLeftPos(new Animated.Value(0))
cycleAnimation()
})
}
return (
<View style={{ backgroundColor: 'black', flex: 1 }}>
<Animated.View style={{ left: leftPos }}>
<Image
style={styles.cloud}
source={require('./assets/cloud.png')}
/>
</Animated.View>
</View >
);
}
const styles = StyleSheet.create({
cloud: {
}
});
leftPos is always 430 (except for the first iteration) in cycleAnimation despite calling setLeftPos with new 0 value. Also tried putting cycleAnimation in setLeftPos's callback but got the same result.

Answer 1

You are resetting it incorrectly. No need to update state, try this:
leftPos.setValue(0);

Answer 2

Put your function inside useEffect
import React, { useState, useEffect } from "react";
import { StyleSheet, View, Image, Animated, Easing } from "react-native";
export default function App() {
const [leftPos, setLeftPos] = useState(new Animated.Value(0));
useEffect(() => {
const cycleAnimation = () => {
console.log("STARTING ANIMATION:", leftPos);
Animated.sequence([
Animated.timing(leftPos, {
toValue: 430,
duration: 3000,
easing: Easing.linear,
useNativeDriver: false,
}),
]).start(() => {
setLeftPos(new Animated.Value(0));
});
};
cycleAnimation();
}, [leftPos]);
return (
<View style={{ backgroundColor: "black", flex: 1 }}>
<Animated.View style={{ left: leftPos }}>
<Image style={styles.cloud} source={require("./assets/icon.png")} />
</Animated.View>
</View>
);
}
const styles = StyleSheet.create({
cloud: {},
});