[v4] BottomSheetScrollView does not scroll as expected

[lachenmayer]

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:

1. iOS, Expo 44 & Expo 45 - same behavior
2. Android, Expo 44 - can not scroll at all
3. Android, Expo 45 - crashes with [v4] __reanimatedWorkletInit is not a function in expo 45 snack #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

RPReplay_Final1655375235.MP4

In this video, I am doing the following:

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

Android

22-06-16-11-26-34.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

[grgmgd]

Facing same issue with SDK 45 on iOS, backdrop presses pass through as well. Probably something related to RNGH

[IagoR0cha]

Same problem here on iOS with SDK 45

[mounirkanane]

Same problem here, when it's expanded scrolling works fine, but when in "50%" mode the scrolling doesn't work. Any solution?

[grgmgd]

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.

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

[danshilm]

Unstale

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

[AndreiCalazans]

Not sure if directly related to OP but react-native-gesture-handler 2.5.0 seems to have a regression software-mansion/react-native-gesture-handler#2160

[AndreiCalazans]

I was having similar issue with @gorhom/bottom-sheet and we just didn't have GestureHandlerRootView properly wrapping the root of the app case someone has similar issue. - https://docs.swmansion.com/react-native-gesture-handler/docs/installation/#js

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