React-native-gesture-handler: onGestureEvent not working on FlatList

Created on 29 Jun 2020 · 3Comments · Source: software-mansion/react-native-gesture-handler

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:

Expo CLI 3.21.12 environment info: 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

To verify

Source

neiker

Most helpful comment

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.

neiker on 19 Jul 2020

👍3

All 3 comments

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.

neiker on 19 Jul 2020

👍3

Did you try passing RNGH ScrollView via renderScrollComponent prop?