Combine Stack Navigator with Bottom Tab Navigator on React Native - reactjs

Question

I want to know how to combine bottom tab navigator with Stack Navigator on Home Navigator in app.js
Here is my code
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Signup from './screens/signup';
import Login from './screens/login';
import Home from './screens/Home';
import Loading from './screens/Loading';
import Welcome from './screens/Welcome';
import ForgotPassword from './screens/ForgotPassword';
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
const navigator = createStackNavigator({
loading: {
screen: Loading,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
Welcome: {
screen: Welcome,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
signup: {
screen: Signup,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
login: {
screen: Login,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
Home: {
screen: Home,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
InitialRouteName: Loading,
});
const AppContainer = createAppContainer(navigator);
Any suggest to add bottom tab navigator in this code? I want to know how to combine Tab bottom navigator with stack navigator in app.js (calling home with bottom tab navigator)
thanks

Answer 1

You can create a tabNavigator and set it like any other route.
Obs: Also work for drawerNavigator.
Example:
const MainTab = TabNavigator(tabs, {
initialRouteName: initialRouteName,
tabBarPosition: "bottom",
});
const RootNavigator = StackNavigator(
{
Root: {
screen: MainTab,
navigationOptions: {
headerMode: "none"
}
},
/* Other Screens */
Login: { screen: LoginScreen },
}
)
const AppContainer = createAppContainer(RootNavigator);
Obs: this also work for drawerNavigator.