search

gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀
https://gorhom.dev/react-native-bottom-sheet/
MIT License
7.04k stars 768 forks source link

[v4] Using BottomSheetFlatList blocks horizontal swipe gestures #1300

Closed aike19115 closed 1 year ago

aike19115 commented 1 year ago

First of all I would like to thank @gorhom for creating this module, making it open source and maintaining it! 🙏

ps: this issue is only on iOS devices

Bug

See the video for a demo of the issue: https://user-images.githubusercontent.com/17004429/220671117-e0131d93-7169-429b-b4d6-88f7aac5b813.mov

When using the BottomSheetFlatList component to render a list inside the bottom sheet the horizontal swipe gestures are "blocked". In combination with using a TabView this results in the issue that swipe to left/right doesn't work.

Environment info

Library Version
@gorhom/bottom-sheet 4.4.5
expo 47.0.12
react-native 0.70.5
react-native-gesture-handler 2.8.0
react-native-pager-view 6.0.1
react-native-reanimated 2.12.0
react-native-tab-view 3.5.0

Steps To Reproduce

See the GitHub repo with a minimal, reproducible example: https://github.com/aikewoody/example-react-native-bottom-sheet

Reproducible sample code

See the snack: https://snack.expo.dev/@aikewoody/example-react-native-bottom-sheet

SKempin commented 1 year ago

@aikewoody Following this as having a similar issue with integrating rn-range-slider with the sheet modal.

Precise horizontal movements are required to drag the range slider thumbs, otherwise the bottom sheet drags and the range slider doesn't function. Ideally the bottom sheet should be lockable from being draggable whilst pressing the range slider., but that doesn't appear to be part of the current bottom sheet API?

doug-shontz commented 1 year ago

I can actually recreate this as well, but I'm seeing it on Android. I am using ExpoAV and am playing a video that is in a BottomSheet view (so that I can do a "YouTube" like mini-player). The seek bar on the video "does not work" because the BottomSheet is "catching it" somehow. The problem isn't as prevalent on iOS for me...it does happen sometimes...but it is consistently there on Android to the degree that users have reported the Android player as "broken".

When I maximize the Android player (fullscreen), the issue goes away because the video is now an overlay on top of the app which overrides the BottomSheet. If I get lucky, I can "tap" on the seek bar at a certain point and that works..but that's inconsistent.

I have tried simple things like zIndex, but that doesn't work. I get the intricacies of the problem..what's a horizontal movement vs what is a vertical movement and when to "lock" and when to not....

My only thought would be "is it possible for a view to be 'on top of' the bottom sheet such that it 'wins'" (which is why I was trying zIndex. Open to suggestions....

SKempin commented 1 year ago

@doug-shontz adding enableContentPanningGesture={false} to BottomSheetModal has fixed this for me now. Just be aware of https://github.com/gorhom/react-native-bottom-sheet/issues/765

@aikewoody

doug-shontz commented 1 year ago

@SKempin Thanks for that! That did indeed solve our issue!

github-actions[bot] commented 1 year ago

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.

github-actions[bot] commented 1 year ago

This issue was closed because it has been stalled for 5 days with no activity.

Spharian commented 1 year ago

The bug is still there 🥲

SKempin commented 1 year ago

@Spharian did you try this https://github.com/gorhom/react-native-bottom-sheet/issues/1300#issuecomment-1483080021 ?

Spharian commented 1 year ago

@Spharian did you try this #1300 (comment) ?

Yes, did solve the issue but makes the scroll buggy as it is mentionned here: https://github.com/gorhom/react-native-bottom-sheet/issues/765

So it's not a viable solution :(

monireamini commented 8 months ago

I did this patch and it works fine:

index 377b2d5..19a8629 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
@@ -76,7 +76,7 @@ const BottomSheetDraggableViewComponent = ({
       onGestureEvent={gestureHandler}
       activeOffsetX={activeOffsetX}
       activeOffsetY={activeOffsetY}
-      failOffsetX={failOffsetX}
+      failOffsetX={0}
       failOffsetY={failOffsetY}
     >
       <Animated.View style={style} {...rest}>
Spharian commented 8 months ago

I did this patch and it works fine:

index 377b2d5..19a8629 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
@@ -76,7 +76,7 @@ const BottomSheetDraggableViewComponent = ({
       onGestureEvent={gestureHandler}
       activeOffsetX={activeOffsetX}
       activeOffsetY={activeOffsetY}
-      failOffsetX={failOffsetX}
+      failOffsetX={0}
       failOffsetY={failOffsetY}
     >
       <Animated.View style={style} {...rest}>

Hmm is that merged in the core package? Made the change locally and it's still causing problems.

disolaterX commented 7 months ago

I did this patch and it works fine:


index 377b2d5..19a8629 100644

--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx

+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx

@@ -76,7 +76,7 @@ const BottomSheetDraggableViewComponent = ({

       onGestureEvent={gestureHandler}

       activeOffsetX={activeOffsetX}

       activeOffsetY={activeOffsetY}

-      failOffsetX={failOffsetX}

+      failOffsetX={0}

       failOffsetY={failOffsetY}

     >

       <Animated.View style={style} {...rest}>

Hmm is that merged in the core package? Made the change locally and it's still causing problems.

did something work? every other suggestion makes it a very buggy experience, not at all comparable to a native one that I saw a app using.

monireamini commented 7 months ago

I did this patch and it works fine:

index 377b2d5..19a8629 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
@@ -76,7 +76,7 @@ const BottomSheetDraggableViewComponent = ({
       onGestureEvent={gestureHandler}
       activeOffsetX={activeOffsetX}
       activeOffsetY={activeOffsetY}
-      failOffsetX={failOffsetX}
+      failOffsetX={0}
       failOffsetY={failOffsetY}
     >
       <Animated.View style={style} {...rest}>

Hmm is that merged in the core package? Made the change locally and it's still causing problems.

No, It's not merged in core package, I used patch-package for making this patch.

jamcry commented 3 months ago

I did this patch and it works fine:

index 377b2d5..19a8629 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
@@ -76,7 +76,7 @@ const BottomSheetDraggableViewComponent = ({
       onGestureEvent={gestureHandler}
       activeOffsetX={activeOffsetX}
       activeOffsetY={activeOffsetY}
-      failOffsetX={failOffsetX}
+      failOffsetX={0}
       failOffsetY={failOffsetY}
     >
       <Animated.View style={style} {...rest}>

Thanks, it solved for me! Actually I didn't even need to patch the package, I am using ^v4 and this can be passed as a prop to BottomSheet component:

  <BottomSheet
      failOffsetX={0}
      // ...

Now both "swipe down to close" and horizontal navigation gestures work well.