React-native: iOS: Modal not showing in landscape orientation

[saigrandhi]

Description

Modal component in iOS does not show the modal in landscape mode when the screen is in landscape mode. The screen is rotated back to portrait mode.
GIF: https://gfycat.com/BronzeSparseJunebug

Reproduction

I have provided code so that you can reproduce the bug here:
https://github.com/saigrandhi/modal_bug

Solution

I am willing to work on this bug but would like some guidance on where to start.

Additional Information

• React Native version: 0.37.0
• Platform: iOS
• Operating System: MacOS

[ericvicenti]

Yeah, Modal doesn't support this very well. Have you tried using something else? Unless you are building a hybrid application, it will be much easier to use normal View components inside the main react view. You can use ExNavigation or something similar for this use case.

Because you probably don't need to use Modal, I would consider this a feature request that can be posted on product pains. That way the rest of the community can vote on it and get the attention of the core RN team if it is important.

If want to fix this and your solution is isolated to RCTModalHostView* files, then we can probably get it reviewed pretty quickly.

[saigrandhi]

Thanks for showing me where to fix this.

I have been looking through those files and it seems that a commit has been made that is specific to this issue. I will update my project to v0.38.0-rc.1 and see if it works.

[sckoh]

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>

[edencakir]

@sckoh +1, that solves the issue. Thanks.

[markusguenther]

Cool that helps, but on android it works without this attribute in portrait and landscape mode!

[travismgibson]

@sckoh ,

Thank you. Works perfect!!!