React Native: Change color of navigation tab

Question

On my navigation tab, I want to change the color of the label + the color of the icon when its active, so what I did is created an if and else statement:

<MealsFavTabNavigator.Screen
                    name="Favorites"
                    component={FavoritesScreen}
                    options={({ route }) => ({
                        tabBarIcon: (tabInfo) => {
                            if (route.name === 'Favorites'){
                                return <Ionicons name="ios-star" size={25} color='tomato'/>
                            } else {
                                return <Ionicons name="ios-star" size={25} color='black' />
                            }
                            
                        }
                    })}

My label color is also fixed above the Navigator level:

    <MealsFavTabNavigator.Navigator
        tabBarOptions={{
            activeTintColor: Colors.primaryColor,
            inactiveTintColor: 'black',
        }}>

Here's my full code:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { Ionicons } from '@expo/vector-icons';

import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';

import FavoritesScreen from '../screens/FavoritesScreen';

import HeaderButton from '../components/HeaderButton';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';

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

import { CATEGORIES } from '../data/dummy-data';

import Colors from '../constants/colors';

const MealsNav = createStackNavigator();

const MealsNavigator = () => {
    return (
        <MealsNav.Navigator
            mode="modal"
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}
        >
            <MealsNav.Screen
                name="Categories"
                component={CategoriesScreen}
                options={{
                    title: 'Meals Categories'
                }}

            />
            <MealsNav.Screen
                name="CategoryMeals"
                component={CategoryMealsScreen}
                options={({ route }) => {
                    const catId = route.params.categoryId;
                    const selectedCategory = CATEGORIES.find((cat) => cat.id === catId);

                    return {
                        title: selectedCategory.title,
                    };

                }}
            />
            <MealsNav.Screen
                name="MealDetail"
                component={MealDetailScreen}
                options={{
                    title: 'Meal Detail',
                    headerRight: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Favorite'
                                iconName='ios-star'
                                onPress={() => console.log('Mark as the favorite')}
                            />
                        </HeaderButtons>
                    ),
                }}
            />
        </MealsNav.Navigator>
    );
};

const MealsFavTabNavigator = createBottomTabNavigator();



const MealsTabNav = () => {
    return (
        <NavigationContainer>
            <MealsFavTabNavigator.Navigator
                tabBarOptions={{
                    activeTintColor: Colors.primaryColor,
                    inactiveTintColor: 'black',
                }}>
                <MealsFavTabNavigator.Screen
                    name="Meals"
                    component={MealsNavigator}
                    options={({ route }) => ({
                        tabBarIcon: ({ color }) => {
                            
                            if(route.name === 'Meals'){
                               color = 'tomato'
                            } else if (route.name === 'Favorites') {
                                color = 'black'
                            }
                             return <Ionicons name="ios-restaurant" size={25} color={color}/>
                        }
                    })}
                />
                <MealsFavTabNavigator.Screen
                    name="Favorites"
                    component={FavoritesScreen}
                    options={({ route }) => ({
                        tabBarIcon: (tabInfo) => {
                            if (route.name === 'Favorites'){
                                return <Ionicons name="ios-star" size={25} color='tomato'/>
                            } else {
                                return <Ionicons name="ios-star" size={25} color='black' />
                            }
                            
                        }
                    })}
                />
            </MealsFavTabNavigator.Navigator>
        </NavigationContainer>
    );
};


export default MealsTabNav;

How can I change the color of the label and color of the iconicons when its active? My solution doesnt work.

Answer 1

https://stackoverflow.com/a/63033684/17735463 - This is a valid answer but mine works fine too (react-navigation-v5)

<Tab.Navigator
     screenOptions={({ route }) => ({

          tabBarIcon: ({ focused }) => {
            let iconName;
            let size=25;
            let color = focused ? 'black' : 'gray';
            if (route.name === 'HomeScreen') {
              iconName = 'ios-home';

              return <Ionicons name={iconName} size={size} color={color} />;
            } else if (route.name === 'FavoritesScreen') {
              iconName = 'star';

              return <AntDesign name={iconName} size={size} color={color} />;
            }

          tabBarLabel: ({ focused }) => {
            let titleStyle = {
              fontSize: 12,
              fontWeight: focused ? 'bold' : '500',
              color: focused ? 'black' : 'gray',
            };
            if (route.name === 'HomeScreen') {
              return <Text style={titleStyle}>Home</Text>;
            } else if (route.name === 'FavoritesScreen') {
              return <Text style={titleStyle}>Favorites</Text>;
            } 
          },

})}>

<Tab.Screen name='Home' component={HomeScreen}/>
<Tab.Screen name='Favorites' component={FavoritesScreen}/>

</Tab.Navigator>

Answer 2

By default there are parameters for colors in tabbar icon and tabbar label and these are set to the active tint color and inactive tint color.

But if you have a requirement to override this you can do the following

 <Tab.Screen
    name="Feed"
    component={Feed}
    options={{
      tabBarLabel:({ focused,color })=>(<Text style={{color:focused?"red":"aqua"}}>1232</Text>),
      tabBarIcon: ({ focused,color, size }) => (
        <MaterialCommunityIcons name="home" color={focused?"green":"blue"} size={size} />
      ),
    }}
  />

References on the props tabBarLabel can be a text or a react node, and you get the focused and the color as arguments, The color will be the color you set as activetintcolor or inactivetintcolor. focused is a boolean on whether the tab is focused or not.

Same arguments are passed to the tabBarIcon only difference is the size which is the size of the icon.

If you see the code above, I have given custom colors based on focused without using the color that is passed. You can do this as per your requirement.