How to hide the header of `createBottomTabNavigato

Question

All classes of my React Native code have their own header implemented using navigationOptions and I've created the bottomTabNavigator that has its own header overwriting the existing header and their functionality. How to hide the bottomTabNavigator header while own headers of classes work properly and accordingly?

I've used header: null and navigationOptions: { header: null, } in the stack of bottomTabNavigator and also header: { visible: false, } but it didn't work, as header is still visible.

import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import { Input, Icon, SearchBar, ListItem } from 'react-native-elements';

import Notification from './notification.js';
import Nearby from './nearby.js';
import Add from './add.js';

class MainScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = { search: '' };
  }

  static navigationOptions = {
    title: 'Contacts',
    headerLeft: null,
    headerRight: (
      <TouchableOpacity
        activeOpacity={0.6}
        style={{marginRight: 10,}}
        onPress={() => alert('Map is shown!')}>
        <Text style={{ color: '#3090C7', fontSize: 16 }}>View on Map</Text>
      </TouchableOpacity>
    ),
    headerTitleStyle: { width: '110%', textAlign: 'center', },
    headerStyle: { backgroundColor: '#E4E4E2' }
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#F3F3F3' }}>
        <SearchBar
          autoCorrect={false}
          placeholder='Search From Contacts'
          platform = 'ios'
          inputStyle = {styles.txt}
          onChangeText = {search => this.setState ({search})}
          value={this.state.search}
        />
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F3F3F3' }}>
          <Text> Successfully Logged-In </Text>
        </View>
      </View>
    );
  }
}

const HomeStack = createBottomTabNavigator({
  Home: { screen: MainScreen, header: { visible: false, } },
  Notification: { screen: Notification, header: null, },
  Nearby: { screen: Nearby, header: null, },
  Add: { screen: Add, header: null, },
});

const Home = createAppContainer(HomeStack);
export default Home;


const styles = StyleSheet.create({

  txt: {
    color: '#3090C7',
    fontSize: 18,
    fontWeight: '500',
  },

  btn: {
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
  },
})

I expect that header of bottomTabNavigator should be hidden and headers of each class should be visible.