2

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.

LGenzelis
  • 764
  • 6
  • 14
  • I share your confusion :) As nobody has turned up to answer this, I guess we'll remain in the dark. – mglonnro Sep 13 '22 at 17:58

0 Answers0