101 lines
2.2 KiB
TypeScript
101 lines
2.2 KiB
TypeScript
import { icons } from "@/constants";
|
|
import { Tabs } from "expo-router";
|
|
import { Image, type ImageSourcePropType, View } from "react-native";
|
|
|
|
const TabIcon = ({
|
|
source,
|
|
focused,
|
|
alt,
|
|
}: {
|
|
source: ImageSourcePropType;
|
|
alt: string;
|
|
focused: boolean;
|
|
}) => (
|
|
<View
|
|
className={`flex flex-row justify-center items-center rounded-full ${focused ? "bg-general-300" : ""}`}
|
|
>
|
|
<View
|
|
className={`rounded-full w-12 h-12 items-center justify-center ${focused ? "bg-general-400" : ""}`}
|
|
>
|
|
<Image
|
|
source={source}
|
|
alt={alt}
|
|
tintColor="white"
|
|
resizeMode="contain"
|
|
className="w-7 h-7"
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
const TabsLayout = () => (
|
|
<Tabs
|
|
initialRouteName="index"
|
|
screenOptions={{
|
|
tabBarActiveTintColor: "white",
|
|
tabBarInactiveTintColor: "white",
|
|
tabBarShowLabel: false,
|
|
tabBarStyle: {
|
|
backgroundColor: "#333",
|
|
borderRadius: 50,
|
|
paddingBottom: 0,
|
|
overflow: "hidden",
|
|
marginHorizontal: 20,
|
|
marginBottom: 20,
|
|
height: 78,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
position: "absolute",
|
|
},
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="home"
|
|
options={{
|
|
title: "Home",
|
|
headerShown: false,
|
|
tabBarIcon: ({ focused }) => (
|
|
<TabIcon focused={focused} source={icons.home} alt="Home" />
|
|
),
|
|
}}
|
|
/>
|
|
|
|
<Tabs.Screen
|
|
name="rides"
|
|
options={{
|
|
title: "Rides",
|
|
headerShown: false,
|
|
tabBarIcon: ({ focused }) => (
|
|
<TabIcon focused={focused} source={icons.list} alt="Rides" />
|
|
),
|
|
}}
|
|
/>
|
|
|
|
<Tabs.Screen
|
|
name="chat"
|
|
options={{
|
|
title: "Chat",
|
|
headerShown: false,
|
|
tabBarIcon: ({ focused }) => (
|
|
<TabIcon focused={focused} source={icons.chat} alt="Chat" />
|
|
),
|
|
}}
|
|
/>
|
|
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: "Profile",
|
|
headerShown: false,
|
|
tabBarIcon: ({ focused }) => (
|
|
<TabIcon focused={focused} source={icons.profile} alt="Profile" />
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
|
|
export default TabsLayout;
|