Merge pull request #6 from leanhtuan1994/dev

Update changes

.babelrc

@@ -6,18 +6,18 @@
       {
         "root": ["."],
         "alias": {
-          "app" : "./app",
-          "assets/*": "./assets/*",
-          "images": "./assets/images",
-          "navigation": "./app/navigation",
-          "screens": "./app/screens",
-          "utils": "./app/utils",
-          "translations": "./app/utils/translations",
-          "languages": "./languages",
-          "styles": "./app/styles",
-          "components": "./app/components",
-          "constant": "./app/constant",
-          "context": "./app/context"
+          "@app": "./app",
+          "@assets/*": "./assets/*",
+          "@images": "./assets/images",
+          "@navigation": "./app/navigation",
+          "@screens": "./app/screens",
+          "@utils": "./app/utils",
+          "@translations": "./app/utils/translations",
+          "@languages": "./languages",
+          "@styles": "./app/styles",
+          "@components": "./app/components",
+          "@constant": "./app/constant",
+          "@context": "./app/context"
         }
       }
     ],

.gitignore

@@ -57,3 +57,6 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+# Test
+__snapshots__

.vscode/settings.json

@@ -6,5 +6,12 @@
     "source.organizeImports": false
   },
   "eslint.packageManager": "yarn",
-  "cSpell.words": ["bootsplash", "bandcamp", "Entypo", "gorhom", "gradlew"]
+  "cSpell.words": [
+    "bootsplash",
+    "bandcamp",
+    "Entypo",
+    "gorhom",
+    "gradlew",
+    "initi18next"
+  ]
 }

App.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StatusBar } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import AppNavigator from 'navigation/navigator/AppNavigator';
-import 'translations/initi18next';
-import AppTheme, { Colors } from 'styles';
+import AppNavigator from '@navigation/navigator/AppNavigator';
+import '@translations/initi18next';
+import AppTheme, { Colors } from '@styles';
 
 const App = () => {
   return (

app/components/KeyboardContainer.tsx

@@ -2,21 +2,18 @@ import React from 'react';
 import type { KeyboardAvoidingViewProps } from 'react-native';
 import { KeyboardAvoidingView, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { isIOS13, isIOS } from 'utils/platform';
+import { isIOS } from '@utils/platform';
 
 interface Props {
   modal?: boolean;
 }
 
 const KeyboardContainer: React.FC<KeyboardAvoidingViewProps & Props> = ({
   style,
-  modal,
   ...props
 }) => {
   const { bottom } = useSafeAreaInsets();
-  const verticalOffset = isIOS
-    ? 8 + (modal && isIOS13 ? (bottom || 16) + 16 : 0)
-    : 4;
+  const verticalOffset = isIOS ? 8 : 4;
   return (
     <KeyboardAvoidingView
       style={StyleSheet.compose(

app/components/NavBar.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import type { HeaderProps } from 'react-native-elements';
 import { Header } from 'react-native-elements';
-import { Colors, FontSize, FontWeight, GlobalStyles } from 'styles';
+import { Colors, FontSize, FontWeight, GlobalStyles } from '@styles';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import { useBackHandler } from '@react-native-community/hooks';
-import { isIOS13 } from 'utils/platform';
 
 type Props = {
   type?: 'modal' | 'stack' | 'none';
@@ -30,7 +29,7 @@ const NavBar: React.FC<HeaderProps & Props> = ({
 }) => {
   const navigation = useNavigation();
 
-  const isSpecialHeader = isIOS13 && type === 'modal';
+  const isSpecialHeader = false;
 
   const popToTop = () => {
     navigation.dispatch(StackActions.popToTop());

app/navigation/navigator/AppNavigator.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { AuthProvider } from 'context/AuthContext';
+import { AuthProvider } from '@context/AuthContext';
 import RNBootSplash from 'react-native-bootsplash';
+import { navigateRef } from '@navigation/utils';
 
 import MainScreen from './Main';
 
 const App = () => {
-  const hideSplash = React.useCallback(() => {
+  const hideSplash = useCallback(() => {
     RNBootSplash.hide({ fade: true });
   }, []);
 
   return (
-    <NavigationContainer onReady={hideSplash}>
+    <NavigationContainer ref={navigateRef} onReady={hideSplash}>
       <AuthProvider>
         <MainScreen />
       </AuthProvider>

app/navigation/navigator/Main.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import { createNativeStackNavigator } from 'react-native-screens/native-stack';
-import Home from 'screens/home';
+import type { HomeScreenParam } from '@screens/home';
+import Home from '@screens/home';
 
-const MainStack = createNativeStackNavigator();
+type MainParam = HomeScreenParam;
+
+const MainStack = createNativeStackNavigator<MainParam>();
 
 const MainScreen = () => {
   return (
     <MainStack.Navigator
       screenOptions={{
         headerShown: false,
       }}>
-      <MainStack.Screen component={Home} name="Home" />
+      <MainStack.Screen {...Home.screen} />
     </MainStack.Navigator>
   );
 };

app/navigation/utils/Navigation.tsx

@@ -0,0 +1,48 @@
+import type React from 'react';
+import { createRef } from 'react';
+import type {
+  NavigationContainerRef,
+  NavigationProp,
+  ParamListBase,
+  RouteProp,
+} from '@react-navigation/core';
+
+export const navigateRef = createRef<NavigationContainerRef>();
+
+export type ScreenComponent<
+  P extends ParamListBase = ParamListBase,
+  N extends keyof P = string,
+> = React.ComponentType<{
+  route: RouteProp<P, N>;
+  navigation: NavigationProp<P>;
+}>;
+
+type ScreenType<
+  P extends ParamListBase,
+  N extends keyof P,
+  O extends Record<string, unknown>,
+> = {
+  screen: {
+    name: N;
+    component: ScreenComponent<P, N>;
+    options?: O;
+  };
+  present: (n: NavigationProp<P>, p?: P[N]) => void;
+};
+
+export function registerScreen<
+  P extends ParamListBase = ParamListBase,
+  N extends keyof P = string,
+  O extends Record<string, unknown> = Record<string, unknown>,
+>(name: N, Comp: ScreenComponent<P, N>, options?: O): ScreenType<P, N, O> {
+  return {
+    screen: {
+      name,
+      component: Comp,
+      options,
+    },
+    present: (navigation: NavigationProp<P>, params?: P[N]) => {
+      navigation.navigate({ name, params: params as P[N] });
+    },
+  };
+}

app/navigation/utils/index.ts

@@ -0,0 +1 @@
+export * from './Navigation';

app/screens/home/index.tsx

@@ -1,8 +1,19 @@
 import React from 'react';
 import { View } from 'react-native';
+import type { ScreenComponent } from '@navigation/utils';
+import { registerScreen } from '@navigation/utils';
 
-const HomeScreen = () => {
+const Name = 'HomeScreen';
+
+export type HomeScreenParam = {
+  [Name]: Record<string, unknown>;
+};
+
+const HomeScreen: ScreenComponent<HomeScreenParam, 'HomeScreen'> = () => {
   return <View />;
 };
 
-export default HomeScreen;
+export default registerScreen<HomeScreenParam, 'HomeScreen'>(
+  'HomeScreen',
+  HomeScreen,
+);

app/styles/fonts/Fonts.ts

@@ -45,24 +45,21 @@ const AndroidFontFamily: {
   };
 } = {
   [FontWeight.Light]: {
-    fontFamily: 'iCielGalanoGrotesque-Light',
+    fontFamily: 'GoogleSans-Light',
   },
   [FontWeight.Regular]: {
-    fontFamily: 'iCielGalanoGrotesque-Regular',
+    fontFamily: 'GoogleSans-Regular',
   },
   [FontWeight.Medium]: {
-    fontFamily: 'iCielGalanoGrotesque-Medium',
-  },
-  [FontWeight.SemiBold]: {
-    fontFamily: 'iCielGalanoGrotesque-SemiBold',
+    fontFamily: 'GoogleSans-Medium',
   },
   [FontWeight.Bold]: {
-    fontFamily: 'iCielGalanoGrotesque-Bold',
+    fontFamily: 'GoogleSans-Bold',
   },
 };
 
 enum FontFamily {
-  normal = 'iCiel Galano Grotesque',
+  normal = 'GoogleSans-Regular',
 }
 
 export { FontSize, FontWeight, AndroidFontFamily, FontFamily };

app/styles/theme/Theme.tsx

@@ -1,12 +1,8 @@
 import React from 'react';
-import {
-  ViewStyle,
-  Platform,
-  TextStyle,
-  ImageStyle,
-  TouchableOpacity as TouchableComponent,
-} from 'react-native';
-import { ThemeProvider, FullTheme } from 'react-native-elements';
+import type { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+import { Platform, TouchableOpacity as TouchableComponent } from 'react-native';
+import type { FullTheme } from 'react-native-elements';
+import { ThemeProvider } from 'react-native-elements';
 
 import { Colors } from '../colors';
 import { AndroidFontFamily, FontSize, FontWeight, FontFamily } from '../fonts';

app/utils/translations/localization/en.ts

@@ -1,4 +1,4 @@
-import { en as common } from 'languages';
+import { en as common } from '@languages';
 
 const en = {
   common,

app/utils/translations/localization/vi.ts

@@ -1,4 +1,4 @@
-import { vi as common } from 'languages';
+import { vi as common } from '@languages';
 
 const vi = {
   common,

index.js

@@ -2,6 +2,7 @@
  * @format
  */
 
+import 'react-native-gesture-handler';
 import { AppRegistry } from 'react-native';
 
 import App from './App';