CODEWITHSUNDEEP
react-nativeexporesolutionreact-native-stylesheet
deadmanone
deadmanone

Reputation: 35

How to get real screen resolution using Dimensions in react-native / expo and style the app?

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!

Upvotes: 2

Views: 9012

Answers (2)

ruth
ruth

Reputation: 1

we have to get the dimension first using the get api which is for example let windowWidth = Dimensions.get('window').width so after this we can use this variable(windoWidth) to use ternary condition or if as you wish and also we have to import dimension form expo-route too

Upvotes: 0

Ugur Eren
Ugur Eren

Reputation: 2214

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

Upvotes: 2

Related Questions