Dimensions reports wrong sizes on Chromebooks

Description

All values from Dimensions and useWindowDimensions are wrong when running Android apps on a Chromebook. The reported dimensions seem to match the size of the full Chromebook screen, not the actual window in which the app is running. As the app's window is resized, the reported dimensions do not change.

For now I was able to work around this issue by using useSafeAreaFrame from the react-native-safe-area-context package.

Version

0.67.2

Output of npx react-native info

System:
OS: macOS 12.0.1
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Memory: 79.57 MB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.15.1 - /usr/local/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.1.0 - /usr/local/bin/npm
Watchman: 2021.10.18.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
Android SDK:
API Levels: 21, 22, 23, 28, 29, 30
Build Tools: 21.1.2, 22.0.1, 23.0.1, 23.0.2, 26.0.2, 28.0.2, 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0
System Images: android-10 | Intel x86 Atom, android-15 | Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7322048
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_40 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.2 => 0.67.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

To setup a Chromebook for debugging, follow this guide: https://developer.android.com/topic/arc/development-environment. Afterwards, follow these steps:

1. Run an Android app built with RN on a Chromebook in debug mode
2. If the app fills the full screen, resize it to not fill the screen
3. Add const { height, width } = useWindowDimensions() into any component and log the height and width
4. Note that the height and width values are wrong

Bonus:

1. Install react-native-safe-area-context
2. Add const { height: fHeight, width: fWidth } = useSafeAreaFrame() into any component and log fHeight and fWidth
3. Note that the frame height and width are correct and do not match the values from useWindowDimensions

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

Repro is trivial if you have access to a Chromebook

首先，在可调整大小的 Chromebook 窗口中复现 Dimensions 和 useWindowDimensions 的行为，然后将它们报告的 frame 与 react-native-safe-area-context 中的 useSafeAreaFrame 进行比较。当报告的高度和宽度与实际应用窗口匹配，并在该窗口调整大小时更新，即表示完成。