[v4] BottomSheetScrollView does not scroll as expected

Bug

Hi Mo, sorry for the vague issue title, but I’ve tried a bunch of platform/version combinations and they produce different behavior.

The repro has the simplest possible setup:

<View style={styles.container}>
  <BottomSheet snapPoints={['50%', '80%']}>
    <BottomSheetScrollView style={{ flex: 1, backgroundColor: 'red' }}>
      <View style={{ height: 100, backgroundColor: 'blue' }} />
      <View style={{ height: 100, backgroundColor: 'green' }} />
      // ...etc, these views are repeated a bunch of times

I tested this separately on:

iOS, Expo 44 & Expo 45 - same behavior
Android, Expo 44 - can not scroll at all
Android, Expo 45 - crashes with #971

Environment info

Expo 45:

Library	Version
@gorhom/bottom-sheet	4.3.2
react-native	(whatever comes with Expo 45)
react-native-reanimated	2.8.0
react-native-gesture-handler	2.2.1

Expo 44:

Library	Version
@gorhom/bottom-sheet	4.3.2
react-native	(whatever comes with Expo 44)
react-native-reanimated	2.3.1
react-native-gesture-handler	2.1.0

Steps To Reproduce

iOS

https://user-images.githubusercontent.com/38614/174055057-ec112ac1-3fe2-4271-b32f-4b6e16a29c23.MP4

In this video, I am doing the following:

Swiping up/down on the scroll view - nothing happens. ❌ I expect the bottom sheet to expand when swiping up.
Swiping up on the handle view (white bg) - this lets me expand the bottom sheet. ✅
Scrolling the scroll view down - this works while expanded. ✅
Scrolling the scroll view up. ❌ I expect to not see the red view, but the bottom sheet instead snapping to the smaller snap point.
Swiping down on the handle works, this has the same behavior as in state 1.

Android

https://user-images.githubusercontent.com/38614/174056171-1f56c683-7e3a-4815-a9b4-8aa9a8bf8ba4.mp4

You can see the touches on this, this unfortunately does not work at all.

Reproducible sample code

https://snack.expo.dev/@lachenmayer/great-croissant

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:11 (2 by maintainers)

Top GitHub Comments

1reaction

grgmgdcommented, Jul 8, 2022

I found out it only happens on “Expo Go”. Building the app using eas and testing on the final version or even a custom dev client resolves the issue for me.

0reactions

github-actions[bot]commented, Oct 17, 2022

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

Top Results From Across the Web

How to Fix Mouse Scroll Not Working on Windows 11/10

The first thing you should do when scrolling stops working is to make sure your mouse is correctly plugged into your PC. A...

Scroll through Flutter Bottom Sheet - Stack Overflow

My problem is that if I have more than 6 ListTile s, some are cut off and not displayed. Is there a way...

Troubleshooting | React Native Bottom Sheet - GitHub Pages

Adding horizontal FlatList or ScrollView is not working properly on Android. Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler ...

The scroll bar continues to scroll after you release the mouse ...

If another message loop is started during scrolling, the WM_LBUTTONUP is retrieved by that message loop, and because an application does not have...

7 Best Ways to Fix Mouse Wheel Scrolls Up When Scrolling ...

Step 4: If that also doesn't fix the issue, right-click on your mouse name again and select Uninstall device. Restart computer. Mouse scroll ......