My project is react-native + expo project. I'm reproeing it on Windows.
I added expo routing, and it works well:
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons"; // Import a specific icon set
export default function TabsLayout() {
return (
<Tabs
screenOptions={{
tabBarActiveBackgroundColor: "transparent", // Ensure no active background color
tabBarInactiveBackgroundColor: "transparent",
tabBarActiveTintColor: "blue", // Active state color
tabBarInactiveTintColor: "black", // Same color for inactive state
}}
>
<Tabs.Screen
name="index"
options={{
headerShown: false,
tabBarLabel: "Diary",
tabBarIcon: ({ color, size }) => (
<Ionicons name="book-outline" color={color} size={size} />
),
}}
/>
<Tabs.Screen
name="analytics"
options={{
headerShown: false,
tabBarLabel: "Analytics",
tabBarIcon: ({ color, size }) => (
<Ionicons name="bar-chart-outline" color={color} size={size} />
),
}}
/>
<Tabs.Screen
name="profile"
options={{
headerShown: false,
tabBarLabel: "Profile",
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tabs>
);
}
For each tab item, there are 3 states:
- it is inactive (
tabBarInactiveBackgroundColor
is used) - it is active (it was clicked and now selected,
tabBarActiveBackgroundColor
is used) - it was pressed/clicked (around 0.5 sec there is rounded grayed rectangle on the tab item before it goes to
it is active
state)
My problem is that there is NO docs about how to remove this irritating grayed rectangle that appeared for 0.5 sec.
I just created the clean expo project using npx create-expo-app@latest StickerSmash
from official docs, and reproed the same behavior.
Crosslinking git issue:
If anybody has ever successfully changed this background color - I would be so grateful if you tell me how.