react-native: doesn't handle screen sizes and orientations properly

So today I was trying to refactor my code to migrate from a custom imperative Modal API to React Native’s <Modal /> and found some issues which made me write my own component in JS instead.

Modal’s height doesn’t include the statusbar, so when the app has a translucent statusbar, Modal is drawn under the statusbar and there’s empty space left at the bottom
Modal is not responsive to orientation, even if the device is in landscape mode, Modal is drawn according to potrait mode, so it kinda covers half the screen and the bottom part gets hidden
It would be nice if the native Modal could respond to screen size and orientation change like a JS based Modal does
With the slide animation, the animating Modal has a strip at the top which resembles the statusbar for some reason

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 15
Comments: 30 (18 by maintainers)

Commits related to this issue

Fix Modal size on Android tablet Summary: On tablets, using Display.getRotation() returned ROTATION_0 or ROTATION_180 when it was in landscape, not portrait as it does on phones. This resulted in the... — committed to facebook/react-native by davepack 8 years ago
Fix Modal size on Android tablet Summary: On tablets, using Display.getRotation() returned ROTATION_0 or ROTATION_180 when it was in landscape, not portrait as it does on phones. This resulted in the... — committed to bookofmormoncentral/react-native by davepack 8 years ago

Most upvoted comments

i found that this is not a bug, as shown on the doc Modal section https://facebook.github.io/react-native/docs/modal.html we need to set the supportedOrientation prop of the Modal to [‘portrait’, ‘landscape’] in order for Modal to support landscape mode in iOS

      <Modal
        visible={true}
        supportedOrientations={['portrait', 'landscape']}
      >
      </Modal>

sckoh on Dec 4, 2016

Any updates on this also?

gelobelo02 on Aug 8, 2016

Any updates on the status of this? I’m still seeing the rotation issue on Android with RN 0.30.

esamelson on Aug 3, 2016

@corysmith and I have also noticed this. We’re crunching through a deadline as well but may be able to help out with this.

ekryski on Jun 10, 2016

Modal definitely isn’t resizing properly in rotation. I’m aware of that but haven’t had a chance to fix it. If @sreejithr wants to look at it, that would be awesome. Unfortunately I’m a little stuck on some other things currently. I will probably get back to Modal stuff next week.

dmmiller on Jun 9, 2016

I used Modal in version 0.40 ad now 0.42 and everything works fine on iOS and android. So I can not reproduce this behavior.

markusguenther on Mar 22, 2017

I finally just gave up and replaced my <Modal /> component with a View with the following style:

<View style={{position: 'absolute',
  flex: 1,
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
}} />

with a <ScrollView /> inside. This actually works quite nicely for displaying the Modal, and resizes properly upon orientation. However, I had to implement the Android back button functionality manually (using BackAndroid) and the entry animations, for which I used react-motion. Not an ideal solution, but it works.

Depending on what functionality you need, there are also other maintained modal libraries out there, such as react-native-modalbox. I found that just using an absolutely positioned View worked best for what I needed, however, and was a nice simple solution.

esamelson on Aug 14, 2016