One UI 3.0 Dimensions Screen Width is not returning the correct value

Description

Hello, Two users recently reported that the screen is too big and doesn’t fit on Samsung Galaxy S20 Ultra devices using Android 11.

React Native version:

System:
    OS: Linux 5.8 Pop!_OS 20.10
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
    Memory: 8.12 GB / 15.64 GB
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 12.18.2 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.8 - /usr/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: javac 14 - /usr/lib/jvm/jdk-14/bin/javac
    Python: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
  npmGlobalPackages:
    *react-native*: Not Found

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

I use Dimensions.get("window").width make the elements on screen responsive. In One UI 3.0, when the device resolution is set to WQHD, elements are being scaled.

Code:

import React from 'react';
import {View, Text, Dimensions} from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
      window: Dimensions.get('window'),
      screen: Dimensions.get('screen'),
    };
  }
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <View
          style={{
            height: 50,
            width: this.state.width,
            backgroundColor: 'green',
          }}>
          <Text>Full width view</Text>
        </View>
        <Text style={{fontSize: this.state.width / 15, textAlign: 'center'}}>
          This is a text 15
        </Text>
        <Text style={{fontSize: this.state.width / 13, textAlign: 'center'}}>
          This is a text 13
        </Text>
        <Text style={{textAlign: 'center'}}>
          screen:{JSON.stringify(this.state.screen)}
        </Text>
        <Text style={{textAlign: 'center'}}>
          window:{JSON.stringify(this.state.window)}
        </Text>
      </View>
    );
  }
}

Screenshots: S20 Ultra Android 11 WQHD S20 Ultra Android 11 FHD

I hope the issue is clear.

[richtea99]

We had a similar incorrect resolution issue but in an Android app. It may be worth going direct to Samsung Developer support for help. We were impressed - normally big companies like Samsung aren’t interested, so kudos to them for listening.

In case there’s a connection, our feedback from Samsung dev support is that our specific issue (which is just the same as the above - a 1080 wide screen returning a resolution of 810, and only on Android 11 One UI 3.0) is due to be fixed in the OS in software version EUBA or EUB9. However no date was confirmed - but 1-2 months is the estimate.

[nkrkv]

As for animations, it looks like applying an interpolation from [0, 1] to [0, scaleFactor] to all translateX and translateY around the app fixes them. Here scaleFactor is computed as in the @trizin comment:

let scaleFactor = Dimensions.get("screen").scale / Dimensions.get("window").scale;

Nevertheless, this is a big and fragile hack. Looking forward for more details.