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)
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-exampleim going to look into this issue
thanks @manse this worked for me, for anyone who is using
BottomSheetModal
instead ofBottomSheet
, you have to wrapBottomSheetModalProvider
withGestureHandlerRootView
Deleting node_modules and installing everything all over again fixed it for me. Thanks everyone!
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
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:
Grabbing the installed versions using
yarn list expo *reanimated *gesture* @gorhom/*
yields:app/(tabs)/index.tsx
It just works without any trouble, as far as I can see. Am I missing something or has this been fixed?