Combine createStackNavigator and createBottomTabNavigator?

Question

Scenario :

• I have an app working with three tabs for navigation (School, Admin, Family);
• I am now trying to add in other screens, that will not have corresponding tabs. These screens will be navigated to using something like this.props.navigation.navigate('ChatScreen')

Issue - With my past solution, any time I added a screen it would add a tab for that screen.

Todo :

• I would like to have the tabs in my navigation stack, as well as other normal (not-tab) screens.

  • I would like both the tabs and the header to be persistent

• I have been unsuccessful at combining both, and have tried many variations of the code below.

Tried Code :

const School = createStackNavigator({
  School: { 
  screen: SchoolScreen, 
  navigationOptions: {
  headerTitle: <CustomHeaderTitle screen='school'/>
    }
  }
 });

const Admin = createStackNavigator(
  { Admin: {
  screen: AdminScreen,
  navigationOptions: {
    headerTitle: <CustomHeaderTitle screen='admin' />
      }
    }
  });

 const Family = createStackNavigator(
  {
   Family: {
      screen: FamilyScreen,
      navigationOptions: {
      headerLeft: null,
      headerTitle: <CustomHeaderTitle screen='family' />
      }
     }
    }
);

const ChatStack = createStackNavigator({
  CreateChat: CreateChatScreen
});

const TabStack = createBottomTabNavigator(
  {
    School: School,
    Admin: Admin,
    Family: Family
  },
  {
navigationOptions: ({ navigation }) => ({

  tabBarIcon: () => {
    const { routeName } = navigation.state;
    return <Image id={1} source={require('./app/img/school_logo.png')} />
  },
  tabBarLabel: navigation.state.routeName
}),
tabBarOptions: {
  activeTintColor: 'tomato',
  inactiveTintColor: 'gray',
  style: {
    backgroundColor: 'black',
    height: 55
  }
}

  }
);

const RootStack = createStackNavigator({
  Root: ChatStack,
  Tabs: TabStack
})

export default class App extends Component {
  render() { return (
      <Provider store={store}>
        <RootStack />
      </Provider>
    );
  }
}

I apologize, I cannot get this code to format after fighting with it for some time.

Thank you for any help or recommendations in advance!
Please suggest.

Answer 1

Credit to an unnamed redditor:

You'll have to nest you're entire stack into each screen of the tab navigator. As far as I know you can't access different screens in a StackNavigator if they are nested inside a different TabNavigator screen.

For example, if you want to be able to navigate to the chat screen from the SchoolScreen, you'll have to include that component inside your School navigator.

 const School = createStackNavigation({
   School: {
       screen: SchoolScreen
   },
   SchoolChat: {
       screen: CreateChatScreen
   } 
 });

From there your main TabNavigator should look about the same

const TabStack = createBottomTabNavigator({
    School: School
});

Answer 2

you should hide the RootStack header when TabStack is focused

TabStack.navigationOptions = {
  // Hide the header from root stack
  header: null,
};

and you did not need add stack to CreateChatScreen

const RootStack = createStackNavigator({
  Tabs: TabStack,
  ChatScreen: CreateChatScreen,
})