React-navigation How to put StackNavigator in TabRouter screen - react-native

Question

I'm having some issue with react-navigation. I want to have a custom Tab Bar in which one of the screen is made of a StackNavigator.
So Basically, I have
Tab
-- StackNavigator
-- Dashboard (main)
-- Wallet
-- Etc...
-- Other tabs...
To make my custom tab, I used TabRouter, createNavigationContainer and createNavigator
const Tabs = TabRouter(
{
Main: {
screen: Main,
},
},
{
initialRouteName: 'Main',
tabBarComponent: TabView.TabBarBottom,
swipeEnabled: false,
animationEnabled: false,
backBehavior: 'none',
},
);
const CustomTabView = ({ router, navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
return (
<View style={{ flex: 1 }}>
<ActiveScreen
navigation={addNavigationHelpers({
...navigation,
state: routes[index],
})}
/>
<View style={styles.tabContainer}>
{routes.map(route => (
<TouchableOpacity // custom tab items
key={route.routeName}
onPress={() => navigation.navigate(route.routeName)}
>
<TabItem />
</TouchableOpacity>
))}
</View>
</View>
);
};
const TabBar = createNavigationContainer(createNavigator(Tabs)(CustomTabView));
Where Main is:
const Main = StackNavigator({
Dashboard: Dashboard,
Wallet: Wallet,
...
}, { initialRouteName: 'Dashboard' });
But it doesn't because Dashboard must declares a screen.
What I'm doing wrong? I don't know. How can we put a StackNavigator in a TabBar screen?

Answer 1

Fortunately, it's very easy.
What StackNavigator (or any other navigator) returns is React component. That means you can use it as screen component for any other route.
Thus, one of your routes screen will be StackNavigator.
Sample code
const Tabs = TabNavigator(
{
Main: {
screen: StackNavigator({
Dashboard: {
screen: Dashboard,
}
Wallet: {
screen: Wallet,
}
}),
},
},
{
initialRouteName: 'Main',
tabBarComponent: TabView.TabBarBottom,
swipeEnabled: false,
animationEnabled: false,
backBehavior: 'none',
},
);