[v4] [v5] | [v2] ‘BottomSheetModalInternalContext’ cannot be null error in expo-router

[crstnmac]

Bug

We have a open source library which uses the bottomsheet ,when we use the component inside a expo-router project we get

  ‘BottomSheetModalInternalContext’ cannot be null 

even after BottomSheetModalProvider is wrapped in the _layout.tsx file of the root

Environment info

Library	Version
@gorhom/bottom-sheet	5.0.0.alpha-3
react-native	0.72.4
react-native-reanimated	3.3.0
react-native-gesture-handler	2.12.0

Steps To Reproduce

1. Install @gorhom/react-native-bottom-sheet in a expo-router project and also add @adaptui/react-native-tailwind@1.0.0-alpha.13 2.Use the select component as described here
2. Run the app

Describe what you expected to happen:

1.Expected to open a sheet with options

Reproducible sample code

Reproducable code:-

https://github.com/crstnmac/remember-me/tree/select-bug

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[sutyum]

Did this work out? Does Expo Router V3 help?

[naytun]

You just need to wrap in <BottomSheetModalProvider> as follow:

         <BottomSheetModalProvider>
            <BottomSheetModal
               ref={bottomSheetModalRef}
               index={0}
               snapPoints={snapPoints}
            >
               <ScrollView contentContainerStyle={...}>
                  ...
               </ScrollView>
            </BottomSheetModal>
         </BottomSheetModalProvider>