How to update toValue for a spring animation in React Native (Animated API)?

Viewed 168

I'd like to be able to change the toValue of an animation responding to props update. The official docs for React Native Animated API state that the spring method

animates a value according to an analytical spring model based on damped harmonic oscillation. Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.

However, I haven't found anywhere how we can update toValue. Basically, my component looks like this:

const ProgressBar = ({ loadPercentage }) => {
    const loadAnim = useRef(new Animated.Value(0)).current;

    useEffect(() => {
     animation.current = spring(loadAnim, {
       toValue: loadPercentage,
     }).start(); 
    }, [loadAnim, loadPercentage]);       

    ....
}

This doesn't work for all cases. In particular, if loadPercentage changes too often, the component takes up a huge amount of resources. This kinda makes sense, since I'm creating a new animation for each update. Instead, I'd like to simply modify toValue without starting a new animation or anything like that.

This seems pretty basic, but after 4 hours of trying stuff/googling, I give up. -.-

Just in case, I also tried using react-native-reanimated, but no luck there either.

0 Answers
Related