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

Solution 1

If you want to calculate viewable window height directly, then you can use the onLayout callback, for eg, on tab navigation each page,

 render() {
      return (
      {
              var {x, y, width, height} = event.nativeEvent.layout;
              this.viewableWindowHeight=height;
              // use height as viewableWindowHeight
       }} />

    
     //Your scrollable contant
    
  
);

Solution 2

According to an issue in react navigation, you can't directly calculate the height of the bottom tab Bar. But if you wrap bottom tab bar into a view and then you can calculate that views height as bottom tab bar. Consider the example below

    import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import { BottomTabBar } from 'react-navigation';

class TabBarComponent extends Component {
  measure = () => {
    if (this.tabBar) {
      this.tabBar.measureInWindow(this.props.setTabMeasurement);
    }
  }

  render() {
    return (
       { this.tabBar = el; }}
        onLayout={this.measure}
      >
        
      
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    setTabMeasurement: (x, y, width, height) => dispatch({
      type: 'SET_TAB_MEASUREMENT',
      measurement: {
        x, y, width, height,
      },
    }),
  };
}

export default connect(null, mapDispatchToProps)(TabBarComponent);