React-native-modal: Change the backdrop start height to be under navigation bar.

[ChristianTucker]

I'm trying to figure out the best way to get the backdrop to start under the navigation bar, as there are items on our navigation bar that we want the user to continue to be able to interact with while the modal is loaded.

We're already using onLayout to get the height of our header and adjusting our modal's styling based on that value. I've tried adjusting the style prop for the react-native-modal component to use absolute positioning, but that didn't work. I've also tried adjusting the marginTop property.

[yll090]

Well, if you look at the code, it's really not possible at the moment -- it uses the device's width/height. I really don't have time for a PR right now, when/if I do I'd make one. :/

[mmazzarolo]

Hey!
I would strongly suggest against keeping the toolbar active while showing the (react-native) modal.
Imho it would be better using a completely JS solution.

P.S.: If you're interested I'm porting react-native-modal to a fully JS lib. I'm opening an issue for it.

[ChristianTucker]

@mmazzarolo We were using the modal implementation in-place of a Drawer navigator. Therefor keeping the toolbar active is definitely ideal for our situation. However I've already made the appropriate modifications for this to work. This was just preference opposed to something like react-native-drawer.

Ignore the placeholder UI elements, this was a gif of before we fixed it, but just to show you why we wanted it.

[krestaino]

@ChristianTucker What did you do to achieve this? I am working on an app where I want 2 buttons to still be clickable over the backdrop.