Unable to see text for inactive tab using createMaterialBottomTab and React Native

Question

I'm very new to React and am trying to set the color for the text and other styles for the inactive tabs on my bottom bar but a few hours on it already and not able to make it work as the text doesn't appear unless it's the selected tab. I'm using createMaterialBottomTab.

This is my entire screen if I can get any help please:

import React from 'react'
import { Platform, Text, View } from 'react-native'
import { createAppContainer } from 'react-navigation'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createStackNavigator } from 'react-navigation-stack'
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'

import HeadlinesScreen from '../screens/HeadlinesScreen'
import IrelandScreen from '../screens/IrelandScreen'
import TechnologyScreen from '../screens/TechnologyScreen'

const defaultStackNavOptions = {
    headerStyle: {
        backgroundColor: '#4a148c'
    },
    headerTintColor: 'white',
}

const NewsNavigator = createStackNavigator(
    {
        Headlines: HeadlinesScreen,
        Ireland: IrelandScreen,
        Technology: TechnologyScreen
    })

const HeadLinesNavigator = createStackNavigator(
    {
        Headlines: HeadlinesScreen
    }, {
    defaultNavigationOptions: defaultStackNavOptions,
    navigationOptions: {
        tabBarColor: 'green'
    }
})

const IrelandNavigator = createStackNavigator(
    {
        Ireland: IrelandScreen
    }, {
    defaultNavigationOptions: defaultStackNavOptions,
    navigationOptions: {
        tabBarColor: 'red'
    }
})

const TechnologyNavigator = createStackNavigator(
    {
        Technology: TechnologyScreen
    }, {
    defaultNavigationOptions: defaultStackNavOptions,
    navigationOptions: {
        tabBarColor: 'purple'
    }
})

const config = {
    headerMode: 'none',
    initialRouteName: 'Headlines',
    shifting: true,
    activeColor: 'black',
    inactiveColor: 'black',
    activeTintColor: 'black',
    inactiveTintColor: 'black',
    labeled: true,
}

const NewsAllNavigator = createMaterialBottomTabNavigator({
    Headlines: HeadLinesNavigator,
    Ireland: IrelandNavigator,
    Technology: TechnologyNavigator,
}, config)

export default createAppContainer(NewsAllNavigator)

Thank you very much.

UPDATED

I noticed now that I can see items if I add icons to the bottom bar. Still not the labels unless the item is selected. I guess this may be the default behaviour but not sure it can be overwritten?

const HeadLinesNavigator = createStackNavigator(
    {
        Headlines: HeadlinesScreen
    }, {
    headerLayoutPreset: 'center',
    defaultNavigationOptions: defaultStackNavOptions,
    navigationOptions: {
        // tabBarIcon: <TabItem label='Headlines' />,
        tabBarIcon: ({ tintColor }) => (
            <View>
                <FontAwesome name='newspaper-o' size={25} color='white' />
            </View>
        ),
        tabBarColor: 'green',
    }
})

score 6 · Answer 1 · answered Aug 04 '20 at 13:18

I had the same problem. The option you search for is: shifting={false}. Then you get all labels shown below the icons.

<TabNavigator.Navigator
            initialRouteName="myScreen"
            shifting={false}
...
            <TabNavigator.Screen
...
            />
</TabNavigator.Navigator>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You can use this syntax for creating bottomTabNavigation from react-navigation v5. Also note to import screen that i have used in code.
Link to official docs is here

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const BottomNavigator = () => {
  const BottomNavigation = createBottomTabNavigator();

  return (
    <BottomNavigation.Navigator>
      <BottomNavigation.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <BottomNavigation.Screen
        name="Exam"
        component={ExamStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="book" color={color} size={size} />
          ),
        }}
      />
      <BottomNavigation.Screen
        name="Profile"
        component={ProfileStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
      <BottomNavigation.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="settings" color={color} size={size} />
          ),
        }}
      />
    </BottomNavigation.Navigator>
  );
};

export default BottomNavigator;

package.json

"@react-navigation/bottom-tabs": "^5.0.5",
"@react-navigation/native": "^5.0.5",
"@react-navigation/stack": "^5.0.5",
"react-native-reanimated": "~1.4.0",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "^0.11.7",
"react-native-webview": "7.4.3"

Hi, thanks for your answer. I'm using material bottom bar and would like to stick with it if possible as it has some other features that are useful to my project. — Francislainy Campos, Apr 27 '20 at 17:35

Unable to see text for inactive tab using createMaterialBottomTab and React Native

2 Answers2

package.json