React Native app is not locked to portrait mode despite using react-native-orientation and setting project settings in Xcode

Question

I'm developing a React Native application and want to lock the device orientation to portrait mode only. I have installed react-native-orientation and am using it in my app, but it does not seem to prevent the app from rotating to landscape mode.

This is how I'm using it in my app:

import Orientation from 'react-native-orientation';

const App = () => {
  useEffect(() => {
    Orientation.lockToPortrait();
  }, []);

  // ...
};

Also, I have set the Device Orientation in Xcode to Portrait only, but the issue persists.

I've installed and linked react-native-orientation as described in the documentation. In my main App.tsx component, I've used Orientation.lockToPortrait() inside a useEffect hook. I've gone into Xcode and checked only the "Portrait" option under "Device Orientation" in my project's General settings. It didn't do anything so I manually changed the info.plist to include

    <array>
        <string>UIInterfaceOrientationPortrait</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
    </array>

I've used the Xcode method many times with no issue in the past but this time it doesn't work. Are there know packages that can overwrite this ?

I'm using Xcode 14.3.1 and react native 0.71.12

Any help would be greatly appreciated.

Answer 1

Fixed it by adding this at the end of my AppDelegate.mm

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window
{
  return UIInterfaceOrientationMaskPortrait;
}