Receiving simultaneous ScrollView and GestureHandler events

Is it possible to receive events for a handler, e.g. PanGestureHandler, and a ScrollView at the same time? I’m finding that a ScrollView fully consumes a touch event, even with simultaneousHandlers set, so that a gesture handler that contains the ScrollView never receives the touch as long as the ScrollView is enabled.

[damikdk]

There is no documentation about NativeViewGestureHandler on official site, but the only mention of it says that you can use FlatList from react-native-gesture-handler with simultaneousHandlers instead of wrapping it inside NativeViewGestureHandler.

But you cannot

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

// This handler will only fire if FlatList does not detect scroll
<PanGestureHandler
  ref={panRef}
  simultaneousHandlers={listRef}
>
  <FlatList
    ref={listRef}
    simultaneousHandlers={panRef}
    ...
  />
</PanGestureHandler>

So you still should use FlatListONLY from react-native and wrap it in NativeViewGestureHandler:

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

<PanGestureHandler
  ref={panRef}
  simultaneousHandlers={listRef}
>
  <NativeViewGestureHandler
    ref={listRef}
    simultaneousHandlers={panRef}
  />
    <FlatList/>
  </NativeViewGestureHandler>
</PanGestureHandler>

There is no FlatList in current documentation from this repo. But it was added in this PR. IDK

[yzalvov]

@damikdk thanks, your research helped me.

I’d add one caveat though. For anybody planning to use an Animated.event for a PanGestureHandler onHandlerStateChange for example. In that case one must wrap a NativeViewGestureHandler inside an Animated.View. Otherwise the app will be failing with an error Nesting touch handlers with native animated driver is not supported yet.

Credits: #71

Just in case, here’s a full example:

const ScrollContainer = styled(Animated.ScrollView).attrs({
  scrollEventThrottle: 16,
  contentContainerStyle: { paddingBottom: 40 },
})``


const Container = React.forwardRef((props, ref) => {
  const handlerRef = useRef()
  const { onScroll, onHandlerStateChange, children } = props
  
return <PanGestureHandler {...{onHandlerStateChange}} simultaneousHandlers={handlerRef}>

    <Animated.View>

      <NativeViewGestureHandler ref={handlerRef}>
        <ScrollContainer ref={ref} {...{onScroll}}>
          {children}
        </ScrollContainer>
      </NativeViewGestureHandler>

    </Animated.View>

  </PanGestureHandler>
})