0

i am working on a react-native/expo app. yesterday i got to the styling stage and learned that

Dimensions.get('window').width

returns half of the real width of my devices (one android, one iPad), but the real width of an emulated android device. it looks as the physical devices run the app in some half/half resolution mode.

needles to say that it completely destroys my idea for styling the app as i use dynamic style building with EStyleSheet (react-native-extended-stylesheet), which depends on the values got by Dimensions and also things like maxWidth don't make a lot of sense, do they?

is there any method of forcing react-native/expo app to run in "full resolution"?

thanks!

deadmanone
  • 15
  • 1
  • 5

1 Answers1

2

If you're thinking about why you get something like 420 width while your device's screen resolution is 1080p, the answer is React Native uses density independent pixels as measurement unit. And the Dimensions api is also returns density independent pixels based values, not the screen resolution.

The only thing you should worry about is the status bar and the navigation bar. You can read these answers for a clear answer:

(Also React Native doesn't want you to use Dimensions api anymore. You can use useWindowDimensions because it changes when screen rotated etc.)

Height and Width - React Native Docs

Pixel density

Android Navigation Bar height React-Native

Get screen DPI in react native

useWindowDimensions - React Native Docs

Ugur Eren
  • 1,968
  • 2
  • 11
  • 21
  • "If you're coming from web, it can be confusing". Actually, web developers who have experience in CSS media queries should be familiar with the concept of pixel density. – matewka Jan 21 '21 at 15:18
  • 1
    @matewka Sorry, I thought some web developers might not be familiar with pixel density (like me) on css side. In any case, i've edited my answer for misunderstanding – Ugur Eren Jan 27 '21 at 10:59