117 lines
3.4 KiB
TypeScript
117 lines
3.4 KiB
TypeScript
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
|
|
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 { useColorScheme } from '@/hooks/useColorScheme';
|
|
import SettingsScreen from './SettingsScreen';
|
|
import { IconSymbol } from '@/components/ui/IconSymbol';
|
|
import { TouchableOpacity } from 'react-native';
|
|
import { Colors } from '@/constants/Colors';
|
|
import NullComponent from '@/components/NullComponent';
|
|
|
|
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() {
|
|
return (
|
|
<Drawer.Navigator>
|
|
<Drawer.Screen
|
|
name="Tabs"
|
|
component={TabsNavigator}
|
|
options={{
|
|
headerShown: false,
|
|
drawerItemStyle: { display: 'none' }
|
|
}}
|
|
/>
|
|
<Drawer.Group
|
|
screenOptions={{
|
|
headerShown: false,
|
|
drawerActiveTintColor: Colors.light.tint,
|
|
drawerInactiveTintColor: Colors.light.text,
|
|
drawerStyle: {
|
|
backgroundColor: Colors.light.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 colorScheme = useColorScheme();
|
|
const [loaded] = useFonts({
|
|
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
|
|
});
|
|
|
|
if (!loaded) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
|
|
<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={Colors[colorScheme ?? 'light'].icon} />
|
|
</TouchableOpacity>
|
|
),
|
|
})}
|
|
/>
|
|
</RootStack.Navigator>
|
|
<StatusBar style="auto" />
|
|
</ThemeProvider>
|
|
);
|
|
} |