React-native-navigation: changing orientation affects stack parents' orientation

[chazomaticus]

Issue Description

Under some circumstances, pushing a component with a more permissive orientation setting onto a stack also changes some stack parents' orientation to permissive, despite being created restricted to portrait.

Starting from a root stack, push a modal with orientation set to just portrait, then push another with both portrait and landscape orientation. Rotate the device to landscape on the topmost modal, which is rightly allowed. Dismissing that modal while in landscape takes you back to the portrait-only modal, rendered in landscape.

I haven't tested every combination of layout types or orientation settings, and I suspect the issue is bigger than just modals and stacks, that there's something about orientation settings that bleeds among rendered components in general. Note that in my gist below there's a commented-out orientation section in the Navigation.setRoot call that, if un-commented, affects other components.

Unfortunately, I've only been able to test on ios, as I can't get a fresh react-native/react-native-navigation project nor the react-native-navigation playground to build on android.

Steps to Reproduce / Code Snippets / Screenshots

I've got a fairly minimal test case at https://gist.github.com/chazomaticus/6929718f5c1f8f982c44030f2bd5481c that shows off the behavior

To see it in action, do a fresh clone of react-native-navigation, replace playground/index.js with that gist, then launch npm run xcode and hit play to launch the emulator. In the app, launch the modal, then the overlay. Rotate to landscape, then dismiss the overlay and note that the first modal is now landscape (though it was created restricted to portrait).

If you then un-comment the commented section in setRoot, you can see that settings on the root component also affect the modal, surprisingly.

---

Environment

• React Native Navigation version: 2.5.0 (master)
• React Native version: 0.57.7
• Platform(s) (iOS, Android, or both?): ios at least (haven't been able to test android)
• Device info (Simulator/Device? OS version? Debug/Release?): fresh iphone xr emulator at least, other ios emulators too, debug builds at least

[wsliaw]

Both Android & iOS having this issue

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[chazomaticus]

This issue still occurs on master today. Please don't automatically close this issue. Thank you.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[manuhook]

This issue is still there.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[jonnynfb]

Any way to fix this? I'm facing this issue as well.

[szalaybalazs]

The issue occures for me as well.

[wsliaw]

change the orientation again when you close the modal:

Navigation.mergeOptions(componentId, {
  layout: { orientation: ['portrait'] },
});

[Rotemy]

Navigation.mergeOptions(componentId, {
layout: { orientation: ['portrait'] },
});

This is working but I wish there was another solution

Btw, you need it only for Android.