Expo Router Tab icon color changes appearing on web but not on android

Question

This is my react native -> expo router -> tab navigation code:

import { View, Text } from "react-native";
import React from "react";
import { Tabs } from "expo-router";
import Svg, { Circle, Rect } from "react-native-svg";
import { SafeAreaProvider } from "react-native-safe-area-context";
import Ionicons from "@expo/vector-icons/Ionicons";
import { MaterialIcons } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";

export default function () {
    return (
        <SafeAreaProvider>
            <Tabs
                screenOptions={{
                    tabBarInactiveBackgroundColor: "#131313",
                    tabBarActiveBackgroundColor: "#232323",

                    tabBarStyle: {
                        borderColor: "#232323",
                    },
                    tabBarLabelStyle: {
                        color: "white",
                        fontWeight: "bold",
                        fontSize: 10,
                    },
                }}
            >
                <Tabs.Screen
                    name="home"
                    options={{
                        headerShown: false,

                        tabBarIcon: ({ focused, color, size }) =>
                            focused ? (
                                <Ionicons name="home" size={size} color="#85CB64" />
                            ) : (
                                <Ionicons name="home" size={size} color="black" />
                            ),
                    }}
                ></Tabs.Screen>
                <Tabs.Screen
                    name="doc"
                    options={{
                        headerShown: false,
                        tabBarIcon: ({ focused, color, size }) =>
                            focused ? (
                                <Ionicons name="document-text" size={size} color="#85CB64" />
                            ) : (
                                <Ionicons
                                    name="document-text-outline"
                                    size={size}
                                    color="black"
                                />
                            ),
                    }}
                ></Tabs.Screen>
                <Tabs.Screen
                    name="dashboard"
                    options={{
                        title: "Dash",
                        headerShown: false,
                        tabBarIcon: ({ focused, color, size }) =>
                            focused ? (
                                <MaterialCommunityIcons
                                    name="view-dashboard"
                                    size={24}
                                    color="#85CB64"
                                />
                            ) : (
                                <MaterialCommunityIcons
                                    name="view-dashboard"
                                    size={24}
                                    color="black"
                                />
                            ),
                    }}
                ></Tabs.Screen>
                <Tabs.Screen
                    name="profile"
                    options={{
                        headerShown: false,
                        tabBarIcon: ({ focused, color, size }) =>
                            focused ? (
                                <AntDesign name="user" size={24} color="#85CB64" />
                            ) : (
                                <AntDesign name="user" size={24} color="black" />
                            ),
                    }}
                ></Tabs.Screen>
            </Tabs>
        </SafeAreaProvider>
    );
}

Basic Idea: If the the tab screen icon is in focus -> return a different colored icon

Now the weird thing is the changes show up on web but not on android. Web Version:

But the android shows no changes

I tried using tabBarActiveTintColor but this again worked on the web but not on android.