bottom tab bar created

2024-08-30 05:56:58 +00:00
parent 3e4c13d87c
commit be9696b8b5
1 changed files with 100 additions and 0 deletions
@@ -0,0 +1,100 @@
+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;