[v4] BottomSheetModal in react navigation modal

[Livijn]

Bug

The sheet is placed behind the @react-navigation/native modal.

Environment info

Library	Version
@gorhom/bottom-sheet	4.1.5
react-native	0.67.2
react-native-reanimated	2.3.1
react-native-gesture-handler	2.2.0

Steps To Reproduce

1. Create a NativeStack
2. Place the BottomSheetModalProvider like this:

<NavigationContainer>
  <BottomSheetModalProvider>
    <StackNavigator />
  </BottomSheetModalProvider>
</NavigationContainer>

3. Use the <BottomSheetModal> in a screen with presentation: "modal".

Describe what you expected to happen:

The sheet is placed behind the modal. I expect the sheet to be in front of the modal that hosts the sheet. I've also tried wrapping the modal-component with the provider, but then I get 'BottomSheetModalInternalContext' cannot be null!.

Reproducible sample code

The snack template throws an error: Cannot convert undefined or null to object

[philipp-wat]

Hi Livijn,

we had the same bug with "createNativeStackNavigator".

Using "createStackNavigator" from "@react-navigation/stack" fixed it for us.

Hope that helps!
Philipp

[Livijn]

I don't want to drop the benefits of using the native stack for this purpose. Thanks though.

[lghimfus]

hi @Livijn, did you find a workaround for this one?

[Livijn]

Nope, not yet. Still waiting for @gorhom to reply.

[lghimfus]

Nope, not yet. Still waiting for @gorhom to reply.

right, I ended up using
<FullWindowOverlay style={StyleSheet.absoluteFill}> from react-native-screens to wrap the bottom sheet; that brings it above the navigators. I found out about it here https://github.com/gorhom/react-native-portal, in case you also need to use a portal

hope this helps a bit in the meantime

[Livijn]

If I wrap it like this: <FullWindowOverlay><BottomSheetModal /></FullWindowOverlay> nothing changes. However, if I wrap the content like: <BottomSheetModal><FullWindowOverlay /></BottomSheetModal> the content is placed correctly above the navigators. However, it breaks the animation etc of the sheet.

What way did you do it?

[lghimfus]

FullWindowOverlay

If I wrap it like this: <FullWindowOverlay><BottomSheetModal /></FullWindowOverlay> nothing changes. However, if I wrap the content like: <BottomSheetModal><FullWindowOverlay /></BottomSheetModal> the content is placed correctly above the navigators. However, it breaks the animation etc of the sheet.

What way did you do it?

<Portal> <FullWindowOverlay style={[StyleSheet.absoluteFill]}> <BottomSheet/>

it might be either that you didn't add style={[StyleSheet.absoluteFill]} or that I'm not using the modal

[Livijn]

I did add the correct styling. For now, I guess I'll go with the non-native stack navigator.

[mariomendonca]

Guys, it worked for me <FullWindowOverlay style={StyleSheet.absoluteFill}><Portal><BottomSheet> {...}

[nihilenz]

Portal usage didn't help me, I preferred to switch to the non-modal component (BottomSheet) waiting for a better solution with BottomSheetModal

[github-actions]

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]

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