Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Navigation Bar height React-Native

Tags:

react-native

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.

like image 280
Skïp Avatar asked Sep 09 '17 02:09

Skïp


People also ask

How can get height of status bar in Android react native?

currentHeight : import {StatusBar} from 'react-native'; console. log('statusBarHeight: ', StatusBar. currentHeight);


1 Answers

  • 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;

enter image description here

like image 177
RY_ Zheng Avatar answered Sep 28 '22 12:09

RY_ Zheng