How to achieve onEndReached in animated scrollview?

[Pietro-Putelli]

Hi, I'm working with an Animated.ScrollView components and I want to achieve a onEndReached method, like in FlatList, and I'm using the isCloseToBottom function to know when the scroll is at the end and call onEndReached.

Here's my code that actually works, but the function is call twice, it seems that the endReached state first update is not visible and so it execute the if state twice.

const onJsScroll = useCallback(
      (nativeEvent) => {
        if (isCloseToBottom(nativeEvent) && !endReached) {
          setEndReached(true);
          onEndReached?.();

          console.log("end reached");
        }
      },
      [endReached]
    );

const onScroll = useAnimatedScrollHandler(
      (nativeEvent) => {
        scrollY.value = nativeEvent.contentOffset.y;

        if (onEndReached) {
          runOnJS(onJsScroll)(nativeEvent);
        }
      },
      [endReached, onJsScroll]
);

[JasonCareter]

you can add it to the Animated.ScrollView directly like below

<Animated.ScrollView
     onScroll={scrollhandler}
     onEndReached={e => {
                                    
     }}
/>