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

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,
  focused,
  alt,
}: {
  source: ImageSourcePropType;
  alt: string;
  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"}`}
    >
      <Image
        source={source}
        alt={alt}
        tintColor="white"
        resizeMode="contain"
        className="w-7 h-7"
      />
    </View>
  </View>
);

// 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={{
      tabBarActiveTintColor: "white",
      tabBarInactiveTintColor: "white",
      tabBarShowLabel: false,
      // Get out of the way while someone is typing. The bar floats
      // (position: absolute) and Android resizes the window around the
      // keyboard, so it doesn't stay at the bottom of the screen — it rides up
      // and parks on top of the address suggestions the rider is trying to
      // tap, which is the worst possible place for it during a pickup or
      // destination search.
      tabBarHideOnKeyboard: true,
      tabBarStyle: {
        backgroundColor: isDark ? "#0a0a0a" : "#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: t("tabs.home"),
        headerShown: false,
        tabBarIcon: ({ focused }) => (
          <TabIcon focused={focused} source={icons.home} alt={t("tabs.home")} />
        ),
      }}
    />

    <Tabs.Screen
      name="rides"
      options={{
        title: t("tabs.rides"),
        headerShown: false,
        tabBarIcon: ({ focused }) => (
          <TabIcon focused={focused} source={icons.list} alt={t("tabs.rides")} />
        ),
      }}
    />

    <Tabs.Screen
      name="chat"
      options={{
        title: t("tabs.chat"),
        headerShown: false,
        tabBarIcon: ({ focused }) => (
          <TabIcon focused={focused} source={icons.chat} alt={t("tabs.chat")} />
        ),
      }}
    />

    <Tabs.Screen
      name="profile"
      options={{
        title: t("tabs.profile"),
        headerShown: false,
        tabBarIcon: ({ focused }) => (
          <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;