How to add createBottomTabNavigator to same screen with createStackNavigator

Question

On my home screen (I used App.js as my home), I have createStackNavigator with createAppContainer to map all the screens using React-Navigation. It worked, and I can explicitly navigate to any of these screens from any screen. Now I want to add a bottom tab navigation bar to the home screen with "createBottomTabNavigator".

Here's the simplified version of my codes:

import { createStackNavigator, createAppContainer, createBottomTabNavigator  } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';

class HomeScreen extends React.Component {
   render() {
      return (
         <View><Text>Welcome</Text></View>
      );
   }
 }

 const AppNavigator = createStackNavigator({
   Home: { screen: HomeScreen },
   Screen1: { screen: Screen1 },
   Screen2: { screen: Screen2 },
   Screen3: { screen: Screen3 },
 });

 export default createAppContainer(AppNavigator);

I want to add a navigation bar at the bottom like this:

const TabNavigator = createBottomTabNavigator({
   Home: { screen: HomeScreen },
   Screen3: { screen: Screen3 },
});

export default createAppContainer(TabNavigator);

It won't allow two "export default" within the same page. How can I add the "createBottomTabNavigator" while keeping the "createStackNavigator" to map all my screens?

Iqbal Jan Iqbal Jan · Accepted Answer · 2019-03-14T06:36:01

Something like this.

import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';
import Screen4 from './Screens/Screen4';

const Home = createStackNavigator({
  Screen1, Screen2
});

const List = createStackNavigator({
  Screen3, Screen4
});

const TabNav = createBottomTabNavigator({
  Home, List
});

export default createAppContainer(TabNav);

Here your Home can be Screen1 and Screen2 Can be an Item of Screen1 and same for the Screen3 and Screen4

How to add createBottomTabNavigator to same screen with createStackNavigator

2 Answers