[v4] | [v2] BottomSheet not working properly with BottomSheet scrollable component

[magrinj]

Bug

When I put BottomSheet scrollable component inside a BottomSheet the scroll doesn't work at all on the first snapPoint.

https://user-images.githubusercontent.com/3551795/176205976-82178377-0c4e-4a58-8286-c58dc5cad606.mov

Environment info

Library	Version
@gorhom/bottom-sheet	4.3.2
react-native	0.68.2
react-native-reanimated	2.8.0
react-native-gesture-handler	2.2.1

Steps To Reproduce

Just by using the example repo, all the scrollable are not working on the first snapPoint. I saw that using FlatList from react-native-gesture-handler si recommended on Android. Using it seems to fix the issue, but I want to use the BottomSheetFlatList to get a proper behaviour, and when user drag on firstSnap point he can drag to the next snapPoint without being blocked.

Reproducible sample code

Example repository.

[qaws5503]

I'm using BottomSheetFlatList, and I encounter this problem too. I've test it on both real android device and simulate iOS device, android works but on iOS it has the same problem as you mentioned.

[mounirkanane]

Same issue here.

[fjckls]

Same here - scrolling doesn't work with BottomSheetFlatList in first snap point. Tested on iOS.

[sdacunha]

After upgrading Expo to SDK46, I see this issue as well. Scrolling does not allow the bottom sheet to expand or collapse. Using BottomSheetScrollView

[7maucdn]

Same issue here. Can't scroll down List to close the BottomSheet

[eeynard]

Hey guys ! I also have the same kind of problem. I think it's a concurrency problem between the scroll event and the gesture event. In fact I achieved to make the gesture event work by starting my gesture horizontally and then move it vertically without lifting my finger. Not acceptable for the user of course but it might be a clue !

I'm not really familiar with react-native-gesture-handler but shouldn't the ScrollView from BottomSheetScrollView be imported from react-native-gesture-handler instead ? 🤷🏻

expo: ^46.0.0 @gorhom/bottom-sheet: ^4.4.3 react-native-gesture-handler: ~2.5.0 react-native: 0.69.3 react-native-reanimated: ~2.9.1

[AnandKuhar1100]

I have similar issue. Previously I was using BottomSheetFlatList and was encountering same gesture problems. Then I use FlatList from 'react-native-gesture-handler' and it's working fine for me. FlatList scroll is working for all snap-points

[magrinj]

@AnandKuhar1100 FlatList from react-native-gesture-handler could be a temporary solution, but it's not the correct behavior as the normal behavior with BottomSheetFlatList is that the scroll is intercepted to drag the BottomSheet until you're at your last snap-point.

[magrinj]

Hey guys ! I also have the same kind of problem. I think it's a concurrency problem between the scroll event and the gesture event. In fact I achieved to make the gesture event work by starting my gesture horizontally and then move it vertically without lifting my finger. Not acceptable for the user of course but it might be a clue !

I'm not really familiar with react-native-gesture-handler but shouldn't the ScrollView from BottomSheetScrollView be imported from react-native-gesture-handler instead ? 🤷🏻

expo: ^46.0.0 @gorhom/bottom-sheet: ^4.4.3 react-native-gesture-handler: ~2.5.0 react-native: 0.69.3 react-native-reanimated: ~2.9.1

I've just try patching the library with your suggestion and it doesn't fix the issue, but thanks for pointing that it works when you start the gesture horizontally, it's a good start !

[Svarto]

Same issue here, hope we can find a solution!

[pixelsomatic]

Same issue here. Has anyone been able to solve it yet?

[magrinj]

@pixelsomatic Don't know if you're on the last release of this library, it seems to be fixed now for me since 4.4.4 🎉

[pixelsomatic]

@pixelsomatic Don't know if you're on the last release of this library, it seems to be fixed now for me since 4.4.4 🎉

I upgraded and really works, thanks!

[naytun]

I found the solution:

import { GestureHandlerRootView } from 'react-native-gesture-handler'
...
return (
  <GestureHandlerRootView>
   ... your component here
  </GestureHandlerRootView>
)