Expo Router file-based navigation with glass tab bar, 3 tabs (Créations, Explorer, Profil), Phosphor icons, modal picker, and fade transitions.
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
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,
|
|
},
|
|
});
|