[Bug]: BottomSheetModal renders under the screen if `presentation: "modal"`

[Isaccobosio]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

I have my Expo Router v4.0.21 all correctly set up. The main _layout.tsx contains the <Slot /> because I have authentication logic.

As pointed by many other issues like this i wrapped the layout with BottomSheeModalProvider.

But if in my screens I have a modal screen defined and I open a BottomSheetModal from that screen, the BottomSheetModal is not rendered on top of the modal screen as I would expect.

My RootLayout looks like this:

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
        <BottomSheetModalProvider>
            <Slot />
        </BottomSheetModalProvider>
     </GestureHandlerRootView>
  );
}

And the first rendered _layout.tsx file is like this:

return (
    <Stack>
      <Stack.Screen name="index"/>
      <Stack.Screen
        name="modal"
        options={{
          presentation: "modal",
        }}
      />
    </Stack>
  );

This is what I expect:

And this is what I have https://github.com/user-attachments/assets/a678b916-d4b7-417e-a19b-ba34ef3459f6

Reproduction steps

• Setup Expo Router
• create a Stack navigator with a screen and a modal screen
• place a BottomSheetModal in the modal screen
• open a BottomSheetModal from the Modal screen

Reproduction sample

https://snack.expo.dev/@isaccobosio/bottom-sheet---issue-reproduction-template

I noticed that in snack.expo.dev I can not create a working example with Expo Router. So I tried with React Navigation and everything works fine.

Relevant log output

[ely-saakian]

++ caught the same bug!

[KlutchKyle]

Same bug when using React Navigation and setting:

options={({ navigation }) => ({
  presentation: 'transparentModal',
})}

Edit: Idk how to do the formatted code in github comments lol

[predofrazao]

I couldn't reproduce it on your snack or see the error attachment, but based on your description, you're facing a similar issue that I had some time ago. Try using FullWindowOverlay on containerComponent prop for iOS devices:

import { Platform } from "react-native";
import { BottomSheetModal } } from "@gorhom/bottom-sheet";
import { FullWindowOverlay } from "react-native-screens";

// ...
<BottomSheetModal containerComponent={Platform.OS === "ios" ? FullWindowOverlay : undefined}>
    { /* ... */ }
</BottomSheetModal>

[birosikm]

I had different issue with router Stack as presentation "modal", BottomSheetModal didn't even show up. I fixed it with solution by @predofrazao

[leandrojo]

I couldn't reproduce it on your snack or see the error attachment, but based on your description, you're facing a similar issue that I had some time ago. Try using FullWindowOverlay on containerComponent prop for iOS devices:

import { Platform } from "react-native"; import { BottomSheetModal } } from "@gorhom/bottom-sheet"; import { FullWindowOverlay } from "react-native-screens";

// ... <BottomSheetModal containerComponent={Platform.OS === "ios" ? FullWindowOverlay : undefined}> { /* ... */ } </BottomSheetModal>

It works! But you might want to include the prop enableDynamicSizing={false} because of the new parent reference.

[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.