Setting the property `tabBarActiveTintColor` in `Tab.Navigator` does not work

Question

function MyTabs() {
    return (
        <Tab.Navigator
            initialRouteName='Home'
            screenOptions={{
                tabBarActiveTintColor: 'purple',
            }}
         >
             <Tab.Screen name='Home' component={HomeScreen} />
             <Tab.Screen name='Settings' component={SettingsScreen} />
         </Tab.Navigator>
    );
}

I have no idea why this property just doesn't change color, already tried to launch it on android, ios and web. But they always keep the default colors, I also checked that it was well written but it still doesn't change the color.

Answer 1

Here is a HOC pattern I use quite often for getting around property passing issues, while preserving the rendering lifecycle in React-Native. It's quite flexible, and you can modify it to incorporate other types of returns, including hooks if you're willing to make createIconComponent into a <Component/> but that's a bit of a separate use case.

Create your HOC component wrapper by passing in the necessary values and returning a function which in turn returns it's own component that makes use of the property being passed in

export const createIconComponent = ({name, size, style, defaultColor}) => {
  // Component that accepts dynamic props
  return function IconComponent({color}) {
    return (
        <MaterialCommunityIcons
            name={name}
            color={defaultColor || color} // Use defaultColor if provided, otherwise use the color from the properties
            size={size}
            style={style}
        />
    );
  };
};

Here is an example from one of my applications where I generate multiple components - homeIcon, settingsIcon and searchIcon respectively, and pass them into each tabBarIcon. The property values from tabBarActiveTintColor: colors.accent and tabBarInactiveTintColor: colors.secondary at the top level Tab Navigator are propagated down into the components.

export const TopTabNavigator = () => {
  const {colors} = Styles();
  const {teamData} = useContext(AppStateContext);

  // Uses the colors.accent property we define 
  const homeIcon = createIconComponent({
    defaultColor: colors.accent, name: 'home', size: 27,
  });
  // Uses the colors.accent property we define 
  const settingsIcon = createIconComponent({
    defaultColor: colors.accent, name: 'account-cog', size: 25,
  });

  // This will use the dynamic properties color/active hinting 
  const searchIcon = createIconComponent({name: 'magnify', size: 25});

  return (<Tabs.Navigator
      tabBarPosition="bottom"
      keyboardDismissMode="on-drag"
      screenOptions={{
        tabBarActiveTintColor: colors.accent,
        tabBarHideOnKeyboard: true,
        tabBarInactiveTintColor: colors.secondary,
        tabBarPressColor: colors.primary,
        tabBarShowIcon: true,
        tabBarShowLabel: false,
        tabBarStyle: {
          backgroundColor: colors.primary, height: '10%',
        },
      }}
  >
    <Tabs.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarIcon: homeIcon
        }}
    />
    {teamData !== undefined && teamData.length > 0 && <Tabs.Screen
        name="Search"
        component={SearchStack}
        options={{
          tabBarIcon: searchIcon,
        }}
    />}
    <Tabs.Screen
        name="Settings"
        component={PreferencesStack}
        options={{
          tabBarIcon: settingsIcon
        }}
    />
  </Tabs.Navigator>);
};

Answer 2

The property tabBarActiveTintColor and tabBarInactiveTintColor provide the colors for the tabBarIcon and tabBarLabel which we can specify in the options prop of Tab.screen. You haven't specified that.

Consider the following code snippet.

<Tab.Screen name="Home" options={{
    tabBarLabel: (props) => <Text style={{ color: props.color}}>Home</Text>,
    tabBarIcon: (props) => do the same for your icon
 }}
 component={HomeScreen}
/>

Whenever the tab Home is selected the color in props is the one specified in tabBarActiveTintColor and tabBarInactiveTintColor otherwise. The same holds for all tabs specified in the Tab.Navigator.

It might be advised to create a custom Tab-Bar-Component, that is any react-native component that represents your custom tab bar object (including icon, text and styling).

If you want to color the whole tab bar, then we need to provide the tabBarStyle prop to the Tab.Navigator. Consider the following code snippet.

<Tab.Navigator
    tabBarStyle: {
        backgroundColor: "red",
    }
...
</Tab.Navigator>