CODEWITHSUNDEEP
react-native
bilin
bilin

Reputation: 53

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

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.

Upvotes: 5

Views: 2128

Answers (3)

Adnan Kayık&#231;ı
Adnan Kayık&#231;ı

Reputation: 178

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;

Upvotes: 3

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

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.

Upvotes: 0

Ho&#224;ng Minh
Ho&#224;ng Minh

Reputation: 9

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

Upvotes: 0

Related Questions