React Native: Change color of navigation tab - reactjs

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

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.

Answer 2

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>