React-native-reanimated: useAnimatedScrollHandler not working with <FlatList>

[mrousavy]

Description

The events onBeginDrag, onEndDrag, onMomentumBegin, and onMomentumEnd don't fire for my FlatList (created with Reanimated.createAnimatedComponent(FlatList)). Only onScroll works.

Screenshots

Steps To Reproduce

1. Create animated FlatList using Reanimated.createAnimatedComponent(FlatList)
2. Create handler using useAnimatedScrollHandler:

const onScroll = useAnimatedScrollHandler<{ beginY?: number; endY?: number }>({
    onScroll: (event, context) => {
        Logger.debug(`[SCROLL] SCROLL! ${event.contentOffset.y}`);
        scrollY.value = event.contentOffset.y;
    },
    onBeginDrag: (event) => {
        Logger.debug(`[SCROLL] BEGIN DRAG! ${event.contentOffset.y}`);
    },
    onEndDrag: (event) => {
        Logger.debug(`[SCROLL] END DRAG! ${event.contentOffset.y}`);
    },
    onMomentumBegin: (event) => {
        Logger.debug(`[SCROLL] BEGIN MOMENTUM! ${event.contentOffset.y}`);
    },
    onMomentumEnd: (event) => {
        Logger.debug(`[SCROLL] END MOMENTUM! ${event.contentOffset.y}`);
    },
});

1. Add to FlatList: <ReanimatedFlatList onScroll={onScroll} ... />
2. See only SCROLL! in console, no begin/end events

Expected behavior

I expect the begin and end events to fire

Actual behavior

They don't fire

Snack or minimal code example

const onScroll = useAnimatedScrollHandler<{ beginY?: number; endY?: number }>({
    onScroll: (event, context) => {
        Logger.debug(`[SCROLL] SCROLL! ${event.contentOffset.y}`);
        scrollY.value = event.contentOffset.y;
    },
    onBeginDrag: (event) => {
        Logger.debug(`[SCROLL] BEGIN DRAG! ${event.contentOffset.y}`);
    },
    onEndDrag: (event) => {
        Logger.debug(`[SCROLL] END DRAG! ${event.contentOffset.y}`);
    },
    onMomentumBegin: (event) => {
        Logger.debug(`[SCROLL] BEGIN MOMENTUM! ${event.contentOffset.y}`);
    },
    onMomentumEnd: (event) => {
        Logger.debug(`[SCROLL] END MOMENTUM! ${event.contentOffset.y}`);
    },
});

And

return <ReanimatedFlatList onScroll={onScroll} ... />

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

[terrysahaidak]

Hi. Did you use FlatList with createAnimatedComponent?

[mrousavy]

@terrysahaidak Yes. Also the onScroll event does get fired, it's just the begin/end events that don't

[terrysahaidak]

Could you try with custom scroll component?

[mrousavy]

@terrysahaidak Are you talking about the FlatList's scroll component prop?

[terrysahaidak]

yes, exactly

[Daavidaviid]

On my side it's working nicely using this configuration I found in another issue :

AnimatedFlatList.ts

const FlatListWithEventThrottle = forwardRef((props, ref) => (
  <FlatList
    {...props}
    scrollEventThrottle={0.0001}
    // @ts-ignore
    ref={ref}
  />
));

export const AnimatedFlatList: typeof FlatList = Animated.createAnimatedComponent(
  FlatListWithEventThrottle
);

And then using it like that :

      <AnimatedFlatList
        {...props}
        keyExtractor={keyExtractor}
        onScroll={scrollHandler}
        data={data}
      />

[terrysahaidak]

You can safely use 1 or even 16 instead.

[mrousavy]

I've managed to get it working now (alpha7). No idea what the issue was, maybe it was some sort of cache issue (hot reload, metro, babel, whatever). Closing this