import React, { useEffect, useState } from 'react'; import { useFonts } from 'expo-font'; import * as SplashScreen from 'expo-splash-screen'; import { Platform } from 'react-native'; import { createStackNavigator } from '@react-navigation/stack'; import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import WelcomeScreen from './src/screens/WelcomeScreen'; import LoginScreen from './src/screens/LoginScreen'; import ResetPasswordScreen from './src/screens/ResetPasswordScreen'; import ResetPasswordDeepScreen from './src/screens/ResetPasswordDeepScreen'; import JoinUsScreen from './src/screens/RegisterScreen/JoinUs'; import EditAccount from './src/screens/RegisterScreen/EditAccount'; import HomeScreen from './src/screens/HomeScreen'; import { NAVIGATION_PAGES } from './src/types'; import { storageGet } from './src/storage'; import { openDatabases } from './src/db'; import TabBarButton from './src/components/TabBarButton'; import { ParamListBase, RouteProp } from '@react-navigation/native'; const ScreenStack = createStackNavigator(); const BottomTab = createBottomTabNavigator(); SplashScreen.preventAutoHideAsync(); const Route = () => { const [fontsLoaded] = useFonts({ 'redhat-900': require('./assets/fonts/RedHatDisplay-Black-900.ttf'), 'redhat-700': require('./assets/fonts/RedHatDisplay-Bold-700.ttf'), 'redhat-600': require('./assets/fonts/RedHatDisplay-SemiBold-600.ttf') }); const [dbLoaded, setDbLoaded] = useState(false); useEffect(() => { const prepareApp = async () => { await openDatabases(); setDbLoaded(true); }; prepareApp(); }, []); useEffect(() => { if (fontsLoaded && dbLoaded) { SplashScreen.hideAsync(); } }, [fontsLoaded, dbLoaded]); // useEffect(() => { // const hideSplashScreen = async () => { // if (fontsLoaded) { // await SplashScreen.hideAsync(); // } // }; // hideSplashScreen(); // }, [fontsLoaded]); if (!fontsLoaded) { return null; } const token = storageGet('token'); const screenOptions = ({ route }: { route: RouteProp<ParamListBase, string>; navigation: any; }) => ({ headerShown: false, tabBarButton: (props: any) => ( <TabBarButton {...props} label={route.name} focused={props.accessibilityState.selected} /> ), tabBarStyle: { ...Platform.select({ android: { height: 58, }, }), }, }); return ( <ScreenStack.Navigator screenOptions={{ headerShown: false }} initialRouteName={NAVIGATION_PAGES.WELCOME} > <ScreenStack.Screen name={NAVIGATION_PAGES.WELCOME} component={WelcomeScreen} /> <ScreenStack.Screen name={NAVIGATION_PAGES.LOGIN} component={LoginScreen} /> <ScreenStack.Screen name={NAVIGATION_PAGES.REGISTER} component={JoinUsScreen} /> <ScreenStack.Screen name={NAVIGATION_PAGES.REGISTER_ACCOUNT_DATA} component={EditAccount} /> <ScreenStack.Screen name={NAVIGATION_PAGES.RESET_PASSWORD} component={ResetPasswordScreen} /> <ScreenStack.Screen name={NAVIGATION_PAGES.RESET_PASSWORD_DEEP} component={ResetPasswordDeepScreen} /> <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}> {() => ( <BottomTab.Navigator screenOptions={screenOptions} > <BottomTab.Screen name={NAVIGATION_PAGES.MAP_TAB} component={HomeScreen} /> <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELLERS_TAB} component={WelcomeScreen} /> <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELS_TAB} component={WelcomeScreen} /> <BottomTab.Screen name={NAVIGATION_PAGES.PROFILE_TAB} component={WelcomeScreen} /> </BottomTab.Navigator> )} </ScreenStack.Screen> </ScreenStack.Navigator> ); }; export default Route;