react-native-bottom-sheet: [v4] | BottomSheetScrollView doesn't drag the sheet up or down (iOS Only)
Bug
iOS ONLY
I have created a bottom sheet and inside of it I have put BottomSheetScrollView because I have a list of Item that I want the user to scroll up and down when the sheet is fully opened. Everything was good on Expo Go App until I upgraded my Expo Go to the latest version 2.23.2. After upgrading the bottomSheetScrollView stopped responding to the Pan Gesture of the BottomSheet as it was before.
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | 4.1.5 |
react-native | 0.64.3 |
react-native-reanimated | 2.3.0 |
react-native-gesture-handler | 2.1.0 |
expo | 44 |
Expo Go | 2.23.2 |
Steps To Reproduce
- Add a BottomSheet as your main component.
- add snapPoints params. e.g. [250, 600]
- inside of BottomSheet Component, put BottomSheetScrollView component with no styling
- Set the vertical and horizontal scroll indicators to false in the BottomSheetScrollView component
- add contents/list inside of BottomSheetScrollView components.
- put your finger on the content and try to drag up or drag down.
Describe what you expected to happen:
- When I put my finger on the inner content the sheet should be dragged up until it reaches the maximum snap point, and then the scroll view scrolling gets enable so I can be able to scroll the bottom of the list
Reproducible sample code
App.tsx
<BottomSheet ref={bottomSheetRef} index={1} snapPoints={snapPoints} onChange={handleSheetChanges}>
<BottomSheetScrollView showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false}>
{
Array(101)
.fill(1, 0, 101)
.map((val, index)=> <Content />)
}
</BottomSheetScrollView>
</BottomSheet>
Content.tsx
const InnerSheet = () => (
<View>
<Text style={styles.title}>
The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by
everyone.
</Text>
<Button
title="Press me"
onPress={() => Alert.alert('Simple Button pressed')}
/>
</View>
);
const styles = StyleSheet.create({
title: {
textAlign: 'center',
marginVertical: 8,
}
});
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 5
- Comments: 46
Update: Different similar issue but on Android
I was also having this exact problem, my
BottomSheetModal
s andBottomSheetScrollView
s were not responding to touch events on Android.Root Cause
react-native-gesture-handler
requires a wrapper around the root view to function. In v1 of the library, this was done on the native side, and expo did this for you. In v2 of the library, you must use theGestureHandlerRootView
in your app manually. Upgrading to SDK 44 of expo removes the native RNGH setup.Fix
The
GestureHandlerRootView
must be applied as high as possible in your app’s component tree.In my case, I had my
BottomSheetModalProvider
outside theGestureHandlerRootView
, and swapping these two components fixed the issue for me!Before:
After:
@gorhom does it make sense to update the docs to say that BottomSheetModalProvider must be inside GestureHandlerRootView?
Still an issue for me on SDK 44 in managed workflow (iOS). Works fine on Android though.
Ah, iOS. I can reproduce the issue now! Interestingly enough, it doesn’t happen on my ejected expo 44 project… I’ll take a closer look at it later today 😊
In them meantime, @paranoia5 can you update the issue to say that the error happens on iOS (only)?
it was enough for me to add “GestureHandlerRootView” in app js Before: App.js
After: App.js
and my bottom sheet component
Hi, any updates??
I still can’t seem to figure out how to have the BottomSheet go up to the final snapping point and then enable BottomSheetScrollView scrolling. I need to manually drag the sheet into the final snap point and then scrolling is enabled. Followed every suggestion, still nothing. My app heavily depends on this feature and this even happens in production mode. Android works just fine.
I’m on Expo SDK 45
This issue happen only on iOS on new Expo GO app with managed workflow. Affected all scrollable components that was imported from react-native-bottom-sheet lib. On iOS production build and on Android there is no issues.
Issue still present
+1
@Yonom any progress so far? 😃 Seem it is hard to fix right 😦
@Yonom @aozfen @paranoia5
Still have the same issue with
<BottomSheetScrollView>
as @paranoia5 has 😕Is this still being looked into or is there at least a known workaround? Still have the same issue on ios on expo (v44) maintained repo.
After a while of struggling I implemented some of the solutions that were mentioned here including making sure if I had the correct dependencies installed. What seems to have given me the desired results in the following code returned in my App. Note that the <BottomSheetModalProvider> is wrapped inside of a <GestureHandlerRootView>. I hope this makes sense to you, let me know if you need further information.
App.js
same here +1
@Yonom @aozfen have you tried to put the contents inside of
<BottomSheetScrollView>
component?BottomSheetModalProvider
didn’t solve the problem.Does not work for me (BottomSheet). @aozfen How do you do it?
Hello guys, any update regarding this issue?
Just to confirm, it is still happening on Expo Go IOS (on android it works just fine).
This issue is maybe more clear to describe the problem https://github.com/gorhom/react-native-bottom-sheet/issues/1008
Also have this problem on EXPO 43
This issue seems to only be when using the Expo Go client. Once a built a production version of the app (using Expo managed workflow), it works correctly.
sure @Yonom the issue has been updated. I personally haven’t tested on android. I’ve tested only on iOS.