Can I deactivate active background color?

[gpaiva985]

In the examples showed in the docs, only the icon has an active color on iOS (there is no active background color).
But, I don't know why, I have a background color which uses the 'tabBarActiveTintColor' with an opacity (as seen below).

Why I having this behavior? Is there a way to turn this off or set the color to the same as the
tabBarStyle={{ backgroundColor: '#fff' }} ??

I tried a lot of ways but couldn't achieve it. Can anyone help me?

[okwasniewski]

Hey,

This is the first time I've seen such a weird appearance of a native tab bar. Are you sure you are not using a custom one? If so can you provide an example of your tab bar? It shouldn't behave like this.

[gpaiva985]

Hi Oskar!
Sorry for the late response...

This is how I'm using my TabBar:

import { Tabs } from "@/components/bottom-tabs";
import { colors } from "@/constants/styles";

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: colors.tint,
      }}
      tabBarStyle={{
        backgroundColor: colors.background,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          tabBarIcon: () => ({ sfSymbol: "magnifyingglass" }),
          title: "Explorar",
        }}
      />

      // ...other TabsScreens

    </Tabs>
  );
}

Where the Tabs component is defined as desccribed in the docs

import {
  createNativeBottomTabNavigator,
  NativeBottomTabNavigationEventMap,
  NativeBottomTabNavigationOptions,
} from "@bottom-tabs/react-navigation";
import { ParamListBase, TabNavigationState } from "@react-navigation/native";
import { withLayoutContext } from "expo-router";

const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;

export const Tabs = withLayoutContext<
  NativeBottomTabNavigationOptions,
  typeof BottomTabNavigator,
  TabNavigationState<ParamListBase>,
  NativeBottomTabNavigationEventMap
>(BottomTabNavigator);

I started my project with expo default template and then I removed almost everything after. I don't know if it can has something related to that...
This is my root layout file now (if it helps):

import QueryProvider from "@/providers/query-provider";
import "react-native-reanimated";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <QueryProvider>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen
          name="(modals)/search"
          options={{
            animation: "fade",
            headerShown: false,
            headerTransparent: true,
            presentation: "transparentModal",
          }}
        />
        <Stack.Screen name="(recipes)" options={{ headerShown: false }} />
        <Stack.Screen name="categories" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
      <StatusBar style="dark" />
    </QueryProvider>
  );
}

Am I doing something wrong here?
Let me know if you need any more information.

Thanks!