Files
time_to_leave/apps/mobile/src/navigation/AppNavigator.tsx
T

51 lines
2.2 KiB
TypeScript

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Image, Text, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { StatusBar } from 'expo-status-bar';
import { EventListScreen } from '../screens/EventListScreen';
import { EventDetailScreen } from '../screens/EventDetailScreen';
import { AddEventScreen } from '../screens/AddEventScreen';
import { SettingsScreen } from '../screens/SettingsScreen';
import { CalendarImportScreen } from '../screens/CalendarImportScreen';
import type { RootStack } from '../types/navigation';
// ── Root Stack ──
const Root = createNativeStackNavigator<RootStack>();
/**
* Root native stack navigator for the app.
* Wraps all screens in SafeAreaProvider/SafeAreaView with a dark header bar.
*/
export default function AppNavigator() {
return (
<SafeAreaProvider>
<SafeAreaView style={{ flex: 1, backgroundColor: '#090816' }}>
<StatusBar style="light" />
<NavigationContainer>
<Root.Navigator
initialRouteName="EventList"
screenOptions={{
headerStyle: { backgroundColor: '#17112A' },
headerTintColor: '#F4F1EA',
headerTitle: () => (
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
<Image source={require('../../assets/icon.png')} style={{ width: 28, height: 28 }} resizeMode="contain" />
<Text style={{ color: '#F4F1EA', fontSize: 18, fontWeight: '600' }}>Time To Leave</Text>
</View>
),
}}
>
<Root.Screen name="EventList" component={EventListScreen} />
<Root.Screen name="AddEvent" component={AddEventScreen} />
<Root.Screen name="EventDetail" component={EventDetailScreen} />
<Root.Screen name="Settings" component={SettingsScreen} />
<Root.Screen name="CalendarImport" component={CalendarImportScreen} />
</Root.Navigator>
</NavigationContainer>
</SafeAreaView>
</SafeAreaProvider>
);
}