[Android] useWindowDimensions() hook behavior with PiP window on Android

[BhargaviAnnadevara]

Description

We have observed that the RN hook useWindowDimensions does not return the correct window dimensions on Android when there is a Picture-in-Picture (PiP) layout involved.

We have an app that displays some cards on the screen. The dimensions of the cards (width/height) are calculated based on the application window's size. So, the cards are automatically rendered/re-rendered when the useWindowDimensions hook detects changes in screen size, making it responsive.

However, when there is a PiP window that overlays on the main screen, the useWindowDimensions hook returns the dimensions of the PiP window instead of the main application window, which impacts the size of the cards, resulting in a cluttered layout.

Here is how it looks:

https://user-images.githubusercontent.com/44050820/182227733-f8ddc663-8f15-4473-962f-f5c4a1e3ad63.mp4

In the above scenario, the cards assume 100% width of the screen, which works as expected, as can be seen when the device orientation changes from portrait to landscape mode. But, when a PiP window is spawned, subsequent UI redraws pick up the incorrect dimensions (that of the PiP window) that alters the card layout. Same is the behaviour when useDimensions hook from the community React Native hooks library is used.

While looking at some of the open issues reported about the useWindowDimensions hook, we came across a comment that suggests the useSafeAreaFrame() hook from react-native-safe-area-context library as an alternative to using the underlying Dimensions API. And indeed, this issue does not occur when useWindowDimensions() is replaced with useSafeAreaFrame().

The cards scale according to screen size with useSafeAreaFrame():

https://user-images.githubusercontent.com/44050820/182231971-ce03616c-3fff-420d-87d5-bbc4e4371b32.mp4

While this can be a workaround, the issue with useWindowDimensions with PiP involved should be fixed.

Version

0.64.2

Output of npx react-native info

System:
    OS: macOS 12.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 17.85 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm
    Watchman: 2022.07.04.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 28, 29, 30, 31, 32
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 32.0.0
      System Images: android-31 | Intel x86 Atom_64, android-31 | Google APIs ARM 64 v8a, android-31 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.3 => 0.64.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Code repo for the sample RN app shown is linked below. Follow steps shown in the attached videos in the issue description above to repro the issue.

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

Link to code repository

[iway1]

Window height is iffy on Android, IMO don't trust it at all:

https://github.com/facebook/react-native/issues/23693

IDK if it's related, or if the react native team is ever going to fix this oneever. The best thing to do, IMO, is to just measure the root view yourself via onLayout and pass it via a context. It works on any device and is future proof.

[bryanltobing]

this is still an issue

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.