software-mansion / software-mansion/react-native-screens

Orientation is not locked as intended

Open
#2,197 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

platform:ios repro-provided
Dominant language
TypeScript
Stars
3.7k
Forks
714
Avg merge
2d 23h
Merged PRs (30d)
71

Description

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

https://github.com/software-mansion/react-native-screens/assets/58962402/96a82a9e-9c13-4caf-83d5-a72012fec137

with patch

https://github.com/software-mansion/react-native-screens/assets/58962402/34425e87-3b5f-4a12-8bbc-3837ea4409fd

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the orientation handling in RNSScreenWindowTraits.mm and reproduce the issue using the linked React Native screen-rotation repro. Compare the original behavior with the proposed change, then verify that setting landscape while already in landscape locks correctly and that the listed portrait rotation flow still behaves as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, objective-c, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.