useWindowDimensions reported incorrect values after device orientation change

[kirgy]

Description

We're experiencing rendering issues between screen orientations. React Native's useWindowDimensions hook reports swapped dimensions. Attached below is a video demonstrating the problem and a standalone repo demonstrating this problem.

I believe this is a bug- advise or direction here would be greatly appreciated.

Previous mention of this issue in a past React Native version:
Expensify/App#2727

Fix of this or simular issue previously:
#34014
https://github.com/facebook/react-native/releases/tag/v0.68.4 (edited)

Screenshot demonstrating problem

Video demonstrating problem
https://user-images.githubusercontent.com/3931356/211653967-abee7f16-1f46-4a2d-ba65-3eeb5d93678d.mp4

Version

0.70.6

Output of npx react-native info

System:
OS: macOS 13.0.1
CPU: (10) arm64 Apple M1 Max
Memory: 512.05 MB / 64.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.12.1 - /usr/local/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.19.2 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /Users/christophermckirgan/.rvm/gems/ruby-2.7.5/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8609683
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.15 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.6 => 0.70.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. Run example code on a device/simulator
2. Tap one of the "play..." links at the top of the screen
3. Once navigated to the video screen and the video starts playing, rotate the device to landscape
4. Dismiss the video, which will return the user to the previous screen
5. Observe the incorrect reported height/width by react native
6. Observe the values reported by "react-native-safe-area-context" are correct

Snack, code example, screenshot, or link to a repository

https://github.com/bbcmaestro/bbcmaestro-app-video-poc

[kirgy]

@lbaldy this issue is similar to one raised and merged by yourself below. Do you have any insight you could share?

7d42106
#34014

[lbaldy]

The problem I fixed in my PR was that on iOS RCTDeviceInfo applied a 'rotate back' transition for a fraction of a second.

Do you still see the issue when you create a minimal reproduction scenario (excluding full screen video player).

The scenarios we were testing was bringing app to background/foreground, resizing on ipads split view etc.

I haven't tested the scenario when the app is transforming to landscape due to video playing in fullscreen. Also, I'd check if it isn't related to the video playing library you used, it probably is locking the orientation thus the delay in transforming back to portrait.

[kirgy]

After investigation into our main application we discovered that our root cause is performance issues caused by the NativeBase, which is well documented to have poor performance in versions 3.X.

We're unsure why this specific issue is occurring in the Snack provided above, but it's possible this is a qwerk of the react-native-video library mentioned. In a version of React Native 0.69.1 and React Native Video following commit 394c43165ae91bc8c4ab4ec1a70516de07046bb6 we're not experiencing this issue.

Closing this issue, as I'm confident it's not related to React Native.