How can I reset Animated.Value in React Native?

Question

This is my code for animating components based on scrolling:

  const scrollY = useRef(new Animated.Value(0));
  const scrollYClamped = diffClamp(scrollY.current, 0, topBarHeight);

  const translateY = scrollYClamped.interpolate({
    inputRange: [0, topBarHeight],
    outputRange: [0, -topBarHeight]
  });
  console.log('scrollY', scrollY, scrollYClamped);

  useEffect(() => {
    console.log('in use effect');
  }, []);

  const handleScroll = Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: { y: scrollY.current }
        }
      }
    ],
    {
      useNativeDriver: true
    }
  );

The thing which I want to achieve is reset the scrollY to the initial value whenever a method is called. Something like:

const resetValue = () => { scrollY = useRef(new Animated.Value(0)); }

Any idea how to achieve that?

user_10718641 · Answer

You can use the setValue method on the animated value. Something like the following should work for you:

scrollY.current.setValue(0);

You can read more about setValue here: https://reactnative.dev/docs/animatedvalue#setvalue

user_18575869 · Answer

First of all your question is absolute .To reset the animates value you have to use setValue method in your animated vakue. Like

scrollY.current.setVAlue(0);

If you like to learn more about animated and setValue refer React Native Animated.

How can I reset Animated.Value in React Native?

2 Answers