1//you will need to use BottomSheetModal and add its provider to the root component of you application
2
3
4import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
5
6
7const App = () => {
8 return (
9 <BottomSheetModalProvider>
10 <Navigation /> // this is my app entry component (react-navigation Navigator), use yours
11 </BottomSheetModalProvider>
12 )
1//#react native elements bottom sheet close on back button press
2<BottomSheet
3isVisible={isModelVisible}
4modalProps={{
5 animationType: 'fade',
6 hardwareAccelerated: true,
7 onRequestClose: () => {
8 setModelVisible(false);
9 },
10}}>
11 ....
12 <BottomSheet/>
1//Use this package
2//https://github.com/gorhom/react-native-portal
3
4If you want to use sheet not modal
5
6
7import { PortalProvider,Portal,PortalHost } from '@gorhom/portal';
8
9 const App = () => {
10
11 return (
12 <SafeAreaProvider>
13 <PortalProvider>
14 <Navigation />
15 </PortalProvider>
16 </SafeAreaProvider>
17 );
18 };
19
20 export default App;
21
22
23
24=========================================
25// now wrap the sheet with Portal on your screen
26
27
28 <Portal>
29 <BottomSheet
30 ref={bottomSheetRef}
31 index={-1}
32 snapPoints={snapPoints}
33 onChange={handleSheetChanges}
34 >
35 <View style={styles.contentContainer}>
36 <Text style={styles.bottomSheetTitle}>Add Customer</Text>
37 </View>
38 </BottomSheet>
39 </Portal>
40
41<PortalHost name="custom_host" /> // Name to be used as an id
42