Incorrect layout when navigating between screens of different orientation on iOS

[thomas-coldwell]

Description

This issue is hard to consistently reproduce, however, when navigating between screens with a different orientation e.g. Landscape -> Portrait, the new screen is incorrectly laid out with the previous screen's orientation - see screenshot below of the view hierarchy after pushing a new portrait screen.

https://user-images.githubusercontent.com/31568400/225103581-1b54811b-0113-46e0-a839-14fab60b828f.mp4

As you can see the RNSScreenView (child of the RNSScreen UIViewController) that I've navigated to has had its frame set to landscape dimensions even though it is actually a portrait screen, resulting in a broken layout.

I've added a log to the setFrame method of the RNSScreenView to see where this gets called from and with what dimensions (if you scroll to the right you can see the calling method):

// When it breaks ❌:
2023-03-12 20:41:11.536827+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 0.000000x0.000000 called from 2   UIKitCore                           0x0000000131f58325 UIViewCommonInitWithFrame + 1849
2023-03-12 20:41:11.796876+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 844.000000x390.000000 called from 2   UIKitCore                           0x0000000130f725fa -[UINavigationController _startCustomTransition:] + 1348
2023-03-12 20:41:11.809961+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 844.000000x390.000000 called from 2   OrientationTest                            0x0000000104cdeff8 -[RNSScreenStackAnimator animateTransition:] + 392
2023-03-12 20:41:11.823229+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 844.000000x390.000000 called from 2   OrientationTest                            0x0000000104ce0aa2 -[RNSScreenStackAnimator animateFadeWithTransitionContext:toVC:fromVC:] + 338

// When it lays out correctly ✅:
2023-03-12 20:43:29.145651+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 0.000000x0.000000 called from 2   UIKitCore                           0x0000000131f58325 UIViewCommonInitWithFrame + 1849
2023-03-12 20:43:29.401373+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 844.000000x390.000000 called from 2   UIKitCore                           0x0000000130f725fa -[UINavigationController _startCustomTransition:] + 1348
2023-03-12 20:43:29.408939+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 844.000000x390.000000 called from 2   OrientationTest                            0x0000000104cdeff8 -[RNSScreenStackAnimator animateTransition:] + 392
2023-03-12 20:43:29.417094+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 844.000000x390.000000 called from 2   OrientationTest                            0x0000000104ce0aa2 -[RNSScreenStackAnimator animateFadeWithTransitionContext:toVC:fromVC:] + 338
2023-03-12 20:43:29.519909+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 844.000000x844.000000 called from 2   UIKitCore                           0x0000000130f89f46 -[UINavigationController _layoutViewController:] + 1194
2023-03-12 20:43:29.820028+0000 OrientationTest[49171:3980390] 👉RNSScreenView setting frame to 390.000000x844.000000 called from 2   UIKitCore                           0x0000000130f89f46 -[UINavigationController _layoutViewController:] + 1194

There are a couple of interesting things to note in the logs above:

• Firstly, the [UINavigationController _startCustomTransition:] & related transition animation methods set the new screen to landscape dimensions (even though the screen is specified as portrait). It looks like this is due to the fact the UINavigationController's supportedInterfaceOrientations are specified by its top view controller which in this case would still be landscape (before the transition has started and before the new view controllers have been set) & then the UINavigationController internally sets the final frame for the view we are transitioning to based on this in its various animated transition methods.
• Secondly, in the case where the layout is correct, there is a final [UINavigationController _layoutViewController:] presumably from it some other update to the navigation controller triggering a re-layout with the correct, portrait dimensions for the screen.

Expected Behaviour

That when navigating to a portrait screen it should correctly layout with portrait dimensions.

Steps to reproduce

1. Open example on an iPhone simulator (we've been able to reproduce it on a physical device, but its most easily reproducible here for some reason)
2. Navigate back and forth between Landscape -> Portrait screens
3. Observe the calls to setFrame in the RNSScreenView
4. Eventually the layout should break as shown in the above screenshot (this might take a number of tries)
5. See that the Portrait screen is laid out with Landscape dimensions in the XCode view hierarchy debugger

Snack or a link to a repository

https://github.com/thomas-coldwell/rnscreen-orientation-glitch

Screens version

3.20.0

React Native version

0.71.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14

Acknowledgements

Yes

[kkafar]

Hi @thomas-coldwell, thanks for reporting. Would you confirm that the issue does not appear when running on iOS < 16 (try out iPhone 13)?

Also, do you see message from UIKit as in #1732?

[thomas-coldwell]

I'm downloading iOS 15.5 to test out on the simulator now and will report if the issue exists there. I can confirm I do see the UIKit requestGeometryUpdate message you mentioned in that other PR

[kkafar]

Thank you!

[thomas-coldwell]

I can confirm this issue does not occur on iOS 15.5 (tested on an iPhone 13 Pro Max & iPhone 8 simulator just to make sure it wasn't any weird screen size issue). I'll also test with the requestGeometryUpdate changes on an iOS 16 simulator and see if that resolves the issue in my reproduction app

[thomas-coldwell]

I've just tested it on iOS 16 (iPhone 14 simulator) again with the changes for the requestGeometryUpdate in https://github.com/software-mansion/react-native-screens/pull/1732 but the issue is still present

[thomas-coldwell]

Also just another bit of info to add to this that might help us solve it - viewWillTransitionToSize on the UINavigationController always reports the correct dimensions of the view its transitioning to. This might be helpful if we need to force the size of the view we are transitioning to

[vinkim]

Thanks for the info and the reproduction repo Thomas!

I ended up spending a bit of time trying to debug this, trying to follow which code paths calls what.

For my case, I ended up with a temporary workaround, in which case I was not able to reproduce the issue in your reproduction repo.

I added the following line to RNSScreenStack.mm, in your reproduction repo

- (void)navigationController:(UINavigationController *)navigationController
       didShowViewController:(UIViewController *)viewController
                    animated:(BOOL)animated
{
  [self emitOnFinishTransitioningEvent];
  [RNSScreenWindowTraits updateWindowTraits];
  [_controller.view setNeedsLayout]; <------- This line
}

Since this was enough to solve our use case by doing a patch-package, I didn't debug any further as of now.

[thomas-coldwell]

That works really well @vinkim! I think I tried this before (outside the sandbox project) and it didn't perform the layout, but will re-test with this! Thanks for helping to debug it 🙌

[Thenlie]

I am experiencing a very similar issue, though slightly different I think. This all started after switching to the NativeStackView from StackView.

Screens render well in either orientation, but on one screen if you rotate, it is not updated to the new layout. I have tired manually setting the height and width based on the device window dimensions, but that does not make a change. I also tried the patch suggested by @vinkim which also did not solve the issue.

Trying to make a small repro case but don't have the time just yet.

Currently testing on: iPad 10th Gen, iOS 16.1. React Native 0.67.5 React Native Screens 3.19.0

[Salmankhan033]

I have the same issue, Is someone fixed it?

[feedthedevil]

Thanks for the info and the reproduction repo Thomas!

I ended up spending a bit of time trying to debug this, trying to follow which code paths calls what.

For my case, I ended up with a temporary workaround, in which case I was not able to reproduce the issue in your reproduction repo.

I added the following line to RNSScreenStack.mm, in your reproduction repo

- (void)navigationController:(UINavigationController *)navigationController
       didShowViewController:(UIViewController *)viewController
                    animated:(BOOL)animated
{
  [self emitOnFinishTransitioningEvent];
  [RNSScreenWindowTraits updateWindowTraits];
  [_controller.view setNeedsLayout]; <------- This line
}

Since this was enough to solve our use case by doing a patch-package, I didn't debug any further as of now.

Thank you! Works for me :)

[madox2]

I am facing a similar issue on iOS 16.7.1. My setup is slightly more complicated, I control orientation manually with expo-screen-orientation package. This became issue once I introduced nested Tab navigator into root Stack navigator. It seems to be working fine when I disable animation on the landscape screen:

<Stack.Screen
  name="landscape-full-screen"
  component={LandscapeFullScreen}
  options={{
    animation: 'none',
   // ...

Packages:

"react-native-screens": "~3.22.0",
"@react-navigation/native": "^6.1.8",
"@react-navigation/native-stack": "^6.9.14",
"@react-navigation/bottom-tabs": "^6.5.9",
"expo-screen-orientation": "~6.0.5",

[tboba]

Hey @thomas-coldwell, @vinkim (huge shout out to you for suggesting the change!), @Thenlie, @Salmankhan033, @feedthedevil, @madox2! Sorry for the late response in this issue 😅

I've created the PR with the suggested by @vinkim changes. I've also came to another solution that you can find in the PR, but I believe setNeedsLayout should be sufficient here. Could you test if this change fixes the problem for you?

You can check those changes by changing line with react-native-screens dependency in your package.json:

"react-native-screens": "software-mansion/react-native-screens#@tboba/fix-updating-bounds"

[nateshmbhat]

any idea when this fix will get merged and released ?

[yahacom]

Hello! I'm also interesting when it'll be fixed. Actually fix suggested by @vinkim help me make it work.

But I still can see this ruge UI transformations when layout transforms from landscape to portrait and vice versa. It looks like layout transforms first and only after it apply new width and height (and app layout looks broken for a part of second in a middle). So, it still need some fix to make transition more smooth.