How to use two Const in createAppContainer in React native - react-native

Question

I am trying to use two Const in createAppContainer but it dose not allow me to do so i have to use createBottomTabNavigator and createStackNavigator both in app.js. here is my code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createStackNavigator, createAppContainer , createBottomTabNavigator} from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import AntIcon from "react-native-vector-icons/AntDesign";
import home from './src/Home/home';
import EmployerLayout from './src/Home/EmployerLayout';
import Employers from './src/CompleteEmployers/Employers';
import Jobs from './src/CompleteJobs/Jobs';
import Freelancers from './src/CompleteFreelancers/Freelancers';
import Profile from './src/ProfileSetting/Profile';
import DetailFreelancerScreen from './src/DetailFreelancer/DetailFreelancerScreen';
import DetailJobScreen from './src/DetailJobs/DetailJobScreen';
import DetailCompanyScreen from './src/DetailCompany/DetailCompanyScreen';
import SearchScreen from './src/DetailSearch/SearchScreen';
console.disableYellowBox = true;
const RootStack= createStackNavigator({
home:home,
Profile:Profile,
Employers:Employers,
Jobs:Jobs,
DetailFreelancerScreen:DetailFreelancerScreen,
DetailJobScreen:DetailJobScreen,
DetailCompanyScreen:DetailCompanyScreen,
SearchScreen:SearchScreen,
EmployerLayout:EmployerLayout,
})
const MainNavigator = createBottomTabNavigator({
// MainNavigator: MainDrawer},{
Home:{
screen: home,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<AntIcon name="home" color={tintColor} size={25} />
)
}
},
Jobs:{
screen: Jobs,
navigationOptions:{
tabBarLabel:'Jobs',
tabBarIcon:({tintColor})=>(
<AntIcon name="appstore-o" color={tintColor} size={25} />
)
}
},
Freelancers:{
screen: Freelancers,
navigationOptions:{
tabBarLabel:'Freelancers',
tabBarIcon:({tintColor})=>(
<AntIcon name="user" color={tintColor} size={25}/>
)
}
},
Employers:{
screen: Employers,
navigationOptions:{
tabBarLabel:'Employers',
tabBarIcon:({tintColor})=>(
<AntIcon name="wallet" color={tintColor} size={25}/>
)
}
},
Profile:{
screen: Profile,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
<AntIcon name="setting" color={tintColor} size={25} />
)
}
}
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let IconComponent = CONST.IC_HOME;
if (routeName === CONST.MENU_HOME) {
IconComponent = focused ? CONST.IC_HOME_SELECTED : CONST.IC_HOME;
} else if (routeName === CONST.MENU_CALENDAR) {
IconComponent = focused ? CONST.IC_CALENDAR_SELECTED : CONST.IC_CALENDAR;
}
return IconComponent;
}
}),
tabBarOptions: {
activeTintColor: '#ff5851',
},
});
const App = createAppContainer(RootStack);
export default App;
IN the above code i have two const RootStack and MainNavigator but i am not able to use both at a same time can anyone please help me regarding this.

Answer 1

your MainNavigator should come inside RootStack, i.e there should be only root navigation
MainNavigator = createBottomTabNavigator(
{
Home: home,
Jobs: Jobs
},
);
RootStack = createStackNavigator(
{
SplashScreen: SplashScreen,
DrawerNavigation: HomeNavigation
}
);
const App = createAppContainer(RootNavigation);
export default App;