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!
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
Android Navigation Bar height React-Native