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?

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

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;

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

return (
      <SafeAreaView style={styles.container}>
        <GestureHandlerRootView style={{flex: 1}}>
        <BottomSheetModalProvider>
            <FlatList
              keyExtractor={(item) => item.id}
              data={SAMPLE_DATA}
              renderItem={({ item }) => (
                <ListItem
                  name={item.name}
                  symbol={item.symbol}
                  currentPrice={item.current_price}
                  priceChange={item.price_change_percentage_7d_in_currency}
                  logoUrl={item.image}
                  onPress={() => openModal(item)}
                />
              )}
              ListHeaderComponent={<ListHeader />}
            />
              <View style={styles.bottomSheet}>
                <BottomSheetModal ref={bottomSheetModalRef} index={0} snapPoints={snapPoints} handleComponent={SheetHandle}>
                  { selectedCoinData ? (
                    <Chart
                      currentPrice={selectedCoinData.current_price}
                      logoUrl={selectedCoinData.image}
                      name={selectedCoinData.name}
                      symbol={selectedCoinData.symbol}
                      priceChange={selectedCoinData.price_change_percentage_7d_in_currency}
                      sparkline={selectedCoinData?.sparkline_in_7d.price}
                    />
                      ) 
                    : null}
                </BottomSheetModal>
              </View>
        </BottomSheetModalProvider>      
        </GestureHandlerRootView>      
      </SafeAreaView>
  );

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.