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

Bắt đầu bằng cách tái hiện hành vi của Dimensions và useWindowDimensions trong một cửa sổ Chromebook có thể thay đổi kích thước, sau đó so sánh frame mà chúng báo cáo với useSafeAreaFrame từ react-native-safe-area-context. Hoàn tất khi chiều cao và chiều rộng được báo cáo khớp với cửa sổ ứng dụng thực tế và được cập nhật khi cửa sổ đó được thay đổi kích thước.