React-Native : How to get the complete height of the device when 'Full Screen Mode' is enabled?

Question

I am taking the Window height by using Dimensions.get('window').height and rendering content over screen. But when Full Screen Mode is enabled hardware buttons are hidden which results to an extra space over the screen. But still Dimensions.get('window').height is giving as same height as previous(when Full Screen Mode was disabled). Eventually screen ends up with an extra space.

Is there any way in react-native to render the content according to Full Screen Mode?

And, How to get the complete height of the device when 'Full Screen Mode' is enabled?

Answer 1

There is a difference between window and screen in the Dimensions api.

For the most part Dimensions.get('window').height !== Dimensions.get('screen').height

This SO answer does a great job of describing the difference https://stackoverflow.com/a/44979327/5508175

tl;dr

• window: reports width/height without the soft menu bar
• screen: reports entire screen's width/height

I think you want to use screen rather than window

Alternatively in your styling you can try something like

{ top: 0, bottom: 0, left: 0, right: 0 }

and it should cover the whole screen