React Native Samsung One UI 3.0 Dimensions screen width not returning correct value

user_14454684 0
Viewed 980

I'm using react native 0.63.4 and I use <View style={{flex: 1}}> for the root element of every page.

I use Dimensions.get("screen").width to make the elements responsive. For some reason the value of screen width is not correct but a larger value. Thus every element on the screen gets larger.

Expected behavior: Expected image.
Issue: issue image

I've tested with many devices. I see this problem only on Galaxy S20 Ultra and S10 Lite. The issue occurred after installing the Android 11 & OneUi 3.0 update.

Code:

const {height: screen_height, width: screen_width} = Dimensions.get('screen');

<View style={{ flex: 1,justifyContent:"center",alignItems:"center" }}>
  <Text style={{fontSize:screen_width/15}}>text</Text>
</View>;

What could cause the problem?

UPDATE: The issue appears only when the device's screen resolution is set to 3200x1440. The app works as expected on lower resolutions.

react-native
3 Answers

Replace this code:

const {height: screen_height, width: screen_width} = Dimensions.get('screen');

With this:

let scale = Dimensions.get('screen').scale / Dimensions.get('window').scale;
const screen_height =  Dimensions.get('window').height * scale;
const screen_width =  Dimensions.get('window').width * scale;
user_96314940

try Dimensions.get("window").height and Dimensions.get("window").width can resolve your case.

user_83809270

I think your text components are overlapping the actual viewport. Could you add the code which renders the actual (text) content?

And if it causes the issue, then you could try to wrap it with flexWrap: 'wrap' style property.

user_2128780
Related