title: How to hide the header from Tab navigation in react navigation?
body: <p><strong>Problem:</strong></p>
  
  <p>I have created a react native application. There I am using react native stack navigator with bottom tab navigator. This is how It looks like.</p>
  
  <p>This is how my application looks like.
  <a href="https://i.stack.imgur.com/u06Z5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u06Z5.png" alt="enter image description here"></a> </p>
  
  <p>What I want to do is remove the circled header bar and green color circled line over the bottom tabs. </p>
  
  <p>This is my app.js file.</p>
  
  <pre><code>import React from "react";
  import Login from "./src/components/Login/Login";
  import Register from "./src/components/Register/Register";
  import Route from './src/route'
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;Route&gt;&lt;/Route&gt;
      );
    }
  }
  </code></pre>
  
  <p>This is my route.js file.</p>
  
  <pre><code>import React, { Component } from "react";
  import { createAppContainer } from "react-navigation";
  // import { createStackNavigator } from "react-navigation";
  import { createBottomTabNavigator } from "react-navigation-tabs";
  import { createStackNavigator } from "react-navigation-stack";
  import IonIcon from "react-native-vector-icons/Ionicons";
  import { Image } from "react-native";
  
  import LoginScreen from "./components/Login/Login";
  import HomeScreen from "./components/Home/Home";
  import FinesScreen from "./components/Fines/Fines";
  import LocationScreen from "./components/Location/Location";
  import SettingsScreen from "./components/Settings/Settings";
  
  const TabNav = createBottomTabNavigator(
    {
      home: {
        screen: HomeScreen,
  
        navigationOptions: {
          tabBarLabel: false,
          tabBarIcon: () =&gt; (
            &lt;Image source={require("../assets/invalid-name.png")} /&gt;
          )
        }
      },
      fines: {
        screen: FinesScreen,
        navigationOptions: {
          tabBarLabel: false,
          headerMode: "none",
          tabBarIcon: () =&gt; (
            &lt;Image source={require("../assets/icon-service-fines.png")} /&gt;
          )
        }
      },
      location: {
        screen: LocationScreen,
        navigationOptions: {
          tabBarLabel: false,
          headerMode: "none",
          tabBarIcon: () =&gt; &lt;Image source={require("../assets/shape.png")} /&gt;
        }
      },
      settings: {
        screen: SettingsScreen,
        navigationOptions: {
          tabBarLabel: false,
          headerMode: "none",
          tabBarIcon: () =&gt; &lt;Image source={require("../assets/settings.png")} /&gt;
        }
      }
    },
    {
      tabBarPosition: "bottom",
      swipeEnabled: true,
      animationEnabled: true,
      tabBarOptions: {
        activeTintColor: "#FFFFFF",
        inactiveTintColor: "#F8F8F8",
        style: {
          backgroundColor: "#fffff"
        },
        indicatorStyle: {
          borderBottomColor: "#87B56A",
          borderBottomWidth: 2
        }
      }
    }
  );
  
  const MainNavigator = createStackNavigator(
    {
      login: { screen: LoginScreen },
      tab: { screen: TabNav }
    },
    {
      initialRouteName: "login"
    },
    (navigationOptions = {
      headerMode: "none"
    })
  );
  
  const AppContainer = createAppContainer(MainNavigator);
  
  export default AppContainer;
  </code></pre>
  
  <p>This is my home screen code.</p>
  
  <pre><code>import React, { Component } from "react";
  
  import {
    StyleSheet,
    KeyboardAvoidingView,
    View,
    ActivityIndicator,
    TouchableOpacity,
    TextInput,
    Text,
    Image,
    ScrollView
  } from "react-native";
  
  
  class Home extends Component{
      static navigationOptions = {
          header: null
      };
  
      render(){
          return(
              &lt;View&gt;
                  &lt;Text&gt;Home&lt;/Text&gt;
              &lt;/View&gt;
          )
      }
  }
  
  export default Home;
  </code></pre>
  
  <p>All other three-tab component code also similar to home. </p>
  
  <p>I looked for a solution to this problem mush but I was unable to do so. So can someone help me to solve this issue? Thank you </p>