[Bug]: Changing enableContentPanningGesture remounts content

[joeporpeglia]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android, Web

What happened?

In v4 I was using enableContentPanningGesture to disable the swipe down gesture while users are in "full screen mode". In https://github.com/gorhom/react-native-bottom-sheet/commit/2962a2d5326e517a48fe11d0e0d762beacca890d the render logic was updated to swap parent components depending on the value of that prop.

Current workaround: Replace enableContentPanningGesture={false} with activeOffsetY={999999}

Reproduction steps

• Open the logs view in the repro
• Click "Change panning gesture"
• You should see a log indicating that the Test component re-mounted

Reproduction sample

https://snack.expo.dev/@playbackjoe/bottom-sheet---issue-reproduction-template

Relevant log output

No response

[buynao]

same issue

[dlee]

Unfortunately, the activeOffsetY={999999} workaround won't work for me since I'm trying to disable the swipe-down gestures once a user starts dragging a child slider, but starting the drag already activates the Bottom Sheet gesture.

EDIT: Actually, the activeOffsetY workaround works in Android if you also provide failOffsetY={0}. However, it doesn't work in iOS.

It seems like this was meant to be the workaround, but it doesn't work: https://gorhom.dev/react-native-bottom-sheet/troubleshooting#my-component-gesture-interaction-gets-conflicted-with-bottom-sheet-interactions-

[josegiufrida]

Same issue here.

It's due to this new code:

// BottomSheet.tsx

const DraggableView = enableContentPanningGesture
    ? BottomSheetDraggableView
    : Animated.View;

<DraggableView
    key="BottomSheetRootDraggableView"
    style={contentContainerStyle}
>
    {children}
</DraggableView>

I've been looking for a solution but without success so far. This is the commit if it helps anyone: https://github.com/gorhom/react-native-bottom-sheet/commit/2962a2d5326e517a48fe11d0e0d762beacca890d#diff-07b237af01ea6130369196bdab6d5e7d33715f3750c7f220768848083c3a876aR36

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[joeporpeglia]

not stale

[alex-fournier]

I can share the workaround I use until this bug is fixed.

As I can't toggle enableContentPanningGesture dynamically, I use a "scrim" GestureDetector which I enable or not depending on my flag. This gesture detector capture a pan gesture before BottomSheet.

Something like:

const scrimGesture = useMemo(() => Gesture.Pan().enabled(myFlag), [myFlag])

return (
  <BottomSheet>
    <GestureDetector gesture={scrimGesture}>
      {children}
    </GestureDetector>
  </BottomSheet>
)

[geovie]

https://github.com/gorhom/react-native-bottom-sheet/pull/2160 might solve the remount of the content, please give it a try.

[gomezger]

any news about that @joeporpeglia ?