[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.

[gomezger]

any news about that @joeporpeglia ?

[ucheNkadiCode]

I was able to put together a minimal example that I was able to use to solve this issue.

My scenario is that I have a BottomSheet popup, then within the bottom sheet, I popup a bottom sheet modal that has deeper infromation. Both can be dismissed vertically. The Bottom sheet modal has information that can be rearranged, thus I use the react-native-draggable-flatlist.

This BottomSheetModal is actually within a regular BottomSheet as a parent. It took me forever to figure out I needed to add a backdropComponent in order to get the parent to no longer be swipeable. That was how I defeated the parent panGestures that were still active behind the BottomSheetModal for starters (as this bug describes, when trying to dynamically set enablepangestures to false, it was remounting the parent modal, thus remounting my underlying screen). Next, I have a complicated dual draggable flatlist using react-native-draggable-flatlist and had trouble with the competing pan gestures. This solves these issues.

Most of this is solved with activeOffset and a GestureDetector. Works on iOS, haven't tested on Android. Happy Coding!

  import React, { useRef, useState } from "react";                                                                                                                                                    
  import { Text, TouchableOpacity } from "react-native";                                                                                                                                                
  import { BottomSheetBackdrop, BottomSheetModal } from "@gorhom/bottom-sheet";                                                                                                                         
  import { Gesture, GestureDetector } from "react-native-gesture-handler";                                                                                                                              
  import {                                                                                                                                                                                              
    NestableDraggableFlatList,         
    NestableScrollContainer,
  } from "react-native-draggable-flatlist";

  const INITIAL_ITEMS = [
    { id: "1", title: "Bench Press" },
    { id: "2", title: "Squats" },
    { id: "3", title: "Deadlift" },
    { id: "4", title: "Overhead Press" },
    { id: "5", title: "Barbell Row" },
  ];

  function QueueSheet({ sheetRef }: { sheetRef: React.RefObject<BottomSheetModal | null> }) {
    const [items, setItems] = useState(INITIAL_ITEMS);
    const [isDragging, setIsDragging] = useState(false);

    // 1. Create a ref to link the list's gesture to the sheet
    const listGestureRef = useRef<any>(undefined);

    // 2. Create a Native gesture that shares touches with the sheet
    const nativeListGesture = Gesture.Native()
      .withRef(listGestureRef)
      .simultaneousWithExternalGesture(sheetRef as any);

    return (
      <BottomSheetModal
        ref={sheetRef}
        snapPoints={["50%", "85%"]}
        enablePanDownToClose
        // 3. High activeOffsetY while dragging = sheet pan gesture never activates
        //    Normal activeOffsetY otherwise = sheet scrolls/dismisses normally
        activeOffsetY={isDragging ? [-999, 999] : [-1, 1]}
        // 4. Tell the sheet about the list gesture
        simultaneousHandlers={listGestureRef}
        backdropComponent={(props) => (
          <BottomSheetBackdrop
            {...props}
            opacity={0.3}
            disappearsOnIndex={-1}
            appearsOnIndex={0}
          />
        )}
      >
        {/* 5. Wrap scrollable content in GestureDetector */}
        <GestureDetector gesture={nativeListGesture}>
          <NestableScrollContainer>
            <NestableDraggableFlatList
              data={items}
              keyExtractor={(item) => item.id}
              onDragBegin={() => setIsDragging(true)}
              onDragEnd={({ data }) => {
                setIsDragging(false);
                setItems(data);
              }}
              renderItem={({ item, drag }) => (
                <TouchableOpacity
                  onLongPress={drag}
                  style={{
                    padding: 16,
                    backgroundColor: "#fff",
                    borderBottomWidth: 1,
                    borderBottomColor: "#eee",
                  }}
                >
                  <Text style={{ fontSize: 16 }}>{item.title}</Text>
                </TouchableOpacity>
              )}
            />
             // .... I actually have another NestableDraggableFlatList in here but I ommited for brevity
          </NestableScrollContainer>
        </GestureDetector>
      </BottomSheetModal>
    );
  }

The key ideas in three bullets:

• activeOffsetY={isDragging ? [-999, 999] : [-1, 1]} — dynamically disables the sheet's pan gesture during a drag without swapping components (which would kill the touch session)
• Gesture.Native().simultaneousWithExternalGesture(sheetRef) — tells RNGH to let both the list and sheet observe the same touches simultaneously
• simultaneousHandlers={listGestureRef} on the sheet — the other half of the link, so the sheet knows about the list gesture too