diff --git a/package.json b/package.json
index bbd8e94..2d6b064 100644
--- 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
new file mode 100644
index 0000000..c0d732f
--- /dev/null
+++ 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 (
+
+ Finwise
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/Loading.tsx b/src/Components/Loading.tsx
new file mode 100644
index 0000000..cf4060c
--- /dev/null
+++ 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 (
+
+
+
+
+ { i18n.locale === Language.ENGLISH
+ ?
+
+ Make wise financial moves with
+
+ :
+
+ Tài chính thông minh
+ dẫn bước cùng
+
+ }
+
+
+
+ {i18n.t(LocalizationKey.LOADING)}
+
+
+ )
+}
+
+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
+ }
+})
\ No newline at end of file
diff --git a/src/Components/Logo.tsx b/src/Components/Logo.tsx
new file mode 100644
index 0000000..80ae01c
--- /dev/null
+++ 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) => (
+
+)
diff --git a/src/Components/index.ts b/src/Components/index.ts
index e69de29..569b627 100644
--- a/src/Components/index.ts
+++ b/src/Components/index.ts
@@ -0,0 +1,3 @@
+export * from "./Brand";
+export * from "./Loading";
+export * from "./Logo";
\ No newline at end of file
diff --git a/src/Navigation/Main/index.tsx b/src/Navigation/Main/index.tsx
index c773522..15c2c7f 100644
--- 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 }) => (
-
+
),
}}
/>
@@ -35,7 +35,7 @@ export const MainNavigator = () => {
options={{
tabBarLabel: i18n.t(LocalizationKey.TRANSACTIONS),
tabBarIcon: ({ color }) => (
-
+
),
}}
/>
@@ -45,7 +45,7 @@ export const MainNavigator = () => {
options={{
tabBarLabel: i18n.t(LocalizationKey.ADD),
tabBarIcon: ({ color }) => (
-
+
),
}}
/>
@@ -55,7 +55,7 @@ export const MainNavigator = () => {
options={{
tabBarLabel: i18n.t(LocalizationKey.WALLETS),
tabBarIcon: ({ color }) => (
-
+
),
}}
/>
@@ -65,7 +65,7 @@ export const MainNavigator = () => {
options={{
tabBarLabel: i18n.t(LocalizationKey.BUDGETS),
tabBarIcon: ({ color }) => (
-
+
),
}}
/>
diff --git a/src/Navigation/NavigationBar.tsx b/src/Navigation/NavigationBar.tsx
index 4e60cb7..28642b1 100644
--- a/src/Navigation/NavigationBar.tsx
+++ b/src/Navigation/NavigationBar.tsx
@@ -22,7 +22,7 @@ export const NavigationBar: FC = ({ navigation, route, o
?
: null
}
-
+
)
}
@@ -33,9 +33,9 @@ export const NavigationBar: FC = ({ navigation, route, o
?
: null
}
-
+
-
+
{
// 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
index cf33191..ededbc8 100644
--- 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 (
- <>
-
+
+
+
)
}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 34513b3..22b5622 100644
--- 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"