createBottomTabNavigator的标签未显示-React Native

Question

So I pulled one of my react native projects from a few months ago and While using it I discovered that TabNavigator was deprecated. So instread I am now using createBottomTabNavigator like they suggested. It seems to work out of the box, but for some reason my labels are not showing, only the icons in the tabs.

I was looking at the docs and it was saying it is actually default true for showing the label. For some reason the label just won't show up. Also tried to set the showLabel to true but that didn't do anything else. Someone with the same problem that got a fix?

My code

import React from 'react';
import { Text, View, Button, StyleSheet } from 'react-native';

// Icons for tabs
import I from 'react-native-vector-icons/MaterialCommunityIcons';

// Navigation dep
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';

// Custom components/screens
import HomeScreen from './screens/HomeScreen'
import FavoritesScreen from './screens/FavoritesScreen'
import AccountScreen from './screens/AccountScreen'

// Custom styles
import HeaderBar from './styles/HeaderBar'

// Tabs navigation
const HomeStack = createStackNavigator({
    Home: HomeScreen
});

const FavoritesStack = createStackNavigator({
    Favorites: FavoritesScreen
});

const AccountStack = createStackNavigator({
    Account: AccountScreen
});

export default createBottomTabNavigator(
    {
        Home: HomeStack,
        Favorites: FavoritesStack,
        Account: AccountStack,
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {

                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'Home') {
                    iconName = `tag${focused ? '' : '-outline'}`;
                } else if (routeName === 'Favorites') {
                    iconName = `heart${focused ? '' : '-outline'}`;
                } else {
                    iconName = `account-box${focused ? '' : '-outline'}`;
                }

                return <I name={iconName} size={25} color={tintColor} />;
            },
            tabBarLabel: () => {
                const { routeName } = navigation.state;
                return routeName.toUpperCase();

            }
        }),

        tabBarOptions: {
            activeTintColor: '#E95736',
            inactiveTintColor: 'gray',
            labelStyle: {
                fontSize: 9,
                fontFamily: 'Rubik-Medium'
            },
            style: {
                backgroundColor: '#FAF8F8',
                borderTopWidth: 0.5
            },
        },
    }

);

Answer 1

I think the issue is related to tabBarLabel and I believe the problem will fix itself if you remove that bit. You can easily achieve the same effect by just making the label text upper case where you declare the route.