Waseel: driver app, dispatch, POI suggestions, map fixes

app/(root)/(tabs)/_layout.tsx

@@ -1,7 +1,10 @@
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
 import { Image, type ImageSourcePropType, View } from "react-native";
 
 import { icons } from "@/constants";
+import { useT } from "@/lib/i18n";
+import { useTheme } from "@/lib/theme";
 
 const TabIcon = ({
   source,
@@ -13,7 +16,7 @@ const TabIcon = ({
   focused: boolean;
 }) => (
   <View
-    className={`flex flex-row justify-center items-center rounded-full ${focused && "bg-general-300"}`}
+    className={`flex flex-row justify-center items-center rounded-full ${focused && "bg-general-300 dark:bg-neutral-800"}`}
   >
     <View
       className={`rounded-full w-12 h-12 items-center justify-center ${focused && "bg-general-400"}`}
@@ -29,7 +32,31 @@ const TabIcon = ({
   </View>
 );
 
-const TabsLayout = () => (
+// Settings uses a vector glyph (MaterialCommunityIcons "cog") instead of a PNG
+// asset, so it gets its own icon renderer that matches the pill styling.
+const TabIconVector = ({
+  name,
+  focused,
+}: {
+  name: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+  focused: boolean;
+}) => (
+  <View
+    className={`flex flex-row justify-center items-center rounded-full ${focused && "bg-general-300 dark:bg-neutral-800"}`}
+  >
+    <View
+      className={`rounded-full w-12 h-12 items-center justify-center ${focused && "bg-general-400"}`}
+    >
+      <MaterialCommunityIcons name={name} size={28} color="white" />
+    </View>
+  </View>
+);
+
+const TabsLayout = () => {
+  const { isDark } = useTheme();
+  const t = useT();
+
+  return (
   <Tabs
     initialRouteName="home"
     screenOptions={{
@@ -37,7 +64,7 @@ const TabsLayout = () => (
       tabBarInactiveTintColor: "white",
       tabBarShowLabel: false,
       tabBarStyle: {
-        backgroundColor: "#333",
+        backgroundColor: isDark ? "#0a0a0a" : "#333",
         borderRadius: 50,
         paddingBottom: 0,
         overflow: "hidden",
@@ -55,10 +82,10 @@ const TabsLayout = () => (
     <Tabs.Screen
       name="home"
       options={{
-        title: "Home",
+        title: t("tabs.home"),
         headerShown: false,
         tabBarIcon: ({ focused }) => (
-          <TabIcon focused={focused} source={icons.home} alt="Home" />
+          <TabIcon focused={focused} source={icons.home} alt={t("tabs.home")} />
         ),
       }}
     />
@@ -66,10 +93,10 @@ const TabsLayout = () => (
     <Tabs.Screen
       name="rides"
       options={{
-        title: "Rides",
+        title: t("tabs.rides"),
         headerShown: false,
         tabBarIcon: ({ focused }) => (
-          <TabIcon focused={focused} source={icons.list} alt="Rides" />
+          <TabIcon focused={focused} source={icons.list} alt={t("tabs.rides")} />
         ),
       }}
     />
@@ -77,10 +104,10 @@ const TabsLayout = () => (
     <Tabs.Screen
       name="chat"
       options={{
-        title: "Chat",
+        title: t("tabs.chat"),
         headerShown: false,
         tabBarIcon: ({ focused }) => (
-          <TabIcon focused={focused} source={icons.chat} alt="Chat" />
+          <TabIcon focused={focused} source={icons.chat} alt={t("tabs.chat")} />
         ),
       }}
     />
@@ -88,14 +115,26 @@ const TabsLayout = () => (
     <Tabs.Screen
       name="profile"
       options={{
-        title: "Profile",
+        title: t("tabs.profile"),
         headerShown: false,
         tabBarIcon: ({ focused }) => (
-          <TabIcon focused={focused} source={icons.profile} alt="Profile" />
+          <TabIcon focused={focused} source={icons.profile} alt={t("tabs.profile")} />
+        ),
+      }}
+    />
+
+    <Tabs.Screen
+      name="settings"
+      options={{
+        title: t("tabs.settings"),
+        headerShown: false,
+        tabBarIcon: ({ focused }) => (
+          <TabIconVector focused={focused} name="cog" />
         ),
       }}
     />
   </Tabs>
-);
+  );
+};
 
 export default TabsLayout;