iOS: useWindowDimensions is not returning correct values after rotating when phone is locked.

[agusvazquez]

Description

Hello React Native team. I found a bug that useWindowDimensions hook returns old values after rotating the phone when it is locked.

Steps to reproduce

1. Create a default app with both portrait and landscape support.
2. Add into the code const { height, width } = useWindowDimensions();
3. console.log the values height and width, and proceed with the following.
4. Rotate the phone to landscape
5. Lock the phone
6. Rotate the phone to portrait
7. Unlock the phone.
8. Height and Width values are not updated.

Tested on iOS.

React Native Version

0.74.2

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 1.27 GB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.3.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 4.2.2
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.1
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.06.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native:
    installed: 0.74.2
    wanted: "*"
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

Start in portrait mode:
LOG  {"height": 812, "width": 375}
Rotated to landscape:
LOG  {"height": 375, "width": 812}
Rotated to portrait
LOG  {"height": 812, "width": 375}
Rotated to landscape
LOG  {"height": 375, "width": 812}
Locked screen
Rotated to portrait
Unlocked screen

Reproducer

https://github.com/agusvazquez/react-native-bug

Screenshots and Videos

No response

[cortinico]

Potentially a duplicate of one of those: https://github.com/facebook/react-native/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+useWindowDimensions