What's the difference between 'window' and 'screen' in the Dimensions API

Question

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

Answer 1

On Android, window reflects the section of the total screen made available for this app. There are at least 3 cases where screen and window may be different:

• If an Android device has the device navigation bar open, 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.

• 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 is "documented" in a PR by ThisIsMissEm on the react-native documentation that was closed becuase no-one from Facebook reviewed it.

• 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.

Width and height for window will be the same size or smaller than screen; with one exception: if the app was opened with "display size" or "screen zoom" 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.