In react-navigation, how do I get the dimensions of the visible area between the header and TabBar?

Question

const viewableWindowHeight = Dimensions.get(\'window\').height - Header.HEIGHT - ???

How do I get the TabBar height? What if the iPhone is X? How can I take that into a

Answer 1

Try this:

import { Dimensions, Platform } from 'react-native';
import {
  getStatusBarHeight,
  getBottomSpace,
} from 'react-native-iphone-x-helper';
import { Header } from 'react-navigation';

const { height } = Dimensions.get('window');
  const stackHeaderHeight = Header.HEIGHT;

  /* Taken from source code of react-navigation-tabs*/
  const TAB_BAR_DEFAULT_HEIGHT = 49;
  const TAB_BAR_COMPACT_HEIGHT = 29;

  const TAB_BAR_HEIGHT = this.bottomTabBarRef._shouldUseHorizontalLabels() && !Platform.isPad
    ? TAB_BAR_COMPACT_HEIGHT
    : TAB_BAR_DEFAULT_HEIGHT;

  const marginTop = getStatusBarHeight() + stackHeaderHeight;
  const marginBottom = getBottomSpace() + TAB_BAR_HEIGHT;

  // < What you're after 
  const viewableWindowHight = height - marginTop - marginBottom; 

FOR TBBAR

Height is changing between these two values >> TAB_BAR_COMPACT_HEIGHT, and TAB_BAR_DEFAULT_HEIGHT, according to a condition determined by this method:

According to react-navigation-tabs source code.

OR

You could set initialLayout to your TabNavigatorConfig as mentioned in the documentation:

initialLayout - Optional object containing the initial height and width, can be passed to prevent the one frame delay in react-native-tab-view rendering.

FOR IPHONE-X

You can access statusBar height, bottomSpace in Iphone-X safely though react-native-iphone-x-helper npm module