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:
44
app/(tabs)/_layout.tsx
Normal file
44
app/(tabs)/_layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user