feat: add navigation with tab bar and screen layouts

Expo Router file-based navigation with glass tab bar,
3 tabs (Créations, Explorer, Profil), Phosphor icons,
modal picker, and fade transitions.
This commit is contained in:
Mathis Pruvot
2026-05-28 11:49:39 +00:00
parent 5cddb440e6
commit fbf8094281
5 changed files with 626 additions and 0 deletions

44
app/(tabs)/_layout.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { Tabs } from "expo-router";
import { GlassTabBar } from "@/components/glass";
import { House, Compass, UserCircle } from "phosphor-react-native";
import type { ColorValue } from "react-native";
export default function TabLayout() {
return (
<Tabs
tabBar={(props) => <GlassTabBar {...props} />}
screenOptions={{
headerShown: false,
tabBarStyle: { display: "none" },
}}
>
<Tabs.Screen
name="index"
options={{
title: "Créations",
tabBarIcon: ({ color, size }: { color: ColorValue; size: number }) => (
<House size={size} color={color as string} weight="light" />
),
}}
/>
<Tabs.Screen
name="explore"
options={{
title: "Explorer",
tabBarIcon: ({ color, size }: { color: ColorValue; size: number }) => (
<Compass size={size} color={color as string} weight="light" />
),
}}
/>
<Tabs.Screen
name="profile"
options={{
title: "Profil",
tabBarIcon: ({ color, size }: { color: ColorValue; size: number }) => (
<UserCircle size={size} color={color as string} weight="light" />
),
}}
/>
</Tabs>
);
}