how to render tabs Navigation and stack navigation at the same time - reactjs

Question

i am trying to use stack navigation and tab navigation at the same time,i have created a stack navigator and tabs in my app.js files but whenever my app loads they are showing different pages at the same time and i don,t know how to resolve this issue. my app.js code is
import { createStackNavigator, createAppContainer } from 'react-navigation';
import IntroSlides from './src/screens/introslides/introslides';
import Dashboard from './src/screens/dashboard/dashboard';
import InboxScreen from '../screens/inbox/inbox';
import Favourites from '../screens/favourite/favourite';
const MainNavigator = createStackNavigator({
dashboard: { screen: Dashboard },
intro: { screen: IntroSlides },
}, {
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
const TabNavigator = createBottomTabNavigator({
// dashboard: { screen: Dashboard },
Inbox: { screen: InboxScreen },
Favourites: { screen: Favourites }
});
const App = createAppContainer(MainNavigator);
export default App;
when the app loads both the stack shows pages at the same time ,any Help would be appreciated

Answer 1

Here is an example to use tab navigator and stack navigator together:
const Stylelist = StackNavigator({
Login: {
screen: LoginScreen,
navigationOptions: ({ navigation }) => ({
header: null,
}),
},
Register: {
screen: RegisterScreen,
navigationOptions: ({ navigation }) => ({
header: null,
}),
},
Home: {
screen: TabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
title: 'Home',
}),
},
Friends: {
screen: FriendsScreen,
navigationOptions: ({ navigation }) => ({
title: 'My Friends',
}),
},
}),
navigationOptions: ({ navigation }) => ({
title: 'Home',
}),
},
});
export default Stylelist;