N3Mobile · pnv2003 · May 22, 2024 · May 22, 2024 · May 22, 2024 · May 22, 2024
diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo-google-fonts/sriracha": "^0.2.3",
+    "@expo/metro-runtime": "~3.2.1",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/netinfo": "11.3.1",
     "@react-navigation/bottom-tabs": "^6.4.0",
@@ -20,6 +22,7 @@
     "expo": "^51.0.8",
     "expo-camera": "~15.0.9",
     "expo-device": "~6.0.2",
+    "expo-font": "~12.0.5",
     "expo-image-picker": "~15.0.5",
     "expo-localization": "~15.0.3",
     "expo-status-bar": "~1.12.1",

diff --git a/src/Components/Brand.tsx b/src/Components/Brand.tsx
@@ -0,0 +1,22 @@
+import { Colors } from "@/Theme";
+import { Sriracha_400Regular, useFonts } from "@expo-google-fonts/sriracha";
+import React, { FC } from "react";
+import { Text } from "react-native";
+
+export const Brand: FC<{size: number}> = ({ size }) => {
+    let [fontsLoaded, fontError] = useFonts({Sriracha_400Regular});
+
+    if (!fontsLoaded && !fontError) {
+        return null;
+    }
+
+    return (
+        <Text style={{ 
+            fontFamily: "Sriracha_400Regular", 
+            color: Colors.PRIMARY,
+            fontSize: size
+            }}>
+                Finwise
+        </Text>
+    )
+}
diff --git a/src/Components/Loading.tsx b/src/Components/Loading.tsx
@@ -0,0 +1,58 @@
+import { View } from "native-base";
+import React from "react";
+import { StyleSheet } from "react-native";
+import { Logo } from "./Logo";
+import { Brand } from "./Brand";
+import { ActivityIndicator, Text } from "react-native-paper";
+import { Language, LocalizationKey, i18n } from "@/Localization";
+import { Colors } from "@/Theme";
+
+export const Loading = () => {
+    return (
+        <View style={styles.container}>
+            <View style={styles.logo}>
+                <Logo />
+                <Brand size={48}/>
+                { i18n.locale === Language.ENGLISH 
+                    ?
+                    <View style={styles.slogan}>
+                        <Text>Make wise financial moves with <Brand size={16} /></Text>
+                    </View> 
+                    :
+                    <View style={styles.slogan}>
+                        <Text style={{ fontSize: 20 }}>Tài chính thông minh</Text>
+                        <Text style={{ fontSize: 20 }}>dẫn bước cùng <Brand size={20} /></Text>
+                    </View>
+                }
+            </View>
+            <View style={styles.loading}>
+                <ActivityIndicator animating={true} size={50} color={Colors.PRIMARY}/>
+                <Text>{i18n.t(LocalizationKey.LOADING)}</Text>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 20,
+        backgroundColor: Colors.NEUTRAL99,
+        height: '100%'
+    },
+    logo: {
+        alignItems: 'center'
+    },
+    slogan: {
+        alignItems: 'center'
+    },
+    loading: {
+        display: 'flex',
+        gap: 20,
+        position: 'absolute',
+        bottom: 0,
+        marginBottom: 20   
+    }
+})
diff --git a/src/Components/Logo.tsx b/src/Components/Logo.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import Svg, { SvgProps, Path } from "react-native-svg";
+
+export const Logo = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    width={160}
+    height={160}
+    fill="none"
+    {...props}
+  >
+    <Path
+      fill="#0BA385"
+      d="M46.667 20h66.666C128.06 20 140 31.94 140 46.667v66.666C140 128.06 128.06 140 113.333 140H46.667C31.94 140 20 128.06 20 113.333V46.667C20 31.94 31.94 20 46.667 20Z"
+    />
+    <Path
+      fill="#FAFAFA"
+      d="M76.853 113.11c-.406 0-.816-.003-1.233-.013-12.04-.294-19.933-7.707-22.603-10.66-.59-.65-.57-1.63.036-2.267l5.547-6.253a1.65 1.65 0 0 1 2.223-.167c2.46 1.933 8.154 6.847 15.654 7.257 8.706.473 12.763-2.004 13.286-5.787.497-3.583-1.25-6.62-10.923-9.13-17.283-4.483-20.383-14.567-19.32-22.99 1.117-8.863 10.3-15.923 20.95-15.817 15.22.157 24.6 6.954 27.87 9.794.733.636.75 1.75.06 2.433l-5.27 5.953c-.55.547-1.407.65-2.057.227-2.663-1.733-7.973-6.913-17.453-6.913-5.833 0-9.387 2.226-9.757 5.136-.513 4.067 2.204 7.58 10.517 9.457 18.423 4.157 21.523 14.89 19.567 23.56-1.8 7.983-10.924 16.18-27.094 16.18Z"
+    />
+    <Path
+      fill="#FAFAFA"
+      d="m93.44 55.307 2.797-13.3A1.664 1.664 0 0 0 94.607 40H84.39c-.787 0-1.47.553-1.63 1.323l-2.81 13.37 13.49.614ZM69.72 103.333l-3.083 14.657A1.668 1.668 0 0 0 68.27 120h10.217c.786 0 1.47-.553 1.63-1.323l3.226-15.344H69.72Z"
+    />
+  </Svg>
+)
diff --git a/src/Components/index.ts b/src/Components/index.ts
@@ -0,0 +1,3 @@
+export * from "./Brand";
+export * from "./Loading";
+export * from "./Logo";
diff --git a/src/Navigation/Main/index.tsx b/src/Navigation/Main/index.tsx
@@ -25,7 +25,7 @@ export const MainNavigator = () => {
         options={{
           tabBarLabel: i18n.t(LocalizationKey.HOME),
           tabBarIcon: ({ color }) => (
-            <Icon source={Icons.HOME} size={26}  color={color}/>
+            <Icon source={Icons.HOME} size={26} color={color}/>
           ),
         }}
       />
@@ -35,7 +35,7 @@ export const MainNavigator = () => {
         options={{
           tabBarLabel: i18n.t(LocalizationKey.TRANSACTIONS),
           tabBarIcon: ({ color }) => (
-            <Icon source={Icons.HISTORY} size={26}  color={color}/>
+            <Icon source={Icons.HISTORY} size={26} color={color}/>
           ),
         }}
       />
@@ -45,7 +45,7 @@ export const MainNavigator = () => {
         options={{
           tabBarLabel: i18n.t(LocalizationKey.ADD),
           tabBarIcon: ({ color }) => (
-            <Icon source={Icons.PLUS} size={26}  color={color}/>
+            <Icon source={Icons.PLUS} size={26} color={color}/>
           ),
         }}
       />
@@ -55,7 +55,7 @@ export const MainNavigator = () => {
         options={{
           tabBarLabel: i18n.t(LocalizationKey.WALLETS),
           tabBarIcon: ({ color }) => (
-            <Icon source={Icons.WALLET} size={26}  color={color}/>
+            <Icon source={Icons.WALLET} size={26} color={color}/>
           ),
         }}
       />
@@ -65,7 +65,7 @@ export const MainNavigator = () => {
         options={{
           tabBarLabel: i18n.t(LocalizationKey.BUDGETS),
           tabBarIcon: ({ color }) => (
-            <Icon source={Icons.BUDGET} size={26}  color={color}/>
+            <Icon source={Icons.BUDGET} size={26} color={color}/>
           ),
         }}
       />

diff --git a/src/Navigation/NavigationBar.tsx b/src/Navigation/NavigationBar.tsx
@@ -22,7 +22,7 @@ export const NavigationBar: FC<NativeStackHeaderProps> = ({ navigation, route, o
                     ? <Appbar.BackAction onPress={navigation.goBack} />
                     : null
                 }
-                <Appbar.Content title={title == RootScreens.MAIN ? "Finwise" : title} />
+                <Appbar.Content title={title} />
             </Appbar.Header>
         )
     }
@@ -33,9 +33,9 @@ export const NavigationBar: FC<NativeStackHeaderProps> = ({ navigation, route, o
                 ? <Appbar.BackAction onPress={navigation.goBack} />
                 : null
             }
-            <Appbar.Content title={title == RootScreens.MAIN ? "Finwise" : title} />
+            <Appbar.Content title="Finwise" />
 
-            <Appbar.Action icon={ i18n.locale == Language.ENGLISH ? "alpha-e-box" : "alpha-v-box" } />
+            <Appbar.Action icon={ i18n.locale === Language.ENGLISH ? "alpha-e-box" : "alpha-v-box" } />
             <Appbar.Action icon="logout" onPress={() => {
                 // TODO: logout (clear user info and disable back action)
                 navigation.navigate(RootScreens.LOGIN);

diff --git a/src/Screens/Budgets/BudgetsContainer.tsx b/src/Screens/Budgets/BudgetsContainer.tsx
@@ -1,9 +1,12 @@
+import { Loading } from "@/Components/Loading";
 import React from "react";
+import { View } from "react-native";
 
 export const BudgetsContainer = () => {
     // TODO
     return (
-        <>
-        </>
+        <View>
+            <Loading />
+        </View>
     )
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1196,6 +1196,11 @@
     deepmerge "^3.2.0"
     hoist-non-react-statics "^3.3.0"
 
+"@expo-google-fonts/sriracha@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@expo-google-fonts/sriracha/-/sriracha-0.2.3.tgz#1e525b20c6048d6093fa76a52cddef08cb3ee6a6"
+  integrity sha512-CQozKvtS30hZ/6RVaTuGoeUqofJaMy9Hz35V7tNszGAZKfi1+O6fIx6a/QVcZVEe7dBcNnFn6QHkyx7zoYBrSg==
+
 "@expo/bunyan@^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz"
@@ -1441,6 +1446,11 @@
     postcss "~8.4.32"
     resolve-from "^5.0.0"
 
+"@expo/metro-runtime@~3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@expo/metro-runtime/-/metro-runtime-3.2.1.tgz#bbab2ca9d0c8d256172eb4688123af6be67c7674"
+  integrity sha512-L7xNo5SmK+rcuXDm/+VBBImpA7FZsVB+m/rNr3fNl5or+1+yrZe99ViF7LZ8DOoVqAqcb4aCAXvGrP2JNYo1/Q==
+
 "@expo/osascript@^2.0.31":
   version "2.0.33"
   resolved "https://registry.npmjs.org/@expo/osascript/-/osascript-2.0.33.tgz"