Cant lock screen orientation on iPad iOs

user_9772561 0
Viewed 359

NOTE i am aware there are many post about this already. But all are somewhat outdated and not a single one fixes the issue hence i am posting a new one.

Issue

Cant lock a specific screen orientation for ipad.

Packages

"expo": "~44.0.0",
"expo-screen-orientation": "^4.1.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
(Ands loads of others that arent relevent)

Info

Trying to lock a screen orientation to landscape. Here's the catch: on mobile it should be portrait but on tablet - landscape. Mobile works fine (both orientations), but on tablet - cant seem to make it work.

And yes, I did add "requireFullScreen": true to app.json. and app.json does NOT contain orientation property (tried with it too tho).

FUN FACT - tried setting orientation to landscape on app.json and on iPhone it was fine but on iPad - did nothing. I could still rotate the screen just fine.

Code

In the top most app (app.js) I create a simple method (inside function App() ):

  const foo = async () => {
    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT);
  };

And i call it: foo();

Then the return (that is not relevent). NOTE the app is returned like so export default registerRootComponent(App);

If using an iPhone - it works fine. But with iPad - i can rotate the screen (aka its not locked).

Tried many different iPads (emulators) and none seem to work.

As mentioned - there are many reports but none seem to be up to date nor working.

expo react-native screen-orientation ipad ios
2 Answers

From the Expo docs:

Apple added support for split view mode to iPads in iOS 9. This changed how the screen orientation is handled by the system. To put the matter shortly, for the iOS, your iPad is always in the landscape mode unless you open two applications side by side. In order to be able to lock screen orientation using this module you will need to disable support for this feature. For more information about the split view mode, check out the official Apple documentation.

Of course this basically tells us nothing.

user_5001820

I was facing the same issue and the way I went around it worked for me. Open your react-native project in XCode (by opening the respective xcworkspace file). Click on the Files icon on the left, and click on your project. For me, it is something like this: - file as seen in xcode

After clicking on that, you should see your project settings. Click on General, and in that page, you should find a tab namely 'Deployment Info'. Under this tab, you should find 'Device Orientation'. Click on the checkbox next to 'Portrait' and your issue should be fixed.

image with checkboxes in XCode

user_196617690
Related