react-native: 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.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 4
- Comments: 17
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.
As for animations, it looks like applying an interpolation from
[0, 1]
to[0, scaleFactor]
to alltranslateX
andtranslateY
around the app fixes them. HerescaleFactor
is computed as in the @trizin comment:Nevertheless, this is a big and fragile hack. Looking forward for more details.
Important note re @luisnaranjo733’s device table: I can still reproduce this on build RP1A.200720.012.G988U1UEU1CTLB with a Samsung S20. Everything is fine on app launch, but rotating the phone into landscape mode (if the app supports it) induces the same scaling issue, and it remains after rotating back to portrait. So updated builds still don’t completely fix this issue, only mitigate it for portrait-only apps.
I don’t believe this applies just to values from
Dimensions
, but rather all views are scaled up. As can be seen in the original two screenshots, the unstyled text “Full width view” is larger in the first screenshot.In our app we have the same issue, that a)
Dimensions
returns incorrect values and that b) all elements have gotten larger. This seems to be limited to Samsung devices only and can usually be triggered by rotating the device a few times.What confuses me though, why aren’t more people experiencing this issue? Is this due to some obscure combination of libraries?
@trizin was the reproduction you included in your original issue part of a standalone repository? If so, could you upload and link it to this bug? I just created a new React Native in an attempt to get a minimum reproduction case myself, but I’m seeing correct scaling. No idea where this clean app differs from my production one.