React Native: createBottomTabNavigator screenOptions doesnt work - reactjs

Question

Hi am working on my tab navigator, so far so good until I tried to customize the tab navigator by adding icons and customized the colors:
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>
<MealsFavTabNavigator.Screen
name="Meals"
component={MealsNavigator}
screenOptions={() => ({
tabBarIcon: (tabInfo) => {
return <Ionicons name="ios-restaurant" size={25} color={tabInfo.tintColor} />
}
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'black',
}}
/>
<MealsFavTabNavigator.Screen
name="Favorites"
component={FavoritesScreen}
screenOptions={({ route }) => ({
tabBarIcon: (tabInfo) => {
return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />
}
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'black',
}}
/>
</MealsFavTabNavigator.Navigator>
</NavigationContainer>
);
};
export default MealsTabNav;
As you can see here, I tried to add a screenOptions:
const MealsFavTabNavigator = createBottomTabNavigator();
const MealsTabNav = () => {
return (
<NavigationContainer>
<MealsFavTabNavigator.Navigator>
<MealsFavTabNavigator.Screen
name="Meals"
component={MealsNavigator}
screenOptions={() => ({
tabBarIcon: (tabInfo) => {
return <Ionicons name="ios-restaurant" size={25} color={tabInfo.tintColor} />
}
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'black',
}}
/>
<MealsFavTabNavigator.Screen
name="Favorites"
component={FavoritesScreen}
screenOptions={({ route }) => ({
tabBarIcon: (tabInfo) => {
return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />
}
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'black',
}}
/>
</MealsFavTabNavigator.Navigator>
</NavigationContainer>
);
};
The icons doesnt work even the colors doesnt work and there are no errors on the console. Any idea what am I doing wrong?

Answer 1

The screenOptions prop is used for navigators not screens.
When using for screens you will have to use 'options' not screenOptions
<MealsFavTabNavigator.Screen
name="Favorites"
component={FavoritesScreen}
options={({ route }) => ({
tabBarIcon: (tabInfo) => {
return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />
}
})}
/>
Also the tabBarOptions should be moved to navigator
<MealsFavTabNavigator.Navigator
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'black',
}}>