132 lines
3.9 KiB
TypeScript
132 lines
3.9 KiB
TypeScript
import { createDrawerNavigator } from '@react-navigation/drawer';
|
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
|
import { useFonts } from 'expo-font';
|
|
import { Stack } from 'expo-router';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import 'react-native-reanimated';
|
|
import { PaperProvider } from 'react-native-paper';
|
|
import * as NavigationBar from 'expo-navigation-bar';
|
|
|
|
import { Platform, useColorScheme } from 'react-native';
|
|
import { lightTheme, darkTheme } from '@/constants/Colors';
|
|
import SettingsScreen from './SettingsScreen';
|
|
import { IconSymbol } from '@/components/ui/IconSymbol';
|
|
import { TouchableOpacity, View } from 'react-native';
|
|
import NullComponent from '@/components/NullComponent';
|
|
import { useEffect } from 'react';
|
|
|
|
const Drawer = createDrawerNavigator();
|
|
const RootStack = createNativeStackNavigator();
|
|
|
|
function TabsNavigator() {
|
|
return (
|
|
<Stack>
|
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
<Stack.Screen name="+not-found" />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function DrawerNavigator() {
|
|
const colorScheme = useColorScheme();
|
|
const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
|
|
return (
|
|
<Drawer.Navigator>
|
|
<Drawer.Screen
|
|
name="Tabs"
|
|
component={TabsNavigator}
|
|
options={{
|
|
headerShown: false,
|
|
drawerItemStyle: { display: 'none' }
|
|
}}
|
|
/>
|
|
<Drawer.Group
|
|
screenOptions={{
|
|
headerShown: false,
|
|
drawerActiveTintColor: theme.colors.primary,
|
|
drawerInactiveTintColor: theme.colors.onSurfaceVariant,
|
|
drawerStyle: {
|
|
backgroundColor: theme.colors.background,
|
|
},
|
|
}}
|
|
>
|
|
<Drawer.Screen
|
|
name="SettingsDrawerItem"
|
|
component={NullComponent}
|
|
options={({ navigation }) => ({
|
|
title: 'Settings',
|
|
headerShown: false,
|
|
drawerLabel: 'Settings',
|
|
drawerIcon: ({ color }) => (
|
|
<IconSymbol name="settings" size={24} color={color} />
|
|
),
|
|
})}
|
|
listeners={({ navigation }) => ({
|
|
drawerItemPress: (e) => {
|
|
e.preventDefault();
|
|
// Navigate to the Settings screen in the root stack
|
|
navigation.getParent()?.navigate('Settings');
|
|
navigation.dispatch({ type: 'CLOSE_DRAWER' });
|
|
},
|
|
})}
|
|
/></Drawer.Group>
|
|
</Drawer.Navigator>
|
|
);
|
|
}
|
|
|
|
export default function RootLayout() {
|
|
const [loaded] = useFonts({
|
|
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
|
|
});
|
|
const colorScheme = useColorScheme();
|
|
const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
|
|
|
|
useEffect(() => {
|
|
if (Platform.OS === 'android') {
|
|
const backgroundColor = theme.colors.primary;
|
|
const foregroundColor = colorScheme === 'dark' ? 'light' : 'dark';
|
|
|
|
NavigationBar.setStyle('light');
|
|
}
|
|
}, [colorScheme]);
|
|
|
|
|
|
if (!loaded) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<PaperProvider theme={theme}>
|
|
<RootStack.Navigator>
|
|
<RootStack.Screen
|
|
name="Main"
|
|
component={DrawerNavigator}
|
|
options={{ headerShown: false }}
|
|
|
|
/>
|
|
<RootStack.Screen
|
|
name="Settings"
|
|
component={SettingsScreen}
|
|
options={({ navigation }) => ({
|
|
headerBackVisible: false,
|
|
gestureEnabled: false,
|
|
headerTitle: 'Settings',
|
|
headerLeft: () => (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
navigation.goBack()
|
|
}}
|
|
style={{
|
|
marginRight: 15,
|
|
}}
|
|
>
|
|
<IconSymbol name="close" size={24} color={theme.colors.primary} />
|
|
</TouchableOpacity>
|
|
),
|
|
})}
|
|
/>
|
|
</RootStack.Navigator>
|
|
<StatusBar style={theme.dark ? 'light' : 'dark'} />
|
|
</PaperProvider>
|
|
);
|
|
} |