React-Navigation display dynamic headers on tabNavigation - reactjs

Question

I have this code:
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import HomeScreen from './modules/Home/HomeScreen';
import DetailScreen from './modules/Home/DetailScreen';
import React from 'react';
const tabNav = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
},
Details: { screen: DetailScreen },
},
);
//
tabNav.navigationOptions = ({ navigation }) => {
let { routeName } = navigation.state.routes[navigation.state.index];
console.log('navigation: ', navigation.state);
let title;
if (routeName === 'Home') {
title = 'Home';
} else if (routeName === 'Details') {
title = 'Detail';
}
return {
title,
headerMode: 'none',
};
};
//
const RootNavigator = createStackNavigator(
{
Main: tabNav,
},
{
navigationOptions: {
headerMode: 'none',
headerTransparent: true,
},
},
);
export default RootNavigator;
This is code is working well.
My question is, I want to change this section become dynamic. I've tried to put stackNavigator inside the tab but keep returning me error.
if (routeName === 'Home') {
title = 'Home';
} else if (routeName === 'Details') {
title = 'Detail';
}
Any suggestion?
Update:
I've tried to put stackNavigator inside my screen:
const tabNav = createBottomTabNavigator(
{
Home: createStackNavigator({
screen: HomeScreen,
navigationOptions: {
title: 'Home 2',
},
}),
Details: { screen: DetailScreen },
},
);
It keeps return me The component for route 'navigationOptions' must be a React component.

Answer 1

the StackNavigator is misconfigured, try this :
const tabNav = createBottomTabNavigator({
Home: {
screen: createStackNavigator({
homeSreen: {
screen: HomeScreen,
navigationOptions: {
title: 'Home 2',
},
},{
initialRouteName: 'homeScreen',
})
},
Details: { screen: DetailScreen },
});
or
const HomeStack = createStackNavigator({
home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home 2',
},
},
},{
initialRouteName: 'home',
});
const tabNav = createBottomTabNavigator({
Home: { screen: HomeStack },
Details: { screen: DetailScreen },
});
and
https://reactnavigation.org/docs/en/stack-navigator.html
and you can set title per screen:
const tabNav = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home',
},
},
Details: {
screen: DetailScreen,
navigationOptions: {
title: 'Details',
},
},
},
);
https://reactnavigation.org/docs/en/tab-navigator.html#navigationoptions-for-screens-inside-of-the-navigator