65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { Tabs } from "expo-router";
|
|
import { useColorScheme } from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
|
|
|
|
const LIGHT_TAB = {
|
|
bg: "#FFFFFF",
|
|
border: "#E8E2D5",
|
|
active: "#C4622D",
|
|
inactive: "#8A8278",
|
|
};
|
|
const DARK_TAB = {
|
|
bg: "#161513",
|
|
border: "#2C2A27",
|
|
active: "#E07B45",
|
|
inactive: "#706D67",
|
|
};
|
|
|
|
export default function TabLayout() {
|
|
const dark = useColorScheme() === "dark";
|
|
const tab = dark ? DARK_TAB : LIGHT_TAB;
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={({ route }) => ({
|
|
headerShown: false,
|
|
tabBarStyle: {
|
|
backgroundColor: tab.bg,
|
|
borderTopColor: tab.border,
|
|
borderTopWidth: 1,
|
|
height: 60,
|
|
paddingBottom: 8,
|
|
paddingTop: 6,
|
|
},
|
|
tabBarActiveTintColor: tab.active,
|
|
tabBarInactiveTintColor: tab.inactive,
|
|
tabBarLabelStyle: {
|
|
fontSize: 10,
|
|
fontWeight: "600",
|
|
letterSpacing: 0.3,
|
|
},
|
|
tabBarIcon: ({ focused, color, size }) => {
|
|
const icons: Record<string, { active: any; inactive: any }> = {
|
|
index: { active: "bookmark", inactive: "bookmark-outline" },
|
|
all: { active: "compass", inactive: "compass-outline" },
|
|
profile: { active: "person-circle", inactive: "person-circle-outline" },
|
|
};
|
|
const set = icons[route.name] ?? icons.index;
|
|
return (
|
|
<Ionicons
|
|
name={focused ? set.active : set.inactive}
|
|
size={focused ? size + 1 : size}
|
|
color={color}
|
|
/>
|
|
);
|
|
},
|
|
})}
|
|
>
|
|
<Tabs.Screen name="index" options={{ title: "My Feed" }} />
|
|
<Tabs.Screen name="all" options={{ title: "Discover" }} />
|
|
<Tabs.Screen name="profile" options={{ title: "Profile" }} />
|
|
</Tabs>
|
|
);
|
|
} |