FlatList onEndReached not working if onScroll is set in renderScrollComponent

  <FlatList
    onEndReached={() => {
      console.log("reached");
    }}
    renderScrollComponent={props => {
      return (
        <Animated.ScrollView
          {...props}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: value } } }],
            { useNativeDriver: true }
          )}
        />
      );
    }}
  />;

I did get the value update. However, onEndReached is never called.

Any idea how to get the value update and not breaking onEndReached?

[jvasquez864]

@CallMeHeisenberg @jkadamczyk I also managed to work around this by memoizing the animated flatlist

    const AnimatedFlatList = useMemo(
      () => Animated.createAnimatedComponent(FlatList),
      [],
    );

Not sure if this is the right approach, but it got me working since the other suggestions above didn’t seem to work.

[yilinjuang]

Yes it does! thanks