How to hide the header from Tab navigation in react navigation?

Question

Problem:

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.

This is how my application looks like.

What I want to do is remove the circled header bar and green color circled line over the bottom tabs.

This is my app.js file.

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 (
      <Route></Route>
    );
  }
}

This is my route.js file.

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: () => (
          <Image source={require("../assets/invalid-name.png")} />
        )
      }
    },
    fines: {
      screen: FinesScreen,
      navigationOptions: {
        tabBarLabel: false,
        headerMode: "none",
        tabBarIcon: () => (
          <Image source={require("../assets/icon-service-fines.png")} />
        )
      }
    },
    location: {
      screen: LocationScreen,
      navigationOptions: {
        tabBarLabel: false,
        headerMode: "none",
        tabBarIcon: () => <Image source={require("../assets/shape.png")} />
      }
    },
    settings: {
      screen: SettingsScreen,
      navigationOptions: {
        tabBarLabel: false,
        headerMode: "none",
        tabBarIcon: () => <Image source={require("../assets/settings.png")} />
      }
    }
  },
  {
    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;

This is my home screen 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(
            <View>
                <Text>Home</Text>
            </View>
        )
    }
}

export default Home;

All other three-tab component code also similar to home.

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

Majid Aziz Majid Aziz · Accepted Answer · 2019-09-26T18:55:32

if your are using Stack navigator,in a createStackNavigator set headerMode to none i,econst Navigator = createStackNavigator( { Resume: Resume, Promotion: Promotion, }, { initialRouteName: 'Resume', headerMode: 'none', }, ); or in a class like your are using make it return function

How to hide the header from Tab navigation in react navigation?

1 Answers