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

48
app/_layout.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { StyleSheet } from "react-native";
import { useWallpaperStore } from "@/stores/wallpaper.store";
import { useSettingsStore } from "@/stores/settings.store";
import { colors } from "@/theme";
export default function RootLayout() {
const loadWallpapers = useWallpaperStore((s) => s.loadSavedWallpapers);
const loadSettings = useSettingsStore((s) => s.loadSettings);
useEffect(() => {
loadWallpapers();
loadSettings();
}, []);
return (
<GestureHandlerRootView style={styles.root}>
<StatusBar style="light" />
<Stack
screenOptions={{
headerShown: false,
contentStyle: { backgroundColor: colors.background },
animation: "fade",
}}
>
<Stack.Screen name="(tabs)" />
<Stack.Screen
name="picker"
options={{ animation: "slide_from_bottom", presentation: "modal" }}
/>
<Stack.Screen
name="editor/[id]"
options={{ animation: "fade" }}
/>
</Stack>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
root: {
flex: 1,
backgroundColor: colors.background,
},
});