Skip to content

Orientation is not locked as intended #2197

@lifeisegg123

Description

@lifeisegg123

Description

I'm currently facing an issue with the orientation lock. When I set the orientation to landscape using useNavigation().setOptions from react-navigation while the device is actually in landscape mode, it does not lock into landscape.
When I change the code in RNSScreenWindowTraits.mm as shown below, it works fine:

if ([RNSScreenWindowTraits maskFromOrientation:currentDeviceOrientation] & orientationMask) {
-      if (!([RNSScreenWindowTraits maskFromOrientation:currentInterfaceOrientation] & orientationMask)) {
-        // if the device orientation is in the mask, but interface orientation is not, we rotate to device's orientation
-        newOrientation = currentDeviceOrientation;
-      } else {
-        if (currentDeviceOrientation != currentInterfaceOrientation) {
-          // if both device orientation and interface orientation are in the mask, but in different orientations, we
-          // rotate to device's orientation
-          newOrientation = currentDeviceOrientation;
-        }
-      }
+        newOrientation = currentDeviceOrientation;
    } else {
      if (!([RNSScreenWindowTraits maskFromOrientation:currentInterfaceOrientation] & orientationMask)) {
        // if both device orientation and interface orientation are not in the mask, we rotate to closest available
        // rotation from mask
        newOrientation = [RNSScreenWindowTraits defaultOrientationForOrientationMask:orientationMask];
      } else {
        // if the device orientation is not in the mask, but interface orientation is in the mask, do nothing
+          newOrientation = currentInterfaceOrientation;
      }
    }

I think the issue arises because both the actual device orientation and the new value are the same, so it does not attempt to change anything. By ensuring it set to the new value, even if it is the same as the device's orientation, the problem is resolved.

if this code is okay, I can make a pull request.

with original code

as-is.mp4

with patch

to-be.mp4

Steps to reproduce

  1. navigate to RePro with go to next button.
  2. rotate device to landscape.
  3. press landscape toggle button.
  4. rotate device to portrait.

Snack or a link to a repository

https://github.com/lifeisegg123/react-native-screen-rotation-repro

Screens version

3.32.0(repro), 3.30.1(real app)

React Native version

0.74.2(repro), 0.73.6(real app)

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    platform:iosIssue related to iOS part of the libraryrepro-providedA reproduction with a snack or repo is provided

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions