[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

1. Add a BottomSheet as your main component.
2. add snapPoints params. e.g. [250, 600]
3. inside of BottomSheet Component, put BottomSheetScrollView component with no styling
4. Set the vertical and horizontal scroll indicators to false in the BottomSheetScrollView component
5. add contents/list inside of BottomSheetScrollView components.
6. put your finger on the content and try to drag up or drag down.

Describe what you expected to happen:

1. 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,
  }
});

[Yonom]

Update: Different similar issue but on Android

I was also having this exact problem, my BottomSheetModals and BottomSheetScrollViews 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 the GestureHandlerRootView 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 the GestureHandlerRootView, and swapping these two components fixed the issue for me!

Before:

<BottomSheetModalProvider>
  <GestureHandlerRootView style={{ flex: 1 }}>
    <MainNavigation />
  </GestureHandlerRootView>
</BottomSheetModalProvider>

After:

<GestureHandlerRootView style={{ flex: 1 }}>
  <BottomSheetModalProvider>
    <MainNavigation />
  </BottomSheetModalProvider>
</GestureHandlerRootView>

@gorhom does it make sense to update the docs to say that BottomSheetModalProvider must be inside GestureHandlerRootView?

[RopFoo]

Still an issue for me on SDK 44 in managed workflow (iOS). Works fine on Android though.