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.

score 4 · Answer 1 · answered Aug 24 '18 at 23:36

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
});

When I goback the defined tabnavigatior (Footer) i will not appear. — Mike Victoria, Aug 26 '20 at 03:57

NSYuJian · Answer 2 · 2018-08-25T03:01:24.347

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,
})

edited Aug 25 '18 at 03:01

answered Aug 24 '18 at 03:50

NSYuJian

196
1
5

Hi, maybe there was a miscommunication in the original intention of my post. My goal is not to hide the tabs when I navigate to another screen. I would like the tabs to be persistent, as they currently are, but I would also like to be able to navigate to other 'non-tab' screens using something like this.props.navigation.navigate('ChatScreen'). Using your solution, I now just see a Create Chat Screen with no tabs. Thanks for the help so far! – Austin Wrenn Aug 24 '18 at 12:12
Maybe I have a bit of a mistake, TabStack needs to be put in front and has been corrected. – NSYuJian Aug 25 '18 at 03:02

score 0 · Answer 3 · answered Jul 18 '20 at 16:10

In react native navigation 5

import React from 'react';
import {Text} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';


const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();


function Scr(){
  return <Text>hello</Text>;
}
function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Expolre"
      tabBarOptions={{
        activeTintColor: '#414757',
      }}>
      <Tab.Screen name="Expolre" component={Scr} />
    </Tab.Navigator>
  );
}

export default function Routing() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="login"
          component={Scr}
          options={{header: () => null}}
        />
        <Stack.Screen
          name="dashboard"
          component={MyTabs}
          options={{header: () => null}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Combine createStackNavigator and createBottomTabNavigator?

3 Answers3