60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import { Tabs } from "expo-router";
|
|
import { useColorScheme } from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
const LIGHT = { bg: "#FFFFFF", border: "#E8E2D5", active: "#C4622D", inactive: "#8A8278" };
|
|
const DARK = { bg: "#161513", border: "#2C2A27", active: "#E07B45", inactive: "#706D67" };
|
|
|
|
export default function TabLayout() {
|
|
const scheme = useColorScheme();
|
|
const dark = scheme === "dark";
|
|
const c = dark ? DARK : LIGHT;
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarStyle: {
|
|
backgroundColor: c.bg,
|
|
borderTopColor: c.border,
|
|
borderTopWidth: 1,
|
|
height: 64,
|
|
paddingBottom: 10,
|
|
paddingTop: 6,
|
|
},
|
|
tabBarActiveTintColor: c.active,
|
|
tabBarInactiveTintColor: c.inactive,
|
|
tabBarLabelStyle: { fontSize: 11, fontWeight: "600" },
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: "Subscribed",
|
|
tabBarIcon: ({ focused, color, size }) => (
|
|
<Ionicons name={focused ? "bookmark" : "bookmark-outline"} size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="all"
|
|
options={{
|
|
title: "All",
|
|
tabBarIcon: ({ focused, color, size }) => (
|
|
<Ionicons name={focused ? "compass" : "compass-outline"} size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: "Profile",
|
|
tabBarIcon: ({ focused, color, size }) => (
|
|
<Ionicons name={focused ? "person-circle" : "person-circle-outline"} size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|