Question 183855 in React native Question posted in
The official React Native documentation can be found here.

How to run a function after scrollTo animation has finished in React Native?

I am using scrollTo along with animation. I want run a function after the animation is finished. How can I do that?

ref.current.scrollToOffset({ animated: true, offset: 0 })
Tags:

2

Answers


  1. 0

    New answer

    To run a function after the scroll animation is finished, you have to use the onScrollAnimationEnd in case you’re using a FlatList or ScrollView.

    For example:

         <ScrollView
        ...
        onScrollAnimationEnd={yourFunctionHere}
      />
    ...

    Simply as that.

    Old answer

    Since the question did not have a lot of information, I thought the question was about an standalone animation, then I replied this:

    If you’re using the normal React Native Animated you can simply achieve that by adding a callback to the .start() function:

     Animated.timing(yourValueHere, {
     toValue: 1,
     duration: 5000,
     easing: Easing.linear,
 }).start(({ finished }) => {
    if (finished) {
      ref.current.scrollToOffset({ animated: true, offset: 0 })
    }
 });

    From the docs:

    Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done or when the animation is done because stop() was called on it before it could finish.

    Login or Signup to reply.
  2. 0

    I can’t find anything about it in the docs in current latest version 0.71.
    However, there’s seems to be a workaround.
    If you can keep track of the position and listen to onScroll event of ScrollView, then it can be done.
    Here is the example code.(Click the button to test)
    Note: You may need to click again if first time click doesn’t work.

    const App = () => {
  const myRef = useRef();
  const [position, setPosition] = useState({x: 0, y: 0});

  let texts = [];

  for (let i = 0; i < 200; i++) {
    texts.push(<Text key={i}>Item value is {i}</Text>);
  }

  return (
    <SafeAreaView>
      <ScrollView
        scrollEventThrottle={1}
        ref={myRef}
        onScroll={e => {
          if (
            e.nativeEvent.contentOffset.x === position.x &&
            e.nativeEvent.contentOffset.y === position.y
          ) {
            console.log('scrollTo ended');
          }
        }}>
        <Button
          title={'button'}
          onPress={e => {
            if (myRef && myRef.current) {
              const newPos = {x: 0, y: 400};
              setPosition(newPos);
              (myRef.current as ScrollView).scrollTo({
                x: position.x,
                y: position.y,
                animated: true,
              });
            }
          }}
        />
        {texts}
      </ScrollView>
    </SafeAreaView>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search