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 })

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.

If you can keep track of the position and listen to onScroll event of ScrollView, then it can be done.<br>
Here is the example code.(Click the button to test)<br>
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 animation 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>
);
};

Tested with current latest React Native version 0.71<br>
Thanks

Edit:<br>
There's no onScrollAnimationEnd in the current version and neither I could find any event that is fired when the animation ends.<br>
But given the features, we can implement such functionality.
The idea is whenever we scroll with animation, we need to store the position and animation state, so that we can decide if the animation is ended or not.

const [position, setPosition] = useState({x: 0, y: 0,animationStarted: false});
<SafeAreaView>
<ScrollView
scrollEventThrottle={1}
ref={myRef}
onScroll={e => {
if (
position.animatedStarted &&
e.nativeEvent.contentOffset.x === position.x &&
e.nativeEvent.contentOffset.y === position.y
) {
console.log('scrollTo animation ended');
}
}}>
....
</SafeAreaView>