useWindowDimensions returning wrong height

Question

I'm having problems with the useWindowDimensions hook in react-native returning a height that is way too small. The height it gives me is 36 pixels, while I know my actual screen height on the device I'm using to test is 568.

When I rotate my device to landscape orientation, the height corrects itself to the proper height.

I made a very simple expo project that logs the screen height when you press a button. Should be very quick to clone and get running if you have expo: https://github.com/PeterHSteele/window-dimensions-test . Some of the time (probably most of the time), the log is correct, but on repeated reloads it always shows the incorrect height eventually. Whether it's correct or not seems to be totally random as far as I can tell.

I have the same problem when I use react native community's useDimensions or the Dimensions API. Although, there is an older version of my project which doesn't seem to have the problem so maybe it's version compatibility issue:

Versions in that demo project that doesn't seem to work:

"expo": "~39.0.2"
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": ".63.3"

Versions in old version of my app that did work:

"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": ".63.3"

Answer 1

This might help you, import {Dimensions} from "react-native"

Dimensions will return height and width of window or screen whatever you select.

it would be,

const {height,width} = Dimensions.get("window")

or

const {height,width} = Dimensions.get("screen")