react / react/react-native

Dimensions reports wrong sizes on Chromebooks

Open
#33,074 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

API: Dimensions Needs: Triage :mag: Never gets stale
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:

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.