react-native-bottom-sheet: Expo 47 not working with Gorhom Bottom Sheet

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

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

Describe what you expected to happen:

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;`

About this issue

Original URL
State: open
Created a year ago
Comments: 17 (1 by maintainers)

Most upvoted comments

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

manse on Apr 1, 2023

im going to look into this issue

gorhom on Feb 27, 2023

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>

lklima on May 4, 2023

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

shrihari1999 on Mar 17, 2023

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

olubiyi95 on Apr 13, 2023

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:

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/bottom-sheet@4.4.5
├─ @gorhom/portal@1.0.14
├─ expo@48.0.7
├─ react-native-gesture-handler@2.9.0
└─ react-native-reanimated@2.14.4

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",
  },
})

Profit??

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

SkySails on Mar 17, 2023