Dimensions.get('window').height returns wrong height on Android with notch #23693

onitzschke · 2019-02-28T11:36:19Z

🐛 Bug Report

Dimensions.get('window').height returns wrong height on Android with notch
Device: Android One Mi A2 Lite

Environment

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 1013.34 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.6.0 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.8.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 18, 23, 25, 26, 27, 28
Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.0, 28.0.0, 28.0.1, 28.0.2, 28.0.3
System Images: android-21 | Intel x86 Atom, android-21 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-25 | Google APIs ARM EABI v7a, android-27 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5264788
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: ^0.58.5 => 0.58.5
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

hramos · 2019-02-28T15:36:47Z

Can you provide more information? What value did the API return vs what was expected, for example.

onitzschke · 2019-02-28T16:53:27Z

@hramos
Xiaomi Mi A2 lite:
Dimensions.get('window').height) => 681
Dimensions.get('screen').height) => 760
StatusBar.currentHeight => 31
Google Pixel 3:
Dimensions.get('window').height) => 737.4545454545455
Dimensions.get('screen').height) => 785.4545454545455
StatusBar.currentHeight => 24

Expect Dimensions.get('window').height) === 705 on Xiaomi Mi A2 lite to get the same Layout as on Google Pixel 3.

grabbou · 2019-03-19T17:08:46Z

I believe this is related to issues with Dimensions.get('window') that I outlined here: #14887 (comment)

terryttsai · 2019-03-21T07:11:10Z

Hi I'm seeing the same issue. Dimensions.get('window').height returns the wrong dimensions for me as well on my Essential Phone.

Dimensions.get('screen').height: 853.3333333333334
Dimensions.get('window').height: 759.6666666666666

So I took a screenshot and measured out the pixels. I measured the soft menu bar to be 48 logical pixels. So I expect Dimensions.get('window').height to return 853.333 - 48 = 805.333 but instead I get 759.666. I don't subtract the status bar height because according to the docs, Dimensions.get('window').height should include the status bar height if the status bar is translucent, which it is.

ouabing · 2019-03-25T08:28:42Z

Same issue on Mi 8 Lite.

Martijnkerr · 2019-03-29T14:08:31Z

Issue is on the new Samsung s10 model too.

alexandrius · 2019-04-25T13:09:17Z

My workaround was to calculate root view height with onLayout.

andrey-shostik · 2019-05-12T01:04:43Z

same on redmi note 7

danilojpferreira · 2019-06-02T12:14:15Z

I fix this like this:
Import { Dimensions, StatusBar } from 'react-native';

static height = Platform.OS === 'android' ? Dimensions.get('screen').height - StatusBar.currentHeight : Dimensions.get('window').height;

franzwarning · 2019-06-10T16:09:11Z

True on Samsung Galaxy s10 model.

danilojpferreira · 2019-06-10T16:50:40Z

I fix this like this:
Import { Dimensions, StatusBar } from 'react-native';

static height = Platform.OS === 'android' ? Dimensions.get('screen').height - StatusBar.currentHeight : Dimensions.get('window').height;

I trying now fix (temporarily)like this:
Import { Dimensions, StatusBar } from 'react-native';

static height = Platform.OS === 'android' && Platform.Version > 26 ? Dimensions.get('screen').height - StatusBar.currentHeight : Dimensions.get('window').height;

Waiting for facebook/react-native#23693 to fix devices with notch

rahamin1 · 2019-08-07T06:04:14Z

Same problem with react-native 0.59.9, react 16.8.3

Dimensions.get('window').height returns:

598 on LG V20 (should be 640), StatusBar.currentHeight returns 24.
616 on Xiaomi Mi A1 (should be 640), StatusBar.currentHeight returns 24.

React native info:

React Native Environment Info:
System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 1.80 GB / 7.87 GB
Binaries:
Yarn: 1.16.0 - C:\Users\yossi\AppData\Roaming\npm\yarn.CMD
npm: 6.1.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5314842

dhruvdangi · 2019-08-21T06:53:14Z

Based on the phones I've tested, for devices giving wrong height, Dimensions.get('screen').height is not equal to Dimensions.get('window').height.
If StatusBar.currentHeight > 24, we consider that it's a device with a notch
Here is a temporary fix that I'm using:

      Platform.OS !== 'ios' && Dimensions.get('screen').height !== Dimensions.get('window').height && StatusBar.currentHeight > 24
        ? Dimensions.get('window').height - StatusBar.currentHeight
        : Dimensions.get('window').height

andrey-shostik · 2019-08-21T19:10:24Z

@dhruvdangi exist another case with bottom navigation bar, its can be hid or showed.

alexandrius · 2019-08-21T20:40:38Z

Just create something like this in app render function. There's small startup speed impact but solves the height issue

if (this.state.windowHeight === 0) {
    return <View onLayout={({ nativeEvent }) => {
        const windowHeight = nativeEvent.layout.height;
        Defaults.windowHeight = windowHeight;
        this.setState({ windowHeight })
    }} style={{ flex: 1 }} />
}

jakobinn · 2019-09-14T22:04:52Z

You can use the following package to fix this issue:
https://github.com/Sunhat/react-native-extra-dimensions-android

stale · 2019-12-13T22:08:00Z

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

paradite · 2022-02-10T18:28:36Z

@valeriik I tried your solution, it worked on iPhone 8 simulator, but not Samsung S21 (real device).
~~Evidently my solution is also not correct, so I will try on other devices to test further.~~
Maybe you can run your tests again, see my comment below:

paradite · 2022-02-10T18:36:42Z

@valeriik actually, I noticed that you used initialWindowMetrics.insets and initialWindowMetrics.frame instead of hooks useSafeAreaInsets() and useSafeAreaFrame().

I tested them and they have different values for Android:
Android:

initialWindowMetrics Object {
  "frame": Object {
    "height": 752,
    "width": 360,
    "x": 0,
    "y": 0,
  },
  "insets": Object {
    "bottom": 48,
    "left": 0,
    "right": 0,
    "top": 26.66666603088379,
  },
}
frame Object {
  "height": 752,
  "width": 360,
  "x": 0,
  "y": 0,
}
insets Object {
  "bottom": 0, // different here
  "left": 0,
  "right": 0,
  "top": 26.66666603088379,
}

ios:

initialWindowMetrics Object {
  "frame": Object {
    "height": 667,
    "width": 375,
    "x": 0,
    "y": 0,
  },
  "insets": Object {
    "bottom": 0,
    "left": 0,
    "right": 0,
    "top": 20,
  },
}
frame Object {
  "height": 667,
  "width": 375,
  "x": 0,
  "y": 0,
}
insets Object {
  "bottom": 0,
  "left": 0,
  "right": 0,
  "top": 20,
}

njho · 2022-02-25T23:11:50Z

Subscribed. @valeriik and others thanks for the research

kotsh23 · 2022-04-18T11:44:03Z

const [itemHeight, setItemHeight] = useState(
    Platform.OS === "android" && Platform.Version < 30
      ? Dimensions.get("window").height - StatusBar.currentHeight
      : Dimensions.get("window").height
  );

cristianoccazinsp · 2022-04-18T21:37:17Z

Why is this closed? StatusBar.currentHeight still gives wrong values on various Android devices (specifically, those with Notch). It's basically impossible to use Dimensions and StatusBar.currentHeight to determine height of usable screen space.

Further, the react-native rendering engine also has the same calculation issues. On some devices, trying to get something auto adjust its height up to 100% will end up rendered outside the screen on some devices.

yahacom · 2022-06-20T07:53:08Z

Encountered same issue.
Tested on two phones - both Android API 31.
And Dimensions.get('window').height returns different values. In one case it include value of StatusBar.currentHeight (and this value cover full screen height), in another - doesn't (and I have empty space on bottom). And here no any flags to determine relations of this behaviour.

lucasdallabeneta · 2022-06-20T13:27:03Z

only solution that worked for me:

import { Platform } from 'react-native'
import { initialWindowMetrics } from 'react-native-safe-area-context'

const USABLE_HEIGHT =
            Platform.OS === 'ios'
                ? initialWindowMetrics.frame.height -
                  initialWindowMetrics.insets.bottom
                : initialWindowMetrics.frame.height;

worked on: all iphones, samsung galaxy s20fe, samsung galaxy a9, redmi note 7 and motorola moto g5.

julianklumpers · 2022-07-08T01:18:00Z

if you do not want to install a library to get the insets of SafeAreaView you can use the following.

import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry'

export const getScreenMetricsForSafeArea = () => {
  const { frame, insets } = TurboModuleRegistry.get('RNCSafeAreaContext').initialWindowMetrics
  const { top, left, right, bottom } = insets

  return { width: frame.width - (right + left), height: frame.height - (bottom + top) }
}

InceptSolutions · 2022-07-17T22:28:47Z

An easy fix that worked for us on both Samsung S7 and Samsung A31 is the following:

const height = Dimensions.get("window").height;
const isSame = height == Dimensions.get("screen").height;
const correctHeight = isSame ? height - StatusBar.currentHeight : height;

lfjnascimento · 2022-07-26T20:32:46Z

depending on the problem this might help, take the dimensions of the screen and not the window.

import { Dimensions } from 'react-native';
const { height: screenHeight, width: screenWidth } = Dimensions.get('screen');

iway1-hstk · 2022-08-07T20:50:53Z

Right now the best solution is just measure the screen yourself, and pass into a context:

const Context = React.createContext();

export default function MyApp() {
    const [appHeight, setAppHeight] = useState(Dimensions.get('window').height);
    return (
        <Context.Provider value={appHeight}>
            <View style={{flex: 1}} onLayout={(e)=>setAppHeight(e.nativeEvent.layout.height)}>
                <RestOfApp/>
            </View>
        </Context.Provider>
    )
}

export function useActualHeight() {
    return useContext(Context);
}

giorgiobeggiora · 2022-12-28T23:14:58Z

why the hell was this closed? the issue is not fixed, and it's super important

sirmong · 2022-12-29T13:34:41Z

Still experiencing issues when trying to calculate available space

AhmedAbuelenin · 2023-01-25T12:52:52Z

After some testing on different android versions and different devices this what I got.
from android version 10 and upwards window height is not including status bar height (fyi status bar height is including notch if exist as far as I tested)
below version 10 window height is including status bar height
we can summarize the above as like:

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

note: WINDOW_HEIGHT on emulator includes status bar height I tested this for a few versions 30, 31, 33 which is different from the real devices as mentioned above.

Hope this help someone.

eagleblack · 2023-03-11T06:55:03Z

I a still facing this issue

Colossus · 2023-05-12T09:56:51Z

This is still not working. Window and screen heights return almost random values and are close to useless

Colossus · 2023-05-12T10:02:30Z

@iway1-hstk immediate Nobel prize for this solution

WilcoBreedt · 2023-06-08T20:08:28Z

Resolved the issue with the following code, which seems to be working well

Custom hook with a context

import React, { useContext, useState } from 'react';
import { Dimensions, SafeAreaView, StyleSheet, View } from 'react-native';

const ScreenDimensionsContext = React.createContext(null);

export const useDimensions = () => {
  const dimensions = useContext(ScreenDimensionsContext);
  return dimensions;
};

export const ScreenDimensionsProvider = ({ children, onDimensions }) => {
  const [dimensions, setDimensions] = useState(Dimensions.get('window'));
  const onLayout = (layout) => {
    if (onDimensions) {
      onDimensions(layout);
    }
    setDimensions(layout);
  };
  return (
    <ScreenDimensionsContext.Provider value={dimensions}>
      <SafeAreaView style={styles.flex}>
        <View
          style={styles.flex}
          onLayout={(e) => onLayout(e.nativeEvent.layout)}>
          {children}
        </View>
      </SafeAreaView>
    </ScreenDimensionsContext.Provider>
  );
};

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
});

Use the context anywhere in your app and wrap your App.js in the Context
App.js

const App = () => {
const [height, setHeight] = useState();
return (
 <ScreenDimensionsProvider onDimensions={layout => setHeight(layout.height)}>
    <View style={{height}}>
        <RestOfApp />
    </View>
 </ScreenDimensionsProvider>
)

Anywhere else in your app

const RandomComponent = () => {
    const { height } = useDimensions();
    return <View style={{height}} />
}

sipotat · 2023-07-13T13:30:55Z

{layout => setHeight(layout.height)}>

Nice implementation. I just won't have SafeAreaView there, as it might be required in some screens and not in others.

Chasty · 2023-08-04T16:51:17Z

@iway1-hstk Amazing!!

deniska69 · 2024-04-18T16:34:56Z

Right now the best solution is just measure the screen yourself, and pass into a context:

const Context = React.createContext();

export default function MyApp() {
    const [appHeight, setAppHeight] = useState(Dimensions.get('window').height);
    return (
        <Context.Provider value={appHeight}>
            <View style={{flex: 1}} onLayout={(e)=>setAppHeight(e.nativeEvent.layout.height)}>
                <RestOfApp/>
            </View>
        </Context.Provider>
    )
}

export function useActualHeight() {
    return useContext(Context);
}

great solution! How else can I get this value NOT through a hook...

onitzschke added the Type: Bug Report label Feb 28, 2019

react-native-bot added API: Dimensions Platform: Android Android applications. labels Feb 28, 2019

hramos added Resolution: Needs More Information labels Feb 28, 2019

hramos removed Resolution: Needs More Information labels Feb 28, 2019

onitzschke mentioned this issue Mar 1, 2019

fix #21: Add support for Android react-navigation/react-native-safe-area-view#52

Closed

cpojer mentioned this issue Mar 19, 2019

RN Issue Triage Group 4 #24031

Closed

react-native-bot added the Bug label May 4, 2019

hramos removed the Type: Bug Report label May 6, 2019

keith-kurak mentioned this issue Jul 8, 2019

How to use with Expo? FaridSafi/react-native-gifted-chat#461

Closed

fhelwanger added a commit to Secullum/secullum-react-native-ui that referenced this issue Jul 10, 2019

Fix KeyboardAvoidingView on devices with virtual buttons

1cad365

Waiting for facebook/react-native#23693 to fix devices with notch

jorge-o-murillo mentioned this issue Apr 27, 2022

Android Dropdown gap AdelRedaa97/react-native-select-dropdown#52

Closed

iway1 mentioned this issue Aug 9, 2022

[Android] useWindowDimensions() hook behavior with PiP window on Android #34324

Closed

Parveshdhull mentioned this issue Dec 23, 2022

"Jump to" panel overlaps tabs (Xiaomi Mi 9T Pro) status-im/status-mobile#14633

Closed

situchan mentioned this issue Jan 27, 2023

[HOLD for payment 2023-02-10] [$1000] Android - Payment- White line appears when clicking on "Add Payment method" button Expensify/App#14563

Closed

1 task

ammarahm-ed mentioned this issue Feb 13, 2023

Additional space added in modal ammarahm-ed/react-native-actions-sheet#222

Closed

iway1 mentioned this issue Mar 11, 2023

Dimensions.get('window').height still returns wrong height on Android with notch #36447

Closed

CatMac228 mentioned this issue Apr 19, 2023

SVA-258/NativeBaseProjectList Scottish-Tech-Army/Volunteer-app#131

Merged

12 tasks

OmarBasem mentioned this issue May 9, 2023

Incorrect keyboard-height on Android status-im/status-mobile#15758

Closed

finnmerlett mentioned this issue Jul 13, 2023

Is this package really not needed anymore? (And why?) Sunhat/react-native-extra-dimensions-android#71

Open

Dimensions.get('window').height returns wrong height on Android with notch #23693

Dimensions.get('window').height returns wrong height on Android with notch #23693

Comments

onitzschke commented Feb 28, 2019

🐛 Bug Report

Environment

hramos commented Feb 28, 2019

onitzschke commented Feb 28, 2019

grabbou commented Mar 19, 2019

terryttsai commented Mar 21, 2019 • edited Loading

ouabing commented Mar 25, 2019

Martijnkerr commented Mar 29, 2019

alexandrius commented Apr 25, 2019

andrey-shostik commented May 12, 2019

danilojpferreira commented Jun 2, 2019

franzwarning commented Jun 10, 2019

danilojpferreira commented Jun 10, 2019

rahamin1 commented Aug 7, 2019

Dimensions.get('window').height returns:

React native info:

dhruvdangi commented Aug 21, 2019 • edited Loading

andrey-shostik commented Aug 21, 2019

alexandrius commented Aug 21, 2019 • edited Loading

jakobinn commented Sep 14, 2019

stale bot commented Dec 13, 2019

paradite commented Feb 10, 2022 • edited Loading

paradite commented Feb 10, 2022

njho commented Feb 25, 2022

kotsh23 commented Apr 18, 2022 • edited Loading

cristianoccazinsp commented Apr 18, 2022

yahacom commented Jun 20, 2022

lucasdallabeneta commented Jun 20, 2022

julianklumpers commented Jul 8, 2022

InceptSolutions commented Jul 17, 2022

lfjnascimento commented Jul 26, 2022

iway1-hstk commented Aug 7, 2022 • edited Loading

giorgiobeggiora commented Dec 28, 2022 • edited Loading

sirmong commented Dec 29, 2022

AhmedAbuelenin commented Jan 25, 2023

eagleblack commented Mar 11, 2023

Colossus commented May 12, 2023

Colossus commented May 12, 2023

WilcoBreedt commented Jun 8, 2023 • edited Loading

sipotat commented Jul 13, 2023

Chasty commented Aug 4, 2023

deniska69 commented Apr 18, 2024 • edited Loading

terryttsai commented Mar 21, 2019 •

edited

Loading

dhruvdangi commented Aug 21, 2019 •

edited

Loading

alexandrius commented Aug 21, 2019 •

edited

Loading

paradite commented Feb 10, 2022 •

edited

Loading

kotsh23 commented Apr 18, 2022 •

edited

Loading

iway1-hstk commented Aug 7, 2022 •

edited

Loading

giorgiobeggiora commented Dec 28, 2022 •

edited

Loading

WilcoBreedt commented Jun 8, 2023 •

edited

Loading

deniska69 commented Apr 18, 2024 •

edited

Loading