fix(bottom-sheet-modal): behind native modal view

[magrinj]

Fix issue #832

Motivation

Using react-navigation or native Modal component with BottomSheetModal component will show them behind the native views. As suggested in react-native-portal library, we should wrap the content inside FullWindowOverlay to get the view above all the native views. https://github.com/gorhom/react-native-portal#react-native-screens-integration

[bitcrumb]

Would very much like to see this land as well!

[gorhom]

@magrinj thanks for submitting this PR, my concern is that the library will have react-native-screens as a required dependency, which may not be the case for all users

[bitcrumb]

@magrinj thanks for submitting this PR, my concern is that the library will have react-native-screens as a required dependency, which may not be the case for all users

Would it be an option to have an (optional) overlayComponent prop on BottomSheetModal, which you would render around the BottomSheet inside Portal? This way we can "inject" the necessary wrapper (being the FullWindowOverlay of react-native-screens)? I get that it maybe is a weird prop to have, since it only makes sense for this use-case. But I wanted to bring it up anyway. This issue prevents me from using this library in most of the projects we maintain, since they all use "native" navigation as much as possible, which always includes proper modals.

[Shaninnik]

I agree with @bitcrumb that this is an important feature. Native stack navigators is now the recommended way to go with React Navigation and all our projects use native modals which in turn makes using BottomSheetModal impossible. patch-package for rescue until this is merged or resolved somehow else

[magrinj]

@gorhom I understand that point, as suggested by @bitcrumb we can create a custom prop called wrapperComponent or containerComponent. We can also put all the hooks of the component BottomSheetModalComponent in a custom exported hook. So user can recreate this component from scratch, in the way they want it. Let me know your preference, I'll definitely update my PR !

[github-actions[bot]]

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

[magrinj]

@gorhom Hey, any news on the proposal ?

[90dy]

Up

[ansh]

@magrinj Why was this closed?

[magrinj]

@ansh it was actually auto close by the bot, I'll try to propose something more generic next week 🙂

[mjvestal]

I just spent 45 minutes debugging why the bottom sheet wasn't displaying. Finally it occurred to me it could be behind my fullScreenModal. Sure enough removing presentation: 'fullScreenModal' for the Stack.Group my view is part of fixed it.

Not having a fix for this means we have to declare another BottomSheetModalProvider inside the view that presents the modal. However that means we can't use native headers in these views, otherwise the backdrop is rendered behind the native header.

[zibs]

Just in case anyone else tries this - this doesn't seem to resolve the same issue on Android, even though it does on iOS. Use case was trying to display the bottom sheet over top of the built-in RN modal.

[magrinj]

Humm strange I'm using it on both platform for my app and it works well. Do you have a code sample ? I'll try to change my PR at the end of the week to avoid requiring the peerDependencies

[zibs]

I don't have a repro I can share at the moment, but when I dig into the source for the overlay I see it's just on view on Android https://github.com/software-mansion/react-native-screens/blob/5d0f166d92c684188f218dd10ac933cf51489d28/src/index.native.tsx#LL377 and that's probably why it's not positioned on top of the native RN modal....

[magrinj]

Yes it's just a View on Android because it's actually not needed on that platform, the bottom sheet should appear above the other view without extra change. It's not the case on your side ?

[magrinj]

I've created this PR #1309, now react-native-screens is no longer a required peer dependency @gorhom. Sorry for the duplicate, I've removed the last fork

[ktarasenkodel]

Try to use containedTransparentModal instead of 'transparentModal' (https://reactnavigation.org/docs/native-stack-navigator/#presentation)