Expo 47 not working with Gorhom Bottom Sheet

[Judono]

Bug

Having issue running gorhom bottom sheet in expo 47 (a simple solution is to downgrade to expo 46)

Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref

This error is located at: in ScreenModals (created by Route) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by Route) in Route (created by App) in ThemeProvider (created by Provider) in RCTView (created by View) in View (created by Portal.Host) in Portal.Host (created by Provider) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by Provider) in Provider (created by App) in Provider (created by App) in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent)

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.5
react-native	0.70.5
react-native-reanimated	2.12.0
react-native-gesture-handler	2.8.0
expo	47.0.13

Steps To Reproduce

1. create project with expo 47
2. follow instructions to install and implement bottomsheet
3. error will show when run

Describe what you expected to happen:

1. Expect it to work properly

Reproducible sample code

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

const App = () => { // ref const bottomSheetRef = useRef<BottomSheet>(null);

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

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

// renders return ( <View style={styles.container}> <BottomSheet ref={bottomSheetRef} index={1} snapPoints={snapPoints} onChange={handleSheetChanges} > <View style={styles.contentContainer}> <Text>Awesome 🎉</Text> </View> </BottomSheet> </View> ); };

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

export default App;`

[shrihari1999]

Once the sheet is opened, nothing is responding to me. I have to reload the app again and never open the sheet in SDK 47.

I do not want to downgrade to SDK 46 as SDK 47 fixes some issues with ImagePicker.

[abhishekkumar1775]

I am also facing same issue.

[WalidMoua]

I'm having the same problem

[giooooo]

im having the same issue, any updates on this one?

[shrihari1999]

Quick update: Upgrading to SDK 48 didn't fix it either. Someone please help!! ⚠️

[gorhom]

im going to look into this issue

[shrihari1999]

While @gorhom is looking into it, has anyone found a workaround to get it working?

Update: Working in iOS, not working in Android for SDK 47 and 48

[SkySails]

Is this still reproducible? I was playing around with the idea of converting a bare application to Expo and during my research, I came across this issue - but it seems to work just fine with 48.0.7?

I was not able to make any use of the reproducible example in the original post, but here is what basically what I did:

1. Bootstrap Expo project with TS + navigation & install dependencies

yarn create expo-app testapp --template
npx expo install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet

Grabbing the installed versions using yarn list expo *reanimated *gesture* @gorhom/* yields:

├─ @gorhom/[email protected]
├─ @gorhom/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

2. Create demo component in app/(tabs)/index.tsx

import React, { useMemo, useRef } from "react"
import { StyleSheet, Text, View } from "react-native"
import BottomSheet from "@gorhom/bottom-sheet"

export default function TabOneScreen() {
  const bottomSheetRef = useRef<BottomSheet>(null)
  const snapPoints = useMemo(() => ["20%", "50%", "100%"], [])

  return (
    <View style={styles.container}>
      <BottomSheet ref={bottomSheetRef} onChange={console.log} snapPoints={snapPoints}>
        <View style={{ flex: 1 }}>
          <Text>Some cool content</Text>
        </View>
      </BottomSheet>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
})

3. Profit??

It just works without any trouble, as far as I can see. Am I missing something or has this been fixed?

[shrihari1999]

Is this still reproducible? I was playing around with the idea of converting a bare application to Expo and during my research, I came across this issue - but it seems to work just fine with 48.0.7?

I was not able to make any use of the reproducible example in the original post, but here is what basically what I did:

1. Bootstrap Expo project with TS + navigation & install dependencies

yarn create expo-app testapp --template
npx expo install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet

Grabbing the installed versions using yarn list expo *reanimated *gesture* @gorhom/* yields:

├─ @gorhom/[email protected]
├─ @gorhom/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

2. Create demo component in app/(tabs)/index.tsx

import React, { useMemo, useRef } from "react"
import { StyleSheet, Text, View } from "react-native"
import BottomSheet from "@gorhom/bottom-sheet"

export default function TabOneScreen() {
  const bottomSheetRef = useRef<BottomSheet>(null)
  const snapPoints = useMemo(() => ["20%", "50%", "100%"], [])

  return (
    <View style={styles.container}>
      <BottomSheet ref={bottomSheetRef} onChange={console.log} snapPoints={snapPoints}>
        <View style={{ flex: 1 }}>
          <Text>Some cool content</Text>
        </View>
      </BottomSheet>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
})

3. Profit??

It just works without any trouble, as far as I can see. Am I missing something or has this been fixed?

Quick question @SkySails . Did you try it in an Android device? It works for iOS devices.

[SkySails]

I am actually in the process of trying to do so, sorry. I was just going by the original post and wanted to share my insights so far.

Of course, I should try Android as well - especially since you already mentioned that it worked on iOS!

[SkySails]

Yes, it works fine on my Samsung Galaxy Tab S8 running Android 12 and One UI 5.0 🤔

[shrihari1999]

Deleting node_modules and installing everything all over again fixed it for me. Thanks everyone!

[manse]

I also faced the same issue with Expo 48. Wrapping BottomSheet with GestureHandlerRootView from react-native-gesture-handler resolved the issue for me. https://snack.expo.dev/@manse/bottomsheet-android-example

[olubiyi95]

I am trying to pass in data into the bottom sheet using the BottomSheetScrollView or BottomSheetFlatList, the data is rendered however it is not responding to my scrolling gestures. I have spent some time trying to understabd abd fix this but without much success

[lklima]

thanks @manse this worked for me, for anyone who is using BottomSheetModal instead of BottomSheet , you have to wrap BottomSheetModalProvider with GestureHandlerRootView

<GestureHandlerRootView style={styles.container}>
  <BottomSheetModalProvider>
    <BottomSheetModal ref={modalRef} index={0} snapPoints={snapPoints}>
      <Text>Awesome 🎉</Text>
    </BottomSheetModal>
  </BottomSheetModalProvider>
</GestureHandlerRootView>

[amitchaudhary140]

Above thing worked for me. However, I was trying to give "flex-1" using Nativewind which was breaking the whole thing. Giving style={{flex: 1}} solved my issue.

[gbernobic]

We had an issue with Expo 49 (BottomSheet wouldn't open (probably related to reanimated 3.3.0)). The issue went away with Expo 50 and reanimated 3.6.2.