Render both Stack and Tab Navigator - react-native

Question

I'm pretty new at react-native, please bear with me. I have a Stack and Tab navigator that both work well but independently. I, however, need them to work together.
const MainTabs = TabNavigator({
Messages: { screen: MessageScreen },
Cards: { screen: CardScreen },
Statements: { screen: StatementScreen },
Profile: { screen: ProfileScreen },
},
{
tabBarOptions: {
activeTintColor: bongzBlue,
inactiveTintColor: 'gray',
},
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
}
);
export default class App extends Component {
render() {
return (
// <RootStack />
<MainTabs />
);
}
}

Answer 1

Here is a suggestion:
You can nest the StackNavigator in a TabNavigator. So for your specific case, you can make your screens StackNavigators.
For example, your Messages screen can be created like this:
const MessagesStack = StackNavigator({
index: { screen: MessageScreen }
...
})
and then you can use it in your TabNavigator and export that as your main component.
const MainTabs = TabNavigator({
Messages: { screen: MessageStack },
...
},
Hope this helps.