Detecting the notch in more details in React Native

Question

I searched & checked these 2 links

https://github.com/ovr/react-native-status-bar-height

what I got , I can detect the notch height , but I'd like to know more details

how much height in top and in bottom

because my current device has a bottom notch , and IPhone X has notch in top & bottom with different height size in each side

using SafeAreraView did not help

Please check the attached image

Check this image

@tudor.gergely , when I used it and tested through my mobile device , the element was behind the bottom notch — Ahmed Mohsen, Mar 04 '20 at 10:22
what is the bottom notch you are talking about? can you show me a picture? — tudor.gergely, Mar 04 '20 at 10:57
@tudor.gergely , I updated my answer with the image - please check it — Ahmed Mohsen, Mar 04 '20 at 11:13
I see, that is not a notch, it is the navbar. Do you want to display something fullscreen? — tudor.gergely, Mar 04 '20 at 17:32

tudor.gergely · Accepted Answer · 2020-03-05T11:06:14.583

0

I don't think Expo 36 has the fullscreen option on android especially (hiding the bottom navbar). It will be available in the next release it seems: https://github.com/expo/expo/pull/7049

You should wait for the next expo release and try it then (instructions in the above PR):

in app.json
{
  androidNavigationBar: {
    visible: 'leanback' // or some other type you want
  }
}

edited Mar 05 '20 at 11:06

answered Mar 04 '20 at 10:10

tudor.gergely

4,800
1
16
22

Your answer helped , but till now it only support true and false - advanced features like 'leaseback' , 'immersive' and 'sticky' will help – Ahmed Mohsen Mar 08 '20 at 13:00

Detecting the notch in more details in React Native

1 Answers1