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

Question

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.

Answer 1

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;