The tabs:

this.TabNav = TabNavigator( HOME_TABS_ROUTER, { initialRouteName: this.initialTab, tabBarPosition: 'bottom', tabBarComponent: TabView.TabBarBottom, order: [HOME_TABS.FIND_TEACHER_TAB, HOME_TABS.CHAT_TAB, HOME_TABS.DASHBOARD_TAB], lazyLoad: true, swipeEnabled: false, animationEnabled: false, tabBarOptions: { showIcon: true, style: { backgroundColor: Colors.headerBackground, height: normalizeValue(65), padding: normalizeValue(10) }, labelStyle: textStyles.footerLabel, activeTintColor: Colors.brandDefault, inactiveTintColor: Colors.defaultText } } );

A child stack nav:

this.StackNavigator = Router(
{
headerComponent: CustomHeader,
headerMode: 'screen',
initialRouteName: ROUTES.FIND_TEACHER_TAB,
navigationBarOptions: {
header: {
title: () => i18n.t('home.chatHeaderTitle'),
}
}
}
);

In order to hide a tabBar on one of the tabs, you can set this option to true. It's been recently documented. Is that something you were looking for?

@grabbou but how would you put the tabBar navigation option on a screen that is a part of the stacknavigator.

the stack nav is a child of the tabnavigators. that's why i was trying to find a round-about way to reach the "grandparent" navigator.

and i cant make the profile screen part of the tabnavigator because that would make it a tab. not really what i want. let me know if my question is too confusing, and i'll try to add more code.

I think I know what's the issue. I have one idea I'll try to send you tomorrow morning, maybe it works.

ok thanks

@grabbou does it involve redux?

@KabirKang, to do this you have to have the Parent navigation as the StackNavigation, and then have your TabNavigation as one of the Stack screens. Then by turning on/off the visible of each of the top Stack screens you get your desired outcome.

import ContactView from './ContactView'; // Detail view of a contact
import TabNavigation from './TabNavigation'; // Child TabNavigation that would call navigate('Contact', {contactId: 1});
import { StackNavigator } from 'react-navigation';

const TopNavigation = StackNavigator({
  Home: {
    screen: TabNavigation
  },
  Contact: {
    screen: ContactView,
    navigationOptions: {
      header: {
        visible: true
      }
    }
  }
}, {
  navigationOptions: {
    header: {
      visible: false
    }
  }
});

export default TopNavigation;

@dbhowell In your example you wrote header: {visible: true}. Did you mean tabBar? and would that work for tabbar?

Note that { visible: true} in this case hides the Stack toolbar, not the Tabbar.

Edit: I meant that {visible true} shows the Stack toolbar

@dbhowell So would the structure you suggest allow you to visit more screens within each tab or would each tab still need to have a nested stack navigator in each?

Also what does this do to the back button? If you were to switch tabs, and then click the Android back button, would it go back to the previous tab?

It does get confusing, so the best thing is to try it out and see what the result is.

@dbhowell that works fine with headers (if headerMode: "screen"), but that's probably because the header option is part of the stackNavigator.

tabBar: { visible: false } won't work since it's part of the parent TabNavigator.

I'm also interested in how to do this, as a typical use case for us would be to hide the tab bar on the second level navigation throughout the app.

Would be willing to help out implementing it, but need a few pointers on how to go about it. @grabbou, any ideas you have would be highly appreciated!

@grabbou any update on this one?