import React, { useContext } from 'react' import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native' import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import { createStackNavigator } from '@react-navigation/stack' import { AntDesign, Entypo } from '@expo/vector-icons' import { useTranslation } from 'react-i18next' /** * Dark Light Mode. **/ import { ThemeContext } from './Theme' /** * App Screens **/ import Favorites from './screens/Favorites' import Stations from './screens/Stations' import About from './screens/About' import Timetable from './screens/Timetable' import Feedback from './screens/Feedback' import LinesMap from './screens/LinesMap' import Lines from './screens/Lines' /** * Bottom Tab Nav **/ const BottomTab = () => { const Tab = createBottomTabNavigator() const { t } = useTranslation() const { theme } = useContext(ThemeContext) return ( <Tab.Navigator initialRouteName='Stations' tabBarOptions={{ activeTintColor: theme.bottomTabNavActive, inactiveTintColor: theme.bottomTabNavInactive, style: { backgroundColor: theme.bottomTabNavBackground } }} > <Tab.Screen name='Favorites' component={Favorites} options={{ title: t('routes.favorites'), tabBarIcon: ({ color, size }) => ( <AntDesign name='staro' color={color} size={size} /> ) }} /> <Tab.Screen name='Stations' component={Stations} options={{ title: t('routes.stations'), tabBarIcon: ({ color, size }) => ( <Entypo name='location' color={color} size={size} /> ) }} /> <Tab.Screen name='Lines' component={Lines} options={{ title: t('routes.lines'), tabBarIcon: ({ color, size }) => ( <Entypo name='dots-three-horizontal' color={color} size={size} /> ) }} /> <Tab.Screen name='About' component={About} options={{ title: t('routes.about'), tabBarIcon: ({ color, size }) => ( <Entypo name='info' color={color} size={size} /> ) }} /> </Tab.Navigator> ) } /** * App root: * **/ export default Routes = () => { const Stack = createStackNavigator() const { t } = useTranslation() const { theme, dark } = useContext(ThemeContext) const getHeaderTitle = route => { // Accessing the tab navigator's state using 'getFocusedRouteNameFromRoute' /** * If the focused route is not found, we need to assume it's the initial screen * This can happen during if there hasn't been any navigation inside the screen * In our case, default is set to 'Stations' **/ const routeName = getFocusedRouteNameFromRoute(route) ?? 'Stations' switch (routeName) { case 'Stations': return t('routes.stationsHeader') case 'Favorites': return t('routes.favoritesHeader') case 'Lines': return t('routes.linesHeader') case 'About': return t('routes.aboutHeader') } } /** * Global Theme * Source is based on ThemeContext api * Colors object props are set by default on each screen. **/ const globalTheme = { dark: dark, colors: { border: theme.border, background: theme.backgroundColor }, theme: { ...theme } } return ( <NavigationContainer theme={globalTheme}> <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: theme.headerBackground }, headerTitleAlign: 'center', headerTintColor: theme.headerColor }} > <Stack.Screen name='BottomTab' component={BottomTab} options={({ route }) => ({ headerBackTitle: getHeaderTitle(route), headerTitle: getHeaderTitle(route) })} /> <Stack.Screen name='Timetable' component={Timetable} options={{ title: t('routes.timetable'), animationEnabled: false }} /> <Stack.Screen name='Feedback' component={Feedback} options={{ title: t('routes.feedback'), animationEnabled: false }} /> <Stack.Screen name='LinesMap' component={LinesMap} options={{ title: t('routes.linesMap'), animationEnabled: false }} /> </Stack.Navigator> </NavigationContainer> ) }