Get the height of soft nav bar in React Native

Issue

I am rendering content at the same height of the screen in React Native (Dimensions.get("window").height), however when the Android phone has a soft navbar, some of the content gets hidden like so:

On my phone, there is also a soft navbar, but it seems to function differently and does not cover the content, like so:

What is the difference between these 2 navbars? I just want to find the height of the black navbar if it exists and then I can solve my problem. I have searched extensively and there seems to be no clear answer. Maybe my terminology is wrong?

Solution

Don't use Dimensions.get("window").height, you can't safely calculate screen height from it. Different devices will have different navbars (obstructing and not, depending also on AndroidManifest), status bars, camera cutouts. React Native has SafeAreaView specifically for this purpose - you wrap your content in SafeAreaView which will provide paddings to make sure content doesn't overlap with those areas

Answered By - Max