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

I had initially create this PR #1086 to fix the issue, but this one fix the concern about adding react-native-screens as a required dependency.

react-native-screens is now added but as an optional peer dependency.
If the module is installed the FullWindowOverlay will be used on iOS, otherwise it will work as before.

[joseortiz9]

@gorhom hope you can check this PR, nice work
UP +1

[batuhansahan]

this does not work with react navigation ios modals(presentation: 'modal'). bottom-sheet bottom insets jumping up.

[magrinj]

@batuhansahan Not sure to understand what is actually not working on your side, can you provide a sample ?

[batuhansahan]

bottom sheet looks like this. I properly set up <BottomSheetModalProvider> And BottomSheetModal. bottominset is already 0,
the goal of using your pr because hoping to fix that where swiping down to dismiss a bottom sheet was also closing the underlying ios-modal behind it, PR is fixing the swipe conflict WELL DONE!. but bottom sheet is not in correct position.

[magrinj]

Hmm strange, maybe your BottomSheetModalProvider is not correctly placed.
On my side I'm using this library https://github.com/th3rdwave/react-navigation-bottom-sheet
It allows to use bottom sheet with the same api as react-navigation and it's working really well on my side with presentation modal using native stack from react-navigation.

[batuhansahan]

i tried very way

-provider
--navigation container

and reverse.

[thecoorum]

It's also not working for me with the following screen options

animation: 'none',
presentation: 'transparentModal'

It's always rendered behind the stack screen

[github-actions]

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 Any news on this ?

[thecoorum]

It is working for me with the BottomSheetModalProvider around NavigationContainer when my screens have the following options

animation: 'none',
presentation: 'transparentModal'

The only thing is that screens are implemented with regular BottomSheet, but some nested modals with BottomSheetModal. I think if implementing both with modals there is some portaling issue

[erickreutz]

Would love to see this merged!

[thecoorum]

I noticed that this implementation conflicts with libraries like react-native-ios-context-menu. If you are rendering dropdown menu in such modal it will be just invisible

[magrinj]

@thecoorum Actually it’s not invisible but behind the bottom sheet because of the FullWindowOverlay, maybe I can add a boolean prop to enable/disable the use of the FullWindowOverlay with a default value of true.
But when disabled the problem of the bottom sheet behind modals will appear again.
It really depends on how your screens are implemented and looks like, the main goal of this fix is to solve the issue when using @react-navigation/native-stack modals, bottom sheet appear behind them.

[gorhom]

@magrinj thanks for submitting this CR, i was thinking about exposing a prop in the BottomSheetModal component that allows you to warp the bottom sheet with your own container, in your case is the react-native-screens::FullWindowOverlay ?

by doing this, the library still take no dependency ( other than GH and REA ) and you get to customising the container as you please .

[magrinj]

@gorhom Ok, I was going this way at fist so it's automatic. But I'll change my PR, and add a prop called bottomSheetWrapper

[magrinj]

@gorhom Done ! :)

[magrinj]

@gorhom I just edit regarding the requested changes

[gorhom]

thanks @magrinj for submitting this PR , it should be released on v4.4.8 and v5

[peterpme]

Hey @gorhom just a lil nudge to publish 4.4.8 if possible 😄 thank you!

[MarlonAEC]

Hey @gorhom sorry for pushing but do you have any updates on release 4.4.8? I developing a scenario in which I would like to leverage this PR it will be awesome! Thanks in advance!

[iraybi]

Anyone found any workaround to show BottomSheetModal on top of native Modal?

[thecoorum]

I think this is something that may help here
https://github.com/intergalacticspacehighway/react-native-z-view