[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 2962a2d 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:
2962a2d#diff-07b237af01ea6130369196bdab6d5e7d33715f3750c7f220768848083c3a876aR36

[github-actions]

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]

#2160 might solve the remount of the content, please give it a try.