Bottom Sheet using PanGesture with nested ScrollView

[Pietro-Putelli]

Hi, I'm working on a classic bottom sheet component containing scrollview, and I want to achieve the panGesture dismiss modal over the scrollview, here's my code:

  const onScroll = useCallback(
    ({
      nativeEvent: {
        contentOffset: { y },
      },
    }) => {
      if (y <= 0) {
        setWaitFor(true);
      }
    },
    []
  );

  const onGestureEvent = useAnimatedGestureHandler({
    onActive: ({ translationY, velocityY }) => {
      translateY.value = translationY / 1.5;
      runOnJS(Keyboard.dismiss)();

      runOnJS(setWaitFor)(velocityY > 0);

<PanGestureHandler ref={panRef}>
  <Animated.View>
    <ScrollView onScroll={onScroll} waitFor={waitFor ? panRef : undefined}>

    </ScrollView>
  </Animated.View>
</PanGestureHandler>

Now it works fine, but when I scroll up and waitFor is false, the PanGestureHandler is triggered and only when the gesture is performed the second time it actually waitFor scroll view, it's obvious because the waitFor is set (in onActive) when the pan gesture is performed.

It is a common logic in application, so is there an easiest way to achieve this?

Here question I've referred to, but can't get the solution: #420

I've also try to wrap ScrollView inside NativeViewGestureHandler but I haven't been able to understand what actually do this component, and there's no there's no trace of it in official doc.

Thank you

[j-piasecki]

Hi! It's possible that the new API in Gesture Handler 2 with ManualGesture, manualActivation and touch events will be helpful with this. You could also use react-native-bottom-sheet that already implements this feature.

[Pietro-Putelli]

Thank you, but I'd like to use the old react native gesture handler, and yes I know that package but it doesn't fit my needs😬.

[j-piasecki]

In this case, I think the best option is something like the bottom sheet from the Example app, however it has some issues, especially on Android.

[vbylen]

@j-piasecki on iOS the bottom sheet example has issues too. Every time the bottom sheet is touched its scroll position gets reset.

[GeorgeHop]

So any success? Because I also trying to achieve something like that #2316 as many other people I think, also there you can find link on lib. where guys added to react-native-bottom-sheet scroll functionality but it looks over engineered... Also I can't find example for usecase like that in docs. If you have any info please share.
Also I found many other discussions related to this: #1667 , #2222 , #434 .

[GeorgeHop]

Refactored solution from GH example folder you can check it here: #2222

Also want to move it to reanimated.

[fredrickreuben]

How do we implement this in the new api