Files
physical-expo/app/_layout.tsx
2026-01-13 11:10:07 +08:00

83 lines
2.1 KiB
TypeScript

import {
DarkTheme,
DefaultTheme,
ThemeProvider as NavigationThemeProvider,
} from "@react-navigation/native";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import "react-native-reanimated";
import { Colors } from "@/constants/theme";
import { ThemeProvider } from "@/context/ThemeContext";
import { useColorScheme } from "@/hooks/use-color-scheme";
import "@/i18n"; // Initialize i18n
export const unstable_settings = {
anchor: "(tabs)",
};
export default function RootLayout() {
return (
<ThemeProvider>
<RootLayoutNav />
</ThemeProvider>
);
}
function RootLayoutNav() {
const colorScheme = useColorScheme();
const isDark = colorScheme === "dark";
// Custom navigation theme to ensure proper colors
const navigationTheme = isDark
? {
...DarkTheme,
colors: {
...DarkTheme.colors,
background: Colors.dark.background,
card: Colors.dark.background,
text: Colors.dark.text,
border: Colors.dark.background,
notification: Colors.dark.tint,
},
}
: {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: Colors.light.background,
card: Colors.light.background,
text: Colors.light.text,
border: Colors.light.background,
notification: Colors.light.tint,
},
};
return (
<NavigationThemeProvider value={navigationTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen
name="modal"
options={{ presentation: "modal", title: "Modal" }}
/>
<Stack.Screen
name="match-detail/[id]"
options={{
animation: "slide_from_right",
headerShown: false,
}}
/>
<Stack.Screen
name="search"
options={{
animation: "slide_from_right",
headerShown: false,
}}
/>
</Stack>
<StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
</NavigationThemeProvider>
);
}