fix: use new rotation API for iOS 16

[kirillzyusko]

Description

Fixes:

[Orientation] BUG IN CLIENT OF UIKIT: Setting UIDevice.orientation is not supported. Please use UIWindowScene.requestGeometryUpdate(_:)

for iOS 16+.

Changes were inspired by these threads:

• https://developer.apple.com/forums/thread/707735
• https://developer.apple.com/forums/thread/709215
• https://stackoverflow.com/a/73735976/9272042

Changes

• added usage of new API for rotation management for iOS 16+ in RNSScreenWindowTraits.mm;

Screenshots / GIFs

Before

Screen.Recording.2023-03-09.at.13.14.36.mov

Test code and steps to reproduce

Just test a scenario when enforceDesiredDeviceOrientation is called on iOS 16. Every time when you call

[[UIDevice currentDevice] setValue:@(newOrientation) forKey:@"orientation"];

You will see a warning in XCode logger. If you rotate screen there may be a possibility that sometimes layout will be broken.

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Updated documentation:
  • https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
  • https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
  • https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
  • https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
• Ensured that CI passes

[kkafar]

Good job so far, thanks!

The new approach (iOS 16 impl.) does enforce demanded interface orientation, but for some reason it does not preserve it between screen changes (see videos below). There are few more quirks like this.

I'm not yet sure what causes such strange behaviour. I'll be back once I've found something useful.

Old behavioiur

force_both_old.mp4

New behaviour

force_both_new.mp4

Code of the example I'm using

import React from "react";
import { createNativeStackNavigator, NativeStackNavigationProp } from "react-native-screens/native-stack";
import { NavigationContainer, ParamListBase } from "@react-navigation/native";
// import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { Button, View } from "react-native";

const Stack = createNativeStackNavigator();

function ButtonList(props: { navigation: NativeStackNavigationProp<ParamListBase>}): JSX.Element {
  return (
    <View>
      <Button title="PortraitUp" onPress={() => {
        console.log('Enforce PortraitUp')
        props.navigation.setOptions({screenOrientation: 'portrait_up'})
      }} />
      <Button title="LandscapeLeft" onPress={() => {
        console.log('Enforce LandscapeLeft')
        props.navigation.setOptions({screenOrientation: 'landscape_left'})
      }} />
      <Button title="LandscapeRight" onPress={() => {
        console.log('Enforce LandscapeRight')
        props.navigation.setOptions({screenOrientation: 'landscape_right'})
      }} />
    </View>

  );
}

function Second({ navigation }: { navigation: NativeStackNavigationProp<ParamListBase>}): JSX.Element {
  return (
    <View>
      <Button title="Go First" onPress={() => navigation.navigate("First")} />
      <ButtonList navigation={navigation} />
    </View>
  );
}

function First({ navigation }: { navigation: NativeStackNavigationProp<ParamListBase>}): JSX.Element {
  return (
    <View>
      <Button title="Go Second" onPress={() => navigation.navigate("Second")} />
      <ButtonList navigation={navigation} />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="First" component={First} options={{
          fullScreenSwipeEnabled: true
        }} />
        <Stack.Screen name="Second" component={Second} options={{
          fullScreenSwipeEnabled: true
        }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

[kirillzyusko]

@kkafar good point! Thank you for pointing it out! I will try to debug it on my end as well!

[kkafar]

I've spent some time debugging it & it seems that there are also issues on iOS < 16. I haven't been able to come up with a solution yet, as I do not really understand yet why the screen rotates in some cases even though rnscreens method enforceDesiredDeviceOrientation method is not called`. I'll have to spent some more time on it.

The changes you proposed seem fine, thank you!

[firofame]

@kkafar @kirillzyusko This change broke my app. reached here after an hour of debugging.

UIWindowSceneGeometryPreferencesIOS are newly added methods in UIKit and not supported in older versions of Xcode.

[kirillzyusko]

@firofame what you mean by broke your app? This method is available starting from iOS 16, isn't it?

And in my code I'm using condition to execute this method only on iOS 16+ 🤷‍♂️

[firofame]

@kirillzyusko I get this error in Xcode 12.4:

Unknown type name 'UIWindowSceneGeometryPreferencesIOS'

this is the error i see in terminal when i run npx react-native run-ios --device:

The following build commands failed:
CompileC /Users/firozahmed/Library/Developer/Xcode/DerivedData/expressregmobile-bdphxgbfsvflgodjugfzxfgqssvh/Build/Intermediates.noindex/Pods.build/Debug-iphoneos/RNScreens.build/Objects-normal/arm64/RNSScreenWindowTraits.o /Users/firozahmed/Desktop/vr/node_modules/react-native-screens/ios/RNSScreenWindowTraits.mm normal arm64 objective-c++ com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

fixed it by changing "react-native-screens": "^3.20.0" to "react-native-screens": "3.20.0" in package.json

[kirillzyusko]

@firofame I think you'll need to update XCode 🙂 It was released 3 years ago... And I think this XCode doesn't support iOS 16 (or even iOS 15). So my recommendation is to update your XCode 🙂

But as a temporary solution - yes, you can downgrade RNS version 👍

[firofame]

@kirillzyusko I wish I could upgrade Xcode, but I am stuck with this version because of a dependency. this app is in production and works fine on iPad OS 16.X

would it make sense to increment react-native-screens version to 4.x if there are breaking changes?

[kirillzyusko]

@firofame I don't think it's a breaking change. @kkafar can correct me if I'm wrong 👀

[kkafar]

I guess the best solution would be to just ifdef the code for iOS 16 or higher for now.

@firofame let me know whether this:

• fix: ifdef orientation code that requries iOS 16 #1794

fixes the problem for you.

You can install react-native-screens from branch by putting:

"react-native-screens": "software-mansion/react-native-screens/@kkafar/screen-rotation-ifdefs-for-ios-16"

in your package.json.

EDIT: We won't treat it as breaking change though, as this is a fixable bug & not intended API change. Version 3.21.0 & 3.21.1 will be broken for older toolchains & everything will be back to normal, hopefully, with release of 3.22.0.