Route.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import React, { useEffect, useState } from 'react';
  2. import { useFonts } from 'expo-font';
  3. import * as SplashScreen from 'expo-splash-screen';
  4. import { Platform } from 'react-native';
  5. import { createStackNavigator } from '@react-navigation/stack';
  6. import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  7. import WelcomeScreen from './src/screens/WelcomeScreen';
  8. import LoginScreen from './src/screens/LoginScreen';
  9. import ResetPasswordScreen from './src/screens/ResetPasswordScreen';
  10. import ResetPasswordDeepScreen from './src/screens/ResetPasswordDeepScreen';
  11. import JoinUsScreen from './src/screens/RegisterScreen/JoinUs';
  12. import EditAccount from './src/screens/RegisterScreen/EditAccount';
  13. import HomeScreen from './src/screens/HomeScreen';
  14. import TravelsScreen from './src/screens/InAppScreens/TravelsScreen';
  15. import ProfileScreen from './src/screens/InAppScreens/ProfileScreen';
  16. import MapScreen from './src/screens/InAppScreens/MapScreen';
  17. import TravellersScreen from './src/screens/InAppScreens/TravellersScreen';
  18. import { NAVIGATION_PAGES } from './src/types';
  19. import { storageGet } from './src/storage';
  20. import { openDatabases } from './src/db';
  21. import TabBarButton from './src/components/TabBarButton';
  22. import { ParamListBase, RouteProp } from '@react-navigation/native';
  23. const ScreenStack = createStackNavigator();
  24. const BottomTab = createBottomTabNavigator();
  25. SplashScreen.preventAutoHideAsync();
  26. const Route = () => {
  27. const [fontsLoaded] = useFonts({
  28. 'redhat-900': require('./assets/fonts/RedHatDisplay-Black-900.ttf'),
  29. 'redhat-700': require('./assets/fonts/RedHatDisplay-Bold-700.ttf'),
  30. 'redhat-600': require('./assets/fonts/RedHatDisplay-SemiBold-600.ttf')
  31. });
  32. const [dbLoaded, setDbLoaded] = useState(false);
  33. useEffect(() => {
  34. const prepareApp = async () => {
  35. await openDatabases();
  36. setDbLoaded(true);
  37. };
  38. prepareApp();
  39. }, []);
  40. useEffect(() => {
  41. if (fontsLoaded && dbLoaded) {
  42. SplashScreen.hideAsync();
  43. }
  44. }, [fontsLoaded, dbLoaded]);
  45. // useEffect(() => {
  46. // const hideSplashScreen = async () => {
  47. // if (fontsLoaded) {
  48. // await SplashScreen.hideAsync();
  49. // }
  50. // };
  51. // hideSplashScreen();
  52. // }, [fontsLoaded]);
  53. if (!fontsLoaded) {
  54. return null;
  55. }
  56. let token: string | null = '';
  57. storageGet('token').then((data) => (token = data));
  58. const screenOptions = ({ route }: { route: RouteProp<ParamListBase, string>; navigation: any; }) => ({
  59. headerShown: false,
  60. tabBarButton: (props: any) => (
  61. <TabBarButton
  62. {...props}
  63. label={route.name}
  64. focused={props.accessibilityState.selected}
  65. />
  66. ),
  67. tabBarStyle: {
  68. ...Platform.select({
  69. android: {
  70. height: 58,
  71. },
  72. }),
  73. },
  74. });
  75. return (
  76. <ScreenStack.Navigator
  77. screenOptions={{ headerShown: false }}
  78. initialRouteName={token ? NAVIGATION_PAGES.IN_APP : NAVIGATION_PAGES.WELCOME}
  79. >
  80. <ScreenStack.Screen name={NAVIGATION_PAGES.WELCOME} component={WelcomeScreen} />
  81. <ScreenStack.Screen name={NAVIGATION_PAGES.LOGIN} component={LoginScreen} />
  82. <ScreenStack.Screen name={NAVIGATION_PAGES.REGISTER} component={JoinUsScreen} />
  83. <ScreenStack.Screen name={NAVIGATION_PAGES.REGISTER_ACCOUNT_DATA} component={EditAccount} />
  84. <ScreenStack.Screen name={NAVIGATION_PAGES.RESET_PASSWORD} component={ResetPasswordScreen} />
  85. <ScreenStack.Screen
  86. name={NAVIGATION_PAGES.RESET_PASSWORD_DEEP}
  87. component={ResetPasswordDeepScreen}
  88. />
  89. <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}>
  90. {() => (
  91. <BottomTab.Navigator
  92. screenOptions={screenOptions}
  93. >
  94. <BottomTab.Screen name={NAVIGATION_PAGES.MAP_TAB} component={HomeScreen} />
  95. <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELLERS_TAB} component={WelcomeScreen} />
  96. <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELS_TAB} component={WelcomeScreen} />
  97. <BottomTab.Screen name={NAVIGATION_PAGES.PROFILE_TAB} component={WelcomeScreen} />
  98. </BottomTab.Navigator>
  99. )}
  100. </ScreenStack.Screen>
  101. </ScreenStack.Navigator>
  102. );
  103. };
  104. export default Route;