OneUI 4.0 provides incorrect size and scaling info to React Native apps

Mobile
1

When OneUI 4.0 rolled out, I started getting reports of broken app displays on newly-updated devices. I was able to confirm that the same build of my app on the same device works normally on OneUI 3, but lays out wrong after updating to OneUI 4. There is an issue in the React Native repo where several others have reported the same thing. A very similar bug happened when OneUI 3.0 was released, which was ultimately investigated and fixed by Samsung themselves.

I’m hoping we can get a resolution for this from Samsung as we did with the previous OneUI React Native breaker.

1 Like
2

Hello,

Welcome to the Samsung Developer Community.

Could you please share details about your issue along with the issue reproduction steps?
Is your app a game application?

Regards,
Jakia

3

Sure. I am a developer on the Xbox Game Pass mobile app, which is available in both the Samsung & Google Play stores. Repro steps are as simple as can be:

  1. Download the application from either store on to a device running OneUI 4.0 or later
  2. Open the application and observe the home page. Several elements are scaled incorrectly or oddly cut off. Devices running stock Android 12 without OneUI display correctly, and devices running earlier versions of OneUI also run correctly. The screenshot below shows the app on a Samsung Tab S7 running via Remote Test Lab:
    Screen Shot 2022-03-15 at 1.37.46 PM
    Screen Shot 2022-03-15 at 1.37.46 PM571×827 375 KB

This is a stock React Native app which uses React Native version 0.66.4. No custom native modules are used to lay out this screen; it is only using the scaling factor and screen width/height provided by the OS to React Native. From the top section, we can see that the actual screen width is larger than the reported screen width, which is causing those modules to cut off before the end of the screen. In the stretched image tiles, we can see the incorrect scaling factor, as the image assets which should be pixel-perfect don’t match the actual pixel measurements. As far as I have been able to find, these issues do not reproduce in any environment except OneUI 4.0.

Rotating the device (and thus the app) into landscape orientation and then back to portrait fixes some of these display issues. Backgrounding the app and then foregrounding it again fixes all of them. This implies that it’s an initialization issue with how OneUI 4.0 passes screen information to React Native. Please let me know what else I can provide to help investigate this. I have also filed a developer support ticket #39312 if that is useful for tracking.

1 Like