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>