How to use both custom TabNavigator and StackNavigator in react-navigation - react-native

Question

I'm having some issue with react-navigation.
My navigation routes :
StackNavigator: main app navigation
-- WelcomeScreen
-- GuideScreen
-- TabNavigator: this is CustomTabs
+ MyHomeScreen
+ MyNotificationsScreen
+ MySettingsScreen
-- OtherScreen.
I use createNavigator, createNavigationContainer to build my own Navigation. You can view live for custom tab here: https://snack.expo.io/rJnUK4nrZ
import React from 'react';
import {
Button,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {
createNavigator,
createNavigationContainer,
TabRouter,
addNavigationHelpers,
} from 'react-navigation'; // 1.0.0-beta.11
const SampleText = ({ children }) => (
<Text style={styles.sampleText}>{children}</Text>
);
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView>
<SampleText>{banner}</SampleText>
<Button
onPress={() => {
navigation.goBack(null);
}}
title="Go back"
/>
</ScrollView>
);
const MyHomeScreen = ({ navigation }) => (
<MyNavScreen banner="Home Screen" navigation={navigation} />
);
const MyNotificationsScreen = ({ navigation }) => (
<MyNavScreen banner="Notifications Screen" navigation={navigation} />
);
const MySettingsScreen = ({ navigation }) => (
<MyNavScreen banner="Settings Screen" navigation={navigation} />
);
const CustomTabBar = ({ navigation }) => {
const { routes } = navigation.state;
return (
<View style={styles.tabContainer}>
{routes.map(route => (
<TouchableOpacity
onPress={() => navigation.navigate(route.routeName)}
style={styles.tab}
key={route.routeName}
>
<Text>{route.routeName}</Text>
</TouchableOpacity>
))}
</View>
);
};
const CustomTabView = ({ router, navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
return (
<View style={styles.container}>
<CustomTabBar navigation={navigation} />
<ActiveScreen
navigation={addNavigationHelpers({
...navigation,
state: routes[index],
})}
/>
</View>
);
};
const CustomTabRouter = TabRouter(
{
Home: {
screen: MyHomeScreen,
path: '',
},
Notifications: {
screen: MyNotificationsScreen,
path: 'notifications',
},
Settings: {
screen: MySettingsScreen,
path: 'settings',
},
},
{
// Change this to start on a different tab
initialRouteName: 'Home',
}
);
const CustomTabs = createNavigationContainer(
createNavigator(CustomTabRouter)(CustomTabView)
);
const styles = StyleSheet.create({
container: {
marginTop: Platform.OS === 'ios' ? 20 : 0,
},
tabContainer: {
flexDirection: 'row',
height: 48,
},
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
margin: 4,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 4,
},
sampleText: {
margin: 14,
},
});
export default CustomTabs;
In the App.js
import { connect } from "react-redux";
import { addNavigationHelpers, StackNavigator } from "react-navigation";
import Welcome from "#components/WelcomeScreen";
import Welcome from "#components/GuideScreen";
import Welcome from "#components/OtherScreen";
// import CustomTabs
export const AppNavigator = StackNavigator(
{
Welcome: { screen: WelcomeScreen },
Guide: { screen: GuideScreen },
Home: { screen: CustomTabs }, // I want to use CustomTabs TabNavigation here?
Other: { screen: OtherScreen },
},
{
initialRouteName: "Welcome",
headerMode: "none"
}
);
const Routes= ({ dispatch, nav }) => (
<AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
);
const mapStateToProps = state => ({
nav: state.nav
});
const mapDispatchToProps = dispatch => ({
dispatch
});
export default connect(mapStateToProps, mapDispatchToProps)(AppWithNavigationState);
How to add my custom TabNavigator to main StackNavigator?
What I'm doing wrong? The app integrated with redux, saga. If you have other example about custom stack and tab using react-navigation, please give me to reference.

Answer 1

Update Your Code:
import Tab1Screen from "#components/Tab1Screen"
import Tab2Screen from "#components/Tab2Screen"
export const AppNavigator = StackNavigator(
{
Welcome: { screen: WelcomeScreen },
Guide: { screen: GuideScreen },
Home: {
screen: TabNavigator(
{
Tab1Screen: {screen: Tab1Screen},
Tab2Screen: {screen: Tab2Screen}
},{
tabBarPosition: "bottom"
})
},
Other: { screen: OtherScreen },
},
{
initialRouteName: "Welcome",
headerMode: "none"
}
);

Answer 2

We can access TabNavigation inside of StackNavigtion
import files
import SampleHeadersScreen from "../Containers/SampleHeadersScreen";
import SampleHeaders1Screen from "../Containers/SampleHeaders1Screen";
import SampleHeaders3Screen from "../Containers/SampleHeaders3Screen";
import SampleHeaders8Screen from "../Containers/SampleHeaders8Screen";
import SampleHeaders9Screen from "../Containers/SampleHeaders9Screen";
const TabSegment = TabNavigator(
{
SegmentBarScreen: {
screen: SampleHeaders8Screen,
navigationOptions: {
title: "Album"
}
},
SegmentBarScreen1: {
screen: SampleHeaders9Screen,
navigationOptions: {
title: "Other"
}
}
})
const PrimaryNav = StackNavigator(
{
LaunchScreen: { screen: LaunchScreen },
SampleHeadersScreen: { screen: SampleHeadersScreen },
SampleHeaders1Screen: { screen: SampleHeaders1Screen },
SampleHeaders3Screen: { screen: SampleHeaders3Screen },
//TabNavigaion
SampleSegmentTab: { screen: TabSegment },
})
Give TabSegment in side the stack nativion.
It work well. I hope it will help you.