[v4] | BottomSheetScrollView doesn't drag the sheet up or down (iOS Only)

[paranoia5]

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?

[aozfen]

@Yonom yes, it worked for me ✅

[BerkeAras]

Does not work for me (BottomSheet). @aozfen How do you do it?

[aozfen]

it was enough for me to add "GestureHandlerRootView" in app js Before: App.js

const App: () => React$Node = () => {
  return (
      <BottomSheetModalProvider>
        <StatusBar barStyle="dark-content" backgroundColor={colors.light.initStatusBarBgColor} />
        <Start />
      </BottomSheetModalProvider>
  );
};

After: App.js

import { GestureHandlerRootView } from 'react-native-gesture-handler'; //-->add
const App: () => React$Node = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>
        <StatusBar barStyle="dark-content" backgroundColor={colors.light.initStatusBarBgColor} />
        <Start />
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

and my bottom sheet component

import React, { useCallback, useMemo, useRef } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import {
    BottomSheetModal,
} from '@gorhom/bottom-sheet';


const BottomSheets = () => {
    // ref
    const bottomSheetModalRef = useRef(null);

    // variables
    const snapPoints = useMemo(() => ['25%', '50%'], []);

    // callbacks
    const handlePresentModalPress = useCallback(() => {
        bottomSheetModalRef.current?.present();
    }, []);

    const handleSheetChanges = useCallback((index) => {
        console.log('handleSheetChanges', index);
    }, []);

    return <>
        <Button
            onPress={handlePresentModalPress}
            title="Present Modal"
            color="black"
        />
        <BottomSheetModal
            enableOverDrag={true}
            ref={bottomSheetModalRef}
            snapPoints={snapPoints}
            onChange={handleSheetChanges}
        >
            <View style={styles.contentContainer}>
                <Text>Awesome 🎉</Text>
            </View>
        </BottomSheetModal>
    </>
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 24,
        justifyContent: 'center',
        backgroundColor: 'grey',
    },
    contentContainer: {
        flex: 1,
        alignItems: 'center',
    },
});


export default BottomSheets;

[paranoia5]

@Yonom @aozfen have you tried to put the contents inside of <BottomSheetScrollView> component? BottomSheetModalProvider didn't solve the problem.

[Lurtt]

@Yonom @aozfen @paranoia5

Still have the same issue with <BottomSheetScrollView> as @paranoia5 has :/

[Yonom]

@Lurtt do you have a GestureHandlerRootView around your app's entry point?

If no: Follow these instructions to add a GestureHandlerRootView: https://docs.swmansion.com/react-native-gesture-handler/docs/#js

If yes: I cannot reproduce the issue you're having, so I'm gonna ask you to create a minimal reproducible repo so we can look into it

[paranoia5]

@Yonom make sure you upgrade Expo Go to the latest version 2.23.2 and you will be able to reproduce the issue.

[Lurtt]

@Yonom Exactly as @paranoia5 wrote...it happens when you upgrade expo go to the latest and use BottomSheet with BottomSheetScrollView

I've tried the BottomSheetScrollView example in doc with latest expo go and it doesn't work at all :/

[Yonom]

The example in the docs does not use a GestureHandlerRootView. You need a GestureHandlerRootView to make scrolling work.

[Lurtt]

@Yonom I used the < GestureHandlerRootView /> and it doesn't help the problem is still present

[Yonom]

It works for me. I copied the example in the docs, had to fix a react issue, added GestureHandlerRootView, and ran it on my phone running Android 11 on Expo Go 2.23.2.

Look, we can go back and forth on how it works for me and it doesn't work for you, but we won't get anywhere. Can you make a small repository with the example in the docs and GestureHandlerRootView set up? Then I can look at it, reproduce the issue, and figure out why it doesn't work.

[Lurtt]

I've tested android and yeah you are right there is no issue but on iOS it doesn't work :( also same problem on simulator with latest expo go

[Yonom]

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)?

[paranoia5]

sure @Yonom the issue has been updated. I personally haven't tested on android. I've tested only on iOS.

[Lurtt]

@Yonom any progress so far? :) Seem it is hard to fix right :(

[fknop]

I can confirm that the issue is fixed with SDK 44 built with EAS, I have not tried with the managed expo build.

[ropfoo]

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

[branaust]

+1, am experiencing some very strange behavior (iOS only). Bottom sheet does is not swipable on first render, after refresh works on sim, physical device it does not work... Have a feeling this has more to do with gesture handler. am on v1.10.2. anyone have any suggestions?

[semoal]

Confirmed that this is an actual issue on iOS running with Expo Go 2.23.2 , on Android is not happening.

Probably the issue is inside Expo go and not in this library itself.

Found a related issue: https://github.com/expo/expo/issues/15681

[TheBestMoshe]

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.

[branaust]

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.

This problem was actually occurring on a production build of the app. We were able to fix the problem by upgrading to Expo 44 and wrapping the app in GestureHandlerAtRoot imported from react-native-gesture-handler

[TheBestMoshe]

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.

We are still using Expo 42.

[sina3p2p]

same here +1

[artanisdesign]

+1

[absolon2]

+1

[Adil-U]

Also have this problem on EXPO 43

[eprice122]

+1

[PeroyNel]

Thank you, I had success by wrapping my entire application in a <GestureHandlerRootView> component. My modal is now scrollable and collapsible.

[paranoia5]

Thank you, I had success by wrapping my entire application in a component. My modal is now scrollable and collapsible.

Could you please share with us more details through snacks or sample code so we can test out?