Issue with TabBar icon color not changing when active in Expo using expo-router

Question

I'm using expo-router for navigation in my Expo app and encountering an issue with the TabBar where the icon color does not change when it's active. I've set up my Tabs.Screen components with specified tabBarIcon and tabBarActiveTintColor in the screenOptions, but the icon color remains the same whether it's active or inactive.

Here's the relevant code snippet:

import { Tabs } from "expo-router"
import { Feather } from '@expo/vector-icons';
import { AntDesign } from "@expo/vector-icons";
export default () => {
    
    return (
      // <Stack>
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: "#FF6464",
          tabBarInactiveTintColor: "#000",
        }}
      >
        <Tabs.Screen
          name="EmergencyContacts"
          options={{
            tabBarIconStyle: { color: "#FF6464" },
            tabBarIcon: ({ color, size }) => (
              <AntDesign name="contacts" size={24} color="black" />
            ),
            title: "Contacts",
            headerTitleAlign: "center",
            headerTitle: "Emergency Contacts",
            headerStyle: { backgroundColor: "#FF6464" },
            headerTintColor: "#fff",
          }}
        />
        <Tabs.Screen
          name="settings"
          options={{
            tabBarIcon: ({ color, size }) => (
              <Feather name="settings" size={24} color="black" />
            ),
            title: "Settings",
            headerTitleAlign: "center",
            headerTitle: "Settings",
            headerStyle: { backgroundColor: "#FF6464" },
            headerTintColor: "#fff",
          }}
        />
      </Tabs>
      // </Stack>
    );
}

I've tried specifying the tabBarActiveTintColor and tabBarInactiveTintColor within the screenOptions, and also styled the tabBarIconStyle separately, but the icon color doesn't change when the tab is active.

Any insights or suggestions on how to properly change the TabBar icon color when it's active using expo-router in Expo would be greatly appreciated!

I configured the screenOptions for the Tabs component, setting tabBarActiveTintColor to "#FF6464" and specifying tabBarIcon for each Tabs.Screen. Additionally, I experimented with tabBarIconStyle to modify the icon color based on the tab's activity.

Answer 1

I see you have used static color in the options of Tabs.Screen component.

Have a try by changing code as below:

tabBarIcon: ({ color, size }) => (
    <AntDesign name="contacts" size={24} color={color} />
)