Dimensions reports wrong sizes on Chromebooks
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
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:
- Run an Android app built with RN on a Chromebook in debug mode
- If the app fills the full screen, resize it to not fill the screen
- Add
const { height, width } = useWindowDimensions()into any component and log the height and width - Note that the height and width values are wrong
Bonus:
- Install
react-native-safe-area-context - Add
const { height: fHeight, width: fWidth } = useSafeAreaFrame()into any component and log fHeight and fWidth - 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the Dimensions and useWindowDimensions behavior on a resizable Chromebook window, then compare their reported frame with useSafeAreaFrame from react-native-safe-area-context. Done means the reported height and width match the actual app window and update when that window is resized.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100