The screen object refers to the actual monitor window or desktop size. Note that if you have a multi-mon setup then you will have multiple screen objects. A window object belongs to a single screen , though not very window belongs to the same screen .
You can get the application window's width and height using the following code: const windowWidth = Dimensions. get('window').
To get the width and height of the window in React:Use the innerWidth and innerHeight properties on the window object. Add an event listener for the resize event in the useEffect hook. Keep changes to the width and height of the window in a state variable.
The documentation on Dimensions is quite poor (outstanding issue), so you'll have to dive into the code to understand what is going on. If you look at the source of Dimensions, you'll see this comment on line 47:
// Screen and window dimensions are different on android
If you trace back the history using blame, you'll find this commit on the relevant section of code pointing to this old issue which itself points to this issue about Dimensions reporting different screen heights.
I don't know enough about Android itself, but from what I can gather, it appears that Android can report back two different numbers:
A quick test on my Android device printing out these values and I was able to confirm that window
's height < screen
's height. So in all likelihood, this means:
window
: reports width/height without the soft menu barscreen
: reports entire screen's width/heightI didn't follow back this product pain about orientation changes on Android, so I don't know how rotating your screen affects this.
On Android, window
reflects the section of the total screen
made available for this app. In most cases, width and height for window
will be the same size or smaller than screen
.
There are at least 3 cases where screen
and window
may be different:
If an Android device has the device navigation bar visible, the window
height will be lower than screen
height by the height of the navigator. This is illustrated in this answer by RY Zheng which was linked to in an answer to this question which got deleted.
Example image of an Android system navigation bar from developer.android.com:
If the app is shown in Android's split screen/multi-window mode, with windows for two apps side by side, window
width or height will be lower than for screen
based on how much of the width or height is given to that screen. This would have been documented by this PR by ThisIsMissEm, but it was closed by Facebook because no-one from Facebook got around to reviewing it.
Example illustration of Android multi-window mode from developer.android.com:
If an Android device had "screen zoom" or "display size" setting changed in Accessibility settings while the app was open, the scale
, width
and height
properties for window
will update to reflect the zoom but the properties for screen
will not. If the app is restarted, the window
scale
property will match that of the screen.
If an element with fixed dimensions fails to scale on changing screen zoom without restarting the app, multiplying those dimensions by Dimensions.get('window').scale / Dimensions.get('screen').scale
may help.
Example image of the Display Size accessibility settings UI from androidpolice.com:
So, width and height for window
are usually the same size, or, sometimes on Android, smaller than screen
.
There's only one exception I'm aware of where window
may give values larger than screen
: if the app was opened with "display size" or "screen zoom" accessibility setting set high, then, this was set lower with the app still open. In this case the height and width will be greater and the scale
will be lower by the same ratio. I suspect this may be a bug in React Native rather than an intended behaviour and may change in a future release.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With