75

On my iOS emulator they both return the same values.

I understand the difference on a normal browser, but what is the difference on React Native? Are there scenarios where they return differente values?

raarts
  • 2,711
  • 4
  • 25
  • 45

3 Answers3

144

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:

  1. width/height with soft menu bar
  2. width/height without soft menu bar (so the actual entire screen)

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 bar
  • screen: reports entire screen's width/height

I didn't follow back this product pain about orientation changes on Android, so I don't know how rotating your screen affects this.

Michael Cheng
  • 9,644
  • 6
  • 46
  • 48
  • 4
    Thanks for the answer, and for showing me (in a subtle way), I could have found it myself ;-) – raarts Jul 07 '17 at 20:57
  • 7
    are `.measure()` calls relative to `window` or `screen`? – notgiorgi Oct 13 '17 at 11:34
  • 2
    Android supports split screen, where your window covers only part of the screen. There are also free-form windows on certain distributions and on chromeOS where the window size is smaller than the screen and can resize. You can specify in the manifest that your app does not support these features and then the OS will not allow it. Then on the normal fullscreen phone app there are the system bars. Wether they are included in the window or the window is shrunk to exclude them can be configured by the app itself. – RobCo Mar 20 '20 at 16:06
  • Bravo! What a historical answer! – Mohammad Jan 01 '21 at 12:02
22

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:

  1. If an Android device has the device navigation bar visible, the window height (or width when landscape) 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: enter image description here

  2. 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 and will give the width or height allocated for that app's window. 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:

    enter image description here

  3. 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: enter image description here

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.

user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
1

This what I know so far

For iOS -> window height = screen height

For android -> screen_height = window_height + navbar_height, window height is the visible viewport, you can divide this into two parts:

  • window height not includes status bar height (I found this apply on android versions devices 10 and above) so

    const window_height = Dimensions.get('window').height + 
                      StatusBar.currentHeight

  • window height includes status bar height (I found this apply on android versions devices below 10)

    const window_height = Dimensions.get('window').height

note:

  • If device has notch, that will be included in status bar height as far as I tested and as mentioned in react native docs.
  • What I mentioned above I tested on real devices but this won't be the same on emulator as far as I tested, emulator includes status bar height for versions like 30, 31,33 which are not the case as real devices.

I can summarize all this as below:

const WINDOW_HEIGHT =
  Platform.OS === 'android' && Platform.Version  >= 29   ? 
  Dimensions.get('window').height + StatusBar.currentHeight
    : Dimensions.get('window').height;

Hope this help someone.

A.A.
  • 81
  • 2