141 lines
3.4 KiB
TypeScript
141 lines
3.4 KiB
TypeScript
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,
|
|
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;
|