118 lines
3.4 KiB
TypeScript
118 lines
3.4 KiB
TypeScript
import { Tabs, router } from "expo-router";
|
|
import { Home, ScanLine, FileText, Wallet, History, Scan } from "@/lib/icons";
|
|
import { Platform, View, Pressable } from "react-native";
|
|
import { ShadowWrapper } from "@/components/ShadowWrapper";
|
|
|
|
const NAV_BG = "#ffffff";
|
|
const ACTIVE_TINT = "#ea580c";
|
|
const INACTIVE_TINT = "#94a3b8";
|
|
|
|
export default function TabsLayout() {
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarShowLabel: true,
|
|
tabBarActiveTintColor: ACTIVE_TINT,
|
|
tabBarInactiveTintColor: INACTIVE_TINT,
|
|
tabBarLabelStyle: {
|
|
fontSize: 9,
|
|
fontWeight: "700",
|
|
marginBottom: Platform.OS === "ios" ? 0 : 4,
|
|
textTransform: "uppercase",
|
|
letterSpacing: 0.5,
|
|
},
|
|
tabBarStyle: {
|
|
backgroundColor: NAV_BG,
|
|
borderTopWidth: 0,
|
|
elevation: 10,
|
|
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,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 10 },
|
|
shadowOpacity: 0.12,
|
|
shadowRadius: 20,
|
|
},
|
|
}}
|
|
>
|
|
<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 }) => (
|
|
<ShadowWrapper level="lg" className="-mt-12">
|
|
<View className="h-16 w-16 rounded-full bg-primary items-center justify-center border-4 border-white">
|
|
<ScanLine color="white" size={28} strokeWidth={3} />
|
|
</View>
|
|
</ShadowWrapper>
|
|
),
|
|
}}
|
|
/>
|
|
<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="history"
|
|
options={{
|
|
tabBarLabel: "History",
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<View className={focused ? "bg-primary/5 rounded-2xl p-2" : "p-2"}>
|
|
<History
|
|
color={color}
|
|
size={18}
|
|
strokeWidth={focused ? 2.5 : 2}
|
|
/>
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|