Nest StackNavigator in a custom BottomTabNavigator, React Navigation V>2

Question

I have a project configured with React Navigation V1. when i update React Navigation to version 2, tab icons is disappears... this is the routing structure:

public static Routes = createStackNavigator({
    Splash: { screen: Splash },
    EditProfile: { screen: EditProfile },
    Main: {
        screen: createBottomTabNavigator({
            Search: {
                screen: createStackNavigator({
                    Home: { screen: Home },
                    DoctorList: { screen: DoctorList },
                }, stackConfig('Home')
                )
            },
            Bookmark: {
                screen: createStackNavigator({
                    BookmarkList: { screen: BookmarkList },
                }, stackConfig('BookmarkList')
                )
            },
            User: {
                screen: createStackNavigator({
                    Profile: { screen: Profile },
                }, stackConfig('Profile')
                )
            },
        }, tabConfig('Search'))
    }
}, stackConfig('Splash')
)


let stackConfig = (initialRouteName: any): any => {
    return {
        initialRouteName: initialRouteName,
        headerMode: 'none',
        cardStyle: {
            backgroundColor: 'transparent'
        },
    }
}

let tabConfig = (initialRouteName: any): any => {
    return {
        initialRouteName: initialRouteName,
        tabBarComponent: TabBarComponent,
        tabBarPosition: 'bottom',
        tabBarOptions: {
            labelStyle: {
                fontFamily: Utility.font,
                fontSize: Platform.OS !== 'ios' ? 9 : 11,
                margin: 0,
            },
            activeTintColor: '#2e9699',
            inactiveTintColor: 'black',
            showIcon: true,
            showLabel: true,
            indicatorStyle: {
                backgroundColor: 'red',
            },
            style: {
                zIndex: 1,
                backgroundColor: "#ffffff",
                height: 60
            }
        }
    }
}

output:

When i remove StackNavigator from a tab ( ex: User: Profile ), icon will appears correctly. i think a difference between V1 and V2 causes this but i don't know it.

For example, Profile.tsx is like this:

export default class Profile extends Component {
    static navigationOptions = {
        tabBarIcon: ({ tintColor, focused }) => (
            <Icon name="md-person" size={27} color={focused ? colors.green : colors.black} />
        )
    };
}

Thanks.

Answer 1

At V2, navigation options can only be configured its direct parent. Example: your Profile screen can only configure for its parent, stacknavigator. Your profile screen cannot set the createBottomTabNavigator options without shuffling navigators

If you want to configure the createBottomTabNavigator options, you can do as shown in following:

public static Routes = createStackNavigator({
    Splash: { screen: Splash },
    EditProfile: { screen: EditProfile },
    Main: {
        screen: createBottomTabNavigator({
            Search: {screen: HomeStack},
            Bookmark: {screen: BookmarkStack},
            User: {screen:UserStack},
        }, tabConfig('Search'))
    }
}, stackConfig('Splash')
);

HomeStack.navigationOptions = ({ navigation }) => {
  return {
    tabBarLabel: "Explore",
    tabBarIcon: ({ focused, tintColor }) => (
         <Icon name="md-person" size={27} color={focused ? colors.green : colors.black} />
    )
  };
};

BookmarkStack.navigationOptions = ({ navigation }) => {
  return {
    tabBarLabel: "Explore",
    tabBarIcon: ({ focused, tintColor }) => (
         <Icon name="md-bookmark" size={27} color={focused ? colors.green : colors.black} />
    )
  };
};

UserStack.navigationOptions = ({ navigation }) => {
  return {
    tabBarLabel: "Explore",
    tabBarIcon: ({ focused, tintColor }) => (
         <Icon name="md-user" size={27} color={focused ? colors.green : colors.black} />
    )
  };
};

I hope it will work for you. PS : I didn't test my code.