onGestureEvent not working on FlatList

I’m trying to get the gesture from a FlatList because I need the translation.y and not the contentOffset.y given by onScroll event. This is because I’m translating the FlatList and hiding the header as the user scrolls and using the offset provokes glitches (video and source code)

Current FlatList types says props can include NativeViewGestureHandlerProperties, this means onGestureEvent and onHandlerStateChange are available. So this is posible:

import { FlatList } from "react-native-gesture-handler";

<FlatList
      onGestureEvent={() => console.log("onGestureEvent")}
      onHandlerStateChange={() => console.log("onHandlerStateChange")}
      keyExtractor={keyExtractor}
      data={data}
      renderItem={renderItem}
    />

The truth is neither onGestureEvent or onHandlerStateChange are called as you scroll.

I’m using latest version of react-native-gesture-handler (v1.6.1) and this is my stack:

    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
      Yarn: 1.22.4 - ~/.nvm/versions/node/v12.14.1/bin/yarn
      npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.6 AI-192.7142.36.36.6392135
      Xcode: 11.5/11E608c - /usr/bin/xcodebuild
    npmPackages:
      expo: ~37.0.3 => 37.0.12 
      react: ~16.9.0 => 16.9.0 
      react-dom: ~16.9.0 => 16.9.0 
      react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 
      react-native-web: ~0.11.7 => 0.11.7 
    npmGlobalPackages:
      expo-cli: 3.21.12

[neiker]

To anyone reading this:

You can wrap a FlatList (imported from react-native) using PanGestureHandler as described here: https://github.com/software-mansion/react-native-gesture-handler/issues/492

import { FlatList } from "react-native";
import {
  PanGestureHandler,
  NativeViewGestureHandler,
} from "react-native-gesture-handler";

<PanGestureHandler
  ref={panRef}
  simultaneousHandlers={listRef}
  onGestureEvent={gestureHandler}
>
  <NativeViewGestureHandler ref={listRef} simultaneousHandlers={panRef}>
    <FlatList
      keyExtractor={keyExtractor}
      data={data}
      renderItem={renderItem}
    />
  </NativeViewGestureHandler>
</PanGestureHandler>

But, this issue stills valid. Types are wrong, FlatList by react-native-gesture-handler don’t implements either onHandlerStateChange nor onGestureEvent.

[ArtemKosiakevych]

To anyone reading this:

You can wrap a FlatList (imported from react-native) using PanGestureHandler as described here: #492

import { FlatList } from "react-native";
import {
  PanGestureHandler,
  NativeViewGestureHandler,
} from "react-native-gesture-handler";

<PanGestureHandler
  ref={panRef}
  simultaneousHandlers={listRef}
  onGestureEvent={gestureHandler}
>
  <NativeViewGestureHandler ref={listRef} simultaneousHandlers={panRef}>
    <FlatList
      keyExtractor={keyExtractor}
      data={data}
      renderItem={renderItem}
    />
  </NativeViewGestureHandler>
</PanGestureHandler>

But, this issue stills valid. Types are wrong, FlatList by react-native-gesture-handler don’t implements either onHandlerStateChange nor onGestureEvent.

Note that FlatList must be a child of NativeViewGestureHandler otherwise, it won’t work