feat: refactored routes | react-query | custom fonts support

App.tsx

@@ -1,13 +1,7 @@
-import { QueryClientProvider, QueryClient } from 'react-query';
-import { createStackNavigator } from '@react-navigation/stack';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { NavigationContainer } from '@react-navigation/native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
-import WelcomeScreen from './src/screens/WelcomeScreen';
-import { NAVIGATION_PAGES } from './src/types';
-
-const ScreenStack = createStackNavigator();
-const BottomTab = createBottomTabNavigator();
+import Route from './Route';
 
 export default function App() {
   const queryClient = new QueryClient();
@@ -15,25 +9,7 @@ export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <NavigationContainer>
-        <ScreenStack.Navigator
-          screenOptions={{ headerShown: false }}
-          initialRouteName={NAVIGATION_PAGES.IN_APP}
-        >
-          <ScreenStack.Screen name={NAVIGATION_PAGES.WELCOME} component={WelcomeScreen} />
-          <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}>
-            {() => (
-              <BottomTab.Navigator
-                screenOptions={() => ({
-                  headerShown: false
-                })}
-              >
-                <BottomTab.Screen name={NAVIGATION_PAGES.LOCATION_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>
+        <Route />
       </NavigationContainer>
     </QueryClientProvider>
   );

Route.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { useFonts } from 'expo-font';
+import * as SplashScreen from 'expo-splash-screen';
+
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+import WelcomeScreen from './src/screens/WelcomeScreen';
+import LoginScreen from './src/screens/LoginScreen';
+import RegisterScreen from './src/screens/RegisterScreen';
+
+import { NAVIGATION_PAGES } from './src/types';
+
+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')
+  });
+
+  useEffect(() => {
+    const hideSplashScreen = async () => {
+      if (fontsLoaded) {
+        await SplashScreen.hideAsync();
+      }
+    };
+
+    hideSplashScreen();
+  }, [fontsLoaded]);
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
+  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={RegisterScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}>
+        {() => (
+          <BottomTab.Navigator
+            screenOptions={() => ({
+              headerShown: false
+            })}
+          >
+            <BottomTab.Screen name={NAVIGATION_PAGES.LOCATION_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;