Full screen with UINavigationBar outside of ReactView

[jessepollak]

I'm trying to use the modal and have it go full screen. Unfortunately, I have a UINavigationBar outside of the ReactView which is causing problems. It seems as though it is taking the size of the ReactView rather than the main view.

Any ideas on how to approach this issue?

[brentvatne]

@jessepollak - does this happen with forceToFront enabled?

[jessepollak]

Yep, when forceToFront isn't enabled, it looks like this.

[Iliker]

+1 when forceToFront={true}, it looks like this.

[brentvatne]

Thanks for the reports guys! I'll try to take care of these this weekend

[grabbou]

It's probably because of the React calculating absolute positions relative to the parent view, not to the UIWindow the element has been attached to. Not sure if coming straightly from React (that would've been super weird) or from Overlay, probably needs some investigating, but below is my tip that made it working.

Copy the Styles.js from this repo, define them in your project and change the container part to this one:

import Dimensions from 'Dimensions';

export default StyleSheet.create({
  width: window.width,
  height: window.height,
  position: 'absolute',
  left: 0,
  top: 0
});

@brentvatne if this is something you are happy with, I can submit a PR.

[brentvatne]

@grabbou - I like it - let's do it :smile:

[grabbou]

@brentvatne to the native-modal repo? (this one)

[brentvatne]

@grabbou - fair question, probably both actually (Overlay and here)

[grabbou]

I'll check out Overlay stuff and see if this is something that we can fix there and will work out of the box or not.

[ghost]

@grabbou I tried your fix on react-native-overlay. It seems to does the trick :) thanks