Header not working in createSwitchNavigator - react-native

Question

My createSwitchNavigator has 3 pages: Login (no header). After login, it sends to the main page where I build my bottom, tab, stack, and drawer navigator.
const MainTabNavigator = createBottomTabNavigator({
Home,
Tenants,
WorkOrders: {
screen: WorkOrders,
navigationOptions: {
title: 'Work Orders'
}
}
}, {
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
if (routeName === 'WorkOrders') {
return {
headerTitle: 'Work Orders'
};
}
return {
headerTitle: routeName
};
}
});
const MainStackNavigator = createStackNavigator({
MainTabNavigator
}, {
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
)
};
}
});
const AppDrawerNavigator = createDrawerNavigator({
iRent: {
screen: MainStackNavigator
}
});
const AppSwitchNavigator = createSwitchNavigator({
Login: { screen: Login },
Main: { screen: AppDrawerNavigator },
TenantDetails: {
screen: TenantDetails,
navigationOptions: () => {
return {
headerTitle: 'Tenant'
};
}
},
});
const AppContainer = createAppContainer(AppSwitchNavigator);
From the tenants, I navigate to the TenantDetails page, but in the TenantDetails the header is not showing. Why?

Answer 1

The switch navigator doesn't have a header. You can use a stack navigator instead.
Sample Code:
const AppStackNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions:{
header: null // to override the header, because even if you don't specify the header title, a header will be shown.
}
},
Main: {
screen: AppDrawerNavigator,
navigationOptions:{
header: null
}
},
TenantDetails: {
screen: TenantDetails,
navigationOptions: {
headerTitle: 'Tenant',
headerLeft: null // If you want to override the back button, use this.
}
},
});
const AppContainer = createAppContainer(AppStackNavigator);