How do I use Gesture.Pan when scrolling a FlashList?

[YellaGoya]

The code below makes it possible to detect the Y-axis pan gesture when scrolling a FlashList and perform native scrolling at the same time, but it's not as fast as when I previously used Animated.FlatList inside the GestureDetector.

Is it possible to fire both native scrolling and Y-axis pan gesture events on a FlashList inside a GestureDetector at the same time?

Simply wrapping it in a GestureDetector would prevent the list from scrolling on its own.

      <PanGestureHandler {...gestureHandlers} ref={panRef}>
        <FlashList
          overrideProps={{
            simultaneousHandlers: panRef,
          }}
          renderScrollComponent={(props) => <ScrollView {...props} />}

          ...
        />
      </PanGestureHandler>

[m-bert]

Hi @YellaGoya! Your code uses old API which is deprecated 😞

Simply wrapping it in a GestureDetector would prevent the list from scrolling on its own.

Have you tried marking handlers as simultaneous with FlatList?

[YellaGoya]

Thank you for your response.

I would appreciate if you could tell me how to use the latest API to enable FlashList scrolling while using the onUpdate of the y-axis Pan gesture.

[YellaGoya]

You are a shepherd, an angel who came to me.
Thanks to your advice, I am able to do panY and native scroll at the same time.

I removed Gesture.Native() and just put in Gesture.Pan() and it worked, so I removed it for now, but I'm not sure if that's the right thing to do.

I leave the code for any other lost lambs out there.

const ExplorerScreen = () => {
  const panRef = useRef();
  const panGesture = Gesture.Pan()
    .withRef(panRef)
    .onUpdate((e) => {
      console.log(e.absoluteY);
    });

  return (
    <>
      <GestureDetector gesture={panGesture}>
        <FlashList
          data={test}
          keyExtractor={(item) => item.id}
          renderItem={Render}
          estimatedItemSize={50}
          renderScrollComponent={(props) => (
            <ScrollView {...props} simultaneousHandlers={panRef} />
          )}
        />
      </GestureDetector>
    </>
  );
};