gistfile1.txt

import React, { ReactElement } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from 'react-native-screens/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/Ionicons';
import Home from 'screens/home';
import Discover from 'screens/discover';
import Itinerary from 'screens/itinerary';
import Search from 'screens/search';
import SearchTab from 'screens/search-tab';
import SeeMore from 'screens/see-more';
import Details from 'screens/details';
import { theme } from 'styles';
import RouteNames from './route-names';

const DiscoverStack = createNativeStackNavigator();
const DiscoverStackScreen = (): ReactElement => (
    <DiscoverStack.Navigator screenOptions={{ headerShown: false }}>
        <DiscoverStack.Screen
            name={RouteNames.MainApp.DiscoverStack.Discover}
            component={Discover}
        />
        <DiscoverStack.Screen
            name={RouteNames.MainApp.DiscoverStack.Itinerary}
            component={Itinerary}
        />
        <DiscoverStack.Screen
            name={RouteNames.MainApp.DiscoverStack.SeeMore}
            component={SeeMore}
        />
        <DiscoverStack.Screen
            name={RouteNames.MainApp.DiscoverStack.Details}
            component={Details}
        />
    </DiscoverStack.Navigator>
);

const SearchStack = createNativeStackNavigator();
const SearchStackScreen = (): ReactElement => (
    <SearchStack.Navigator screenOptions={{ headerShown: false }}>
        <SearchStack.Screen
            name={RouteNames.MainApp.SearchStack.Search}
            component={Search}
        />
        <SearchStack.Screen
            name={RouteNames.MainApp.SearchStack.SearchTab}
            component={SearchTab}
        />
        <DiscoverStack.Screen
            name={RouteNames.MainApp.DiscoverStack.Itinerary}
            component={Itinerary}
        />
        <DiscoverStack.Screen
            name={RouteNames.MainApp.SearchStack.SeeMore}
            component={SeeMore}
        />
        <DiscoverStack.Screen
            name={RouteNames.MainApp.SearchStack.Details}
            component={Details}
        />
    </SearchStack.Navigator>
);

const MainAppTab = createBottomTabNavigator();
const MainApp = (): ReactElement => (
    <MainAppTab.Navigator
        screenOptions={({ route }) => ({
            tabBarIcon: ({ color, size }) => {
                let iconName = '';

                if (route.name === RouteNames.MainApp.DiscoverStack.name) {
                    iconName = 'ios-flash';
                } else if (route.name === RouteNames.MainApp.SearchStack.name) {
                    iconName = 'ios-search';
                } else if (route.name === 'PhotoMode') {
                    iconName = 'ios-camera';
                } else if (route.name === 'Profile') {
                    iconName = 'ios-contact';
                }

                return <Icon name={iconName} size={size} color={color} />;
            },
        })}
        tabBarOptions={{
            activeTintColor: theme.colors.RED,
            inactiveTintColor: theme.colors.GRAY_DARK,
            showLabel: false,
        }}
    >
        <MainAppTab.Screen
            name={RouteNames.MainApp.DiscoverStack.name}
            component={DiscoverStackScreen}
        />
        <MainAppTab.Screen
            name={RouteNames.MainApp.SearchStack.name}
            component={SearchStackScreen}
        />
    </MainAppTab.Navigator>
);

const GlobalAppStack = createNativeStackNavigator();

const Routes: React.FC = () => (
    <SafeAreaProvider>
        <NavigationContainer>
            <GlobalAppStack.Navigator screenOptions={{ headerShown: false }}>
                <GlobalAppStack.Screen
                    name={RouteNames.Home.name}
                    component={Home}
                />
                <GlobalAppStack.Screen
                    name={RouteNames.MainApp.name}
                    component={MainApp}
                />
            </GlobalAppStack.Navigator>
        </NavigationContainer>
    </SafeAreaProvider>
);

export default Routes;