Header with TabNavigation React Navigation - react-native

Question

What is the best way to have a header with the page title with a tab navigator with react native? I know there is a way to wrap you TabNavigator inside of StackNavigator, but I do not understand how to do this with different components in different classes...
This is what I am doing to set up the TabNavigator:
Inside App.js:
export default createBottomTabNavigator(
{
Activity: Activity,
Front: Front
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Activity') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Front') {
iconName = `ios-cog`;
}
return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
});

Answer 1

Each tab can be a StackNavigator, for example:
const activityStackNavigator = createStackNavigator({
Activity: {
screen: Activity,
navigationOption: {
headerTitle: 'Some title...'
}
}
})
And then in your TabNavigator just use the StackNavigator you just created as a screen:
export default createBottomTabNavigator(
{
Activity: activityStackNavigator,
Front: Front
},
...
}
Here's some read from the React-Navigation docs.