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