Dimension problems with recent Samsung One UI 4.0 (Android 12) update

[hernanmateo]

Description

We are receiving reports of dimensions problems with the new Samsung One UI 4.0 release on Android 12 devices. Some of our screens and images appears shifted to de left and with a gap between the Status Bar and the SafeAreView container.

Version

0.66.4

Output of npx react-native info

System: OS: macOS 12.0.1 CPU: (10) arm64 Apple M1 Max Memory: 120.05 MB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.13.1 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.1.2 - /usr/local/bin/npm Watchman: 2021.12.13.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0 Android SDK: API Levels: 30, 32 Build Tools: 30.0.2, 32.0.0 System Images: android-21 | Google APIs Intel x86 Atom, android-21 | Google APIs Intel x86 Atom_64, android-22 | Google APIs Intel x86 Atom_64, android-31 | Google Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7935034 Xcode: 13.1/13A1030d - /usr/bin/xcodebuild Languages: Java: 1.8.0_292 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.66.4 => 0.66.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

We can't reproduce this issue on the emulator since we are only receiving reports from our users with a Samsung s20 with One UI 4.0.

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

[trizin]

Same issue here :/

[zzorba]

Also have been getting reports of this related to the Android 12 update.

I previously had a local fix in place to deal with the window/screen scaling issues caused by One UI 3.0 (reported here: https://github.com/facebook/react-native/issues/30638), but the fix no longer seems to work. Removing this workaround also doesn't correct the layout issues.

[trizin]

I can reproduce the problem in One UI 4.0. The problem occurs when I watch a rewarded ad. The ad shows up zoomed in and when I close the ad the window scale of the device increases and everything is zoomed in. Reloading the app sets the window scale to the new value and the scale is normal again.

Dimensions.get("window").scale before watching an ad: 1.350000023841858 Dimensions.get("window").scale after watching an ad & reloading: 1.693750023841858

Dimensions.get("screen").scale: 1.693750023841858

[Shanghai-]

I'm getting reports of this issue from users as well, though I have not had the chance to get a repro myself yet. I will look into creating a minimum viable reproduction when I can. For now, +1 that this is a major quality of life issue on Samsung devices.

[Shanghai-]

I was able to get a repro using Samsung's Remote Test Lab feature on a Galaxy Tab 7 with Android 12, OneUI 4.0 installed. When testing with that, I noticed a few things:

1. Rotating the app (if your app allows rotation) fixes the issue for some components.
2. Backgrounding and then foregrounding the app again fully fixes the issue.
3. The issue does not reproduce if I use the same device with an earlier version of OneUI.

I'm going to write a ticket to Samsung developer support, as that's what ultimately ended up fixing #30638 too.

[fdelavra]

Did you guys find a solution ? I have the exact same problem and the scale factor solution make things worst

[Shanghai-]

It appears that OneUI 4.1 fixes the bad scaling behavior for my app. @hernanmateo @trizin , is the same true for you?

[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.