react / react/react-native

Dimensions reports wrong sizes on Chromebooks

Offen
#33,074 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

API: Dimensions Needs: Triage :mag: Never gets stale
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, das Verhalten von Dimensions und useWindowDimensions in einem größenveränderbaren Chromebook-Fenster zu reproduzieren, und vergleiche anschließend deren gemeldeten frame mit useSafeAreaFrame aus react-native-safe-area-context. Als erledigt gilt die Aufgabe, wenn die gemeldete Höhe und Breite mit dem tatsächlichen App-Fenster übereinstimmen und aktualisiert werden, sobald dieses Fenster in der Größe verändert wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
android, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.