130 lines
3.8 KiB
TypeScript
130 lines
3.8 KiB
TypeScript
import { Tabs, router } from "expo-router";
|
|
import { Home, ScanLine, FileText, Wallet, Newspaper, Scan } from "@/lib/icons";
|
|
import { useColorScheme } from "nativewind";
|
|
import { Platform, View, Pressable } from "react-native";
|
|
|
|
const ACTIVE_TINT = "rgba(228, 98, 18, 1)";
|
|
const INACTIVE_TINT = "#94a3b8";
|
|
|
|
export default function TabsLayout() {
|
|
const { colorScheme } = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
|
|
const NAV_BG =
|
|
colorScheme === "dark" ? "rgba(31,31,31, 1)" : "rgba(255,255,255, 1)";
|
|
const BORDER_COLOR = isDark ? "#1e293b" : "#ffffff";
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarShowLabel: true,
|
|
tabBarActiveTintColor: ACTIVE_TINT,
|
|
tabBarInactiveTintColor: INACTIVE_TINT,
|
|
tabBarButton: ({ ref, ...navProps }) => (
|
|
<Pressable {...navProps} android_ripple={null} />
|
|
),
|
|
tabBarLabelStyle: {
|
|
fontSize: 9,
|
|
fontWeight: "700",
|
|
marginBottom: Platform.OS === "ios" ? 0 : 4,
|
|
textTransform: "uppercase",
|
|
letterSpacing: 0.5,
|
|
},
|
|
tabBarStyle: {
|
|
backgroundColor: NAV_BG,
|
|
borderTopWidth: 0,
|
|
elevation: isDark ? 0 : 6,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: -10 },
|
|
shadowOpacity: isDark ? 0 : 0.1,
|
|
shadowRadius: 20,
|
|
height: Platform.OS === "ios" ? 75 : 75,
|
|
paddingBottom: Platform.OS === "ios" ? 30 : 10,
|
|
paddingTop: 10,
|
|
marginHorizontal: 20,
|
|
position: "absolute",
|
|
bottom: 25,
|
|
left: 20,
|
|
right: 20,
|
|
borderRadius: 32,
|
|
},
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
tabBarLabel: "Home",
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<View className={focused ? "bg-primary/5 rounded-2xl p-2" : "p-2"}>
|
|
<Home color={color} size={18} strokeWidth={focused ? 2.5 : 2} />
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="payments"
|
|
options={{
|
|
tabBarLabel: "Payments",
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<View className={focused ? "bg-primary/5 rounded-2xl p-2" : "p-2"}>
|
|
<Wallet color={color} size={18} strokeWidth={focused ? 2.5 : 2} />
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="scan"
|
|
options={{
|
|
tabBarLabel: "SCAN",
|
|
tabBarLabelStyle: {
|
|
fontSize: 9,
|
|
fontWeight: "700",
|
|
color: INACTIVE_TINT,
|
|
},
|
|
tabBarIcon: ({ focused }) => (
|
|
<View className="-mt-12">
|
|
<View
|
|
className="h-16 w-16 rounded-full bg-primary items-center justify-center border-4"
|
|
style={{ borderColor: BORDER_COLOR }}
|
|
>
|
|
<ScanLine color="white" size={28} strokeWidth={3} />
|
|
</View>
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="proforma"
|
|
options={{
|
|
tabBarLabel: "Proforma",
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<View className={focused ? "bg-primary/5 rounded-2xl p-2" : "p-2"}>
|
|
<FileText
|
|
color={color}
|
|
size={18}
|
|
strokeWidth={focused ? 2.5 : 2}
|
|
/>
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="news"
|
|
options={{
|
|
tabBarLabel: "News",
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<View className={focused ? "bg-primary/5 rounded-2xl p-2" : "p-2"}>
|
|
<Newspaper
|
|
color={color}
|
|
size={18}
|
|
strokeWidth={focused ? 2.5 : 2}
|
|
/>
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|