React Native: createBottomTabNavigator header: nul

Question

My App.js looks like this which has StackNavigator

export default class App extends Component {
  render() {
    return (
      <AppStackNavigator />
    );
  }
}


const AppStackNavigator = new StackNavigator({

  LoginScreen: { screen: LoginScreen },
  DashboardScreen: { screen: DashboardScreen },
  ImportantNumberScreen: { screen: ImportantNumberScreen },
  EventListScreen: { screen: EventListScreen },
});

I have to create bottom navigation so i am using react-navigation component createBottomTabNavigator where i want to set header as null so i tried following code

static navigationOptions = {
        header: null,//works with createStackNavigator but not with createBottomTabNavigator
    }

Also tried

export default createBottomTabNavigator({
    HomeScreen: {screen : HomeScreen,navigationOptions:{header:null}},
    GuestCardScreen: GuestCardScreen,
    MoreScreen: MoreScreen,
    StatementScreen: StatementScreen,
});

but unfortunately these code not working with createBottomTabNavigator

I am using

"react-navigation": "^2.17.0"

Node version v10.11.0

npm version v6.4.1

Answer 1

TabBar

const MainAppTab = createBottomTabNavigator({
[HOME_STACK]: {
  screen: Home,
},
[NOTIFACATION]: NotificationContainer,
[STINGER]: StingerContainer,
[MESSAGE]: MessageContainer,
[USER_PROFILE]: ProfileContainer
},
},
{
   // settings
});

Main Navigator

const AppNavigator = createStackNavigator({
  [WELCOME]: {
screen: WelcomeContainer,
},
    // other screens
[MAIN]: {
screen: MainAppTab,
navigationOptions: {
    header: null, <----- this will help you
},
},
}, {
    initialRouteName: WELCOME,
},
});

Answer 2

you should set tab bar options like below:

const TabNav = createBottomTabNavigator({
  HomeScreen: {screen : HomeScreen},
  GuestCardScreen: GuestCardScreen,
  MoreScreen: MoreScreen,
  StatementScreen: StatementScreen,
});

// just for hide tabbar header
const StackNavForTabs = createStackNavigator({
  tab: TabNav,
}, {
  header: null,
  headerMode: 'none'
});

//your main stack navigator
export default AppStack = createStackNavigator({
 otherStackRoutes: OtherRoute,
 tabStack: StackNavForTabs,
});