6

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?

ThinkAndCode
  • 1,319
  • 3
  • 29
  • 60

1 Answers1

15

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

Community
  • 1
  • 1
Andrew
  • 26,706
  • 9
  • 85
  • 101
  • is there any way to know wether soft menu bar is enabled or not? – ThinkAndCode Jan 25 '19 at 12:21
  • 1
    Not currently in react-native, you would have to implement your own native module. That exposes the `getSystemUiVisibility` functionality allowing you to know whether or not the `SYSTEM_UI_FLAG_HIDE_NAVIGATION` had been set or not. If it hasn't been set then the soft menu bar would be visible. The problem with the `Dimensions` api is that calling it on `window` will calculate the height of screen minus the height of the soft menu bar. – Andrew Jan 25 '19 at 12:55
  • 1
    The following dependencies may be of some help https://github.com/Anthonyzou/react-native-full-screen https://github.com/Sunhat/react-native-extra-dimensions-android – Andrew Jan 25 '19 at 13:00
  • Awesome!. This is what I am looking for. May I know the file name that contains `SYSTEM_UI_FLAG_HIDE_NAVIGATION`? And Can I access this prop by using bridge between `native` and `react-native`? – ThinkAndCode Jan 28 '19 at 06:33