Android Navigation Bar height React-Native

Question

I'm trying to get the Android Bottom bar working (the bar where you have the back button) height with RN. I did the following:

Dimensions.get('window').height

I get the height with this bar! Since it can or cannot be there and can be bigger or larger depending on the settings, this is a big issue for me.

Answer 1

• In iOS devices, screenHeight === windowHeight;
• In Android devices with bottom navigator bar, screen height === windowHeight + statusBarHeight + bottomNavigatorBarHeight ;
• In Android devices without bottom navigator bar, bottomNavigatorBarHeight is zero.

import {Dimensions, StatusBar} from 'react-native'; 

const SCREEN_HEIGHT = Dimensions.get('screen').height; // device height
const STATUS_BAR_HEIGHT = StatusBar.currentHeight || 24; 
const WINDOW_HEIGHT = Dimensions.get('window').height;

Answer 2

I use sheet below to do that:

// RN version:0.57.0
let deviceH = Dimensions.get('screen').height;
// the value returned does not include the bottom navigation bar, I am not sure why yours does.
let windowH = Dimensions.get('window').height;
let bottomNavBarH = deviceH - windowH;

Answer 3

import { Dimensions , StatusBar } from 'react-native';

const screenHeight = Dimensions.get('screen').height;
const windowHeight = Dimensions.get('window').height;
const navbarHeight = screenHeight - windowHeight + StatusBar.currentHeight;

Answer 4

There is a new library which works like a charm

https://github.com/ConnectyCube/react-native-android-navbar-height

import { Dimensions } from "react-native";
import { getNavigationBarHeight } from "react-native-android-navbar-height";

// ...

const scale = Dimensions.get('screen').scale;
const navigationBarHeight = await getNavigationBarHeight();
const result = navigationBarHeight / scale;

Answer 5

first we need import

import { Dimensions , StatusBar } from 'react-native';

WindowHeight = Dimensions.get('window').height . ScreenHeight = Dimensions.get('screen').height . StatusBarHeight = StatusBar.currentHeight

WindowHeight = ScreenHeight - NavigationBarHeight

when we want to implement float button in the bottom of our page set WindowHeight for that's height and set bottom : StatusBar.currentHeight for child element .

when we don't have NavigationBar , WindowHeight = ScreenHeight

Answer 6

First as mentioned in other answers using react native Dimensions API in Android the window height= screen height - (status bar height + navigation bar height)

After few hours of investigations I found that in some Android devices Dimensions API gives a wrong window height number.

the solution for is using [react-native-extra-dimensions-android][1]

[1]: https://github.com/Sunhat/react-native-extra-dimensions-android it give you the following information:

REAL_WINDOW_HEIGHT - Actual height of screen including system decor elements REAL_WINDOW_WIDTH - Actual width of screen including system decor elements STATUS_BAR_HEIGHT - Height of the status bar SOFT_MENU_BAR_HEIGHT - Height of the soft menu bar (supported on most new Android devices)

then you can calculate window height: REAL_WINDOW_HEIGHT -(STATUS_BAR_HEIGHT + SOFT_MENU_BAR_HEIGHT)

Answer 7

const navbarHeight = screenHeight - windowHeight + StatusBar.currentHeight;

In the landscape case, this is wrong and will get a negative number.

Answer 8

If you're referring to the status bar on top.

According to react native docs you can use

import { StatusBar } from 'react-native';

then in your code

StatusBar.currentHeight

UPDATE

You can get this using this module react-native-extra-dimensions-android

To detect if the soft android nav is present, you can use this module react-native-detect-navbar-android.