From 4568702bbeed6ccefe2e781f61b160591b2b10e2 Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Wed, 15 Jan 2025 18:29:33 -0800 Subject: [PATCH 01/19] Tab folders, files structure with added layout file --- frontend/App.tsx | 18 +++++++++--------- frontend/google-services.json | 2 +- frontend/src/app/_layout.tsx | 1 + frontend/src/app/index.tsx | 18 +++++++++--------- frontend/src/app/tabs/_layout.tsx | 0 frontend/src/app/tabs/heart.tsx | 18 ++++++++++++++++++ frontend/src/app/tabs/home.tsx | 19 +++++++++++++++++++ frontend/src/app/tabs/index.tsx | 30 ++++++++++++++++++++++++++++++ frontend/src/app/tabs/profile.tsx | 19 +++++++++++++++++++ 9 files changed, 106 insertions(+), 19 deletions(-) create mode 100644 frontend/src/app/tabs/_layout.tsx create mode 100644 frontend/src/app/tabs/heart.tsx create mode 100644 frontend/src/app/tabs/home.tsx create mode 100644 frontend/src/app/tabs/index.tsx create mode 100644 frontend/src/app/tabs/profile.tsx diff --git a/frontend/App.tsx b/frontend/App.tsx index ed246cf..e35d2c4 100644 --- a/frontend/App.tsx +++ b/frontend/App.tsx @@ -1,15 +1,6 @@ import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native"; -export default function App() { - return ( - - Home screen - - - ); -} - const styles = StyleSheet.create({ container: { flex: 1, @@ -21,3 +12,12 @@ const styles = StyleSheet.create({ color: "#fff", }, }); + +export default function App() { + return ( + + Home screen + + + ); +} diff --git a/frontend/google-services.json b/frontend/google-services.json index df1359f..e4331f4 100644 --- a/frontend/google-services.json +++ b/frontend/google-services.json @@ -51,4 +51,4 @@ } ], "configuration_version": "1" -} \ No newline at end of file +} diff --git a/frontend/src/app/_layout.tsx b/frontend/src/app/_layout.tsx index 5810d04..af6e56a 100644 --- a/frontend/src/app/_layout.tsx +++ b/frontend/src/app/_layout.tsx @@ -4,6 +4,7 @@ const RootLayout = () => { return ( + ); }; diff --git a/frontend/src/app/index.tsx b/frontend/src/app/index.tsx index 8de3751..4093eb9 100644 --- a/frontend/src/app/index.tsx +++ b/frontend/src/app/index.tsx @@ -1,14 +1,5 @@ import { StatusBar, StyleSheet, Text, View } from "react-native"; -export default function App() { - return ( - - New Home - - - ); -} - const styles = StyleSheet.create({ container: { flex: 1, @@ -20,3 +11,12 @@ const styles = StyleSheet.create({ color: "#fff", }, }); + +export default function App() { + return ( + + New Home + + + ); +} diff --git a/frontend/src/app/tabs/_layout.tsx b/frontend/src/app/tabs/_layout.tsx new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/tabs/heart.tsx b/frontend/src/app/tabs/heart.tsx new file mode 100644 index 0000000..0e3593b --- /dev/null +++ b/frontend/src/app/tabs/heart.tsx @@ -0,0 +1,18 @@ +// Route to dummy page +import { StyleSheet, Text, View } from "react-native"; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + }, +}); + +export default function Tab() { + return ( + + Tab [Home|Heart|Profile] + + ); +} diff --git a/frontend/src/app/tabs/home.tsx b/frontend/src/app/tabs/home.tsx new file mode 100644 index 0000000..f9c6ab5 --- /dev/null +++ b/frontend/src/app/tabs/home.tsx @@ -0,0 +1,19 @@ +// Route to internet error + +import { StyleSheet, Text, View } from "react-native"; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + }, +}); + +export default function Tab() { + return ( + + Tab [Home|Heart|Profile] + + ); +} diff --git a/frontend/src/app/tabs/index.tsx b/frontend/src/app/tabs/index.tsx new file mode 100644 index 0000000..9e363e1 --- /dev/null +++ b/frontend/src/app/tabs/index.tsx @@ -0,0 +1,30 @@ +import FontAwesome from "@expo/vector-icons/FontAwesome"; +import { Tabs } from "expo-router"; + +export default function TabLayout() { + return ( + + , + }} + /> + , + }} + /> + , + }} + /> + + ); +} diff --git a/frontend/src/app/tabs/profile.tsx b/frontend/src/app/tabs/profile.tsx new file mode 100644 index 0000000..f87917f --- /dev/null +++ b/frontend/src/app/tabs/profile.tsx @@ -0,0 +1,19 @@ +// Route to dummy page + +import { StyleSheet, Text, View } from "react-native"; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + }, +}); + +export default function Tab() { + return ( + + Tab [Home|Heart|Profile] + + ); +} From 264ecfd94aa2338b004dcba5795f4711d705fa95 Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Thu, 16 Jan 2025 14:51:36 -0800 Subject: [PATCH 02/19] Changed names --- frontend/babel.config.js | 1 + frontend/package-lock.json | 11 ++++------- frontend/package.json | 2 +- .../src/app/{tabs/index.tsx => (tabs)/_layout.tsx} | 8 ++++---- frontend/src/app/{tabs => (tabs)}/heart.tsx | 0 frontend/src/app/{tabs => (tabs)}/home.tsx | 0 frontend/src/app/{tabs => (tabs)}/profile.tsx | 0 frontend/src/app/_layout.tsx | 2 +- frontend/src/app/tabs/_layout.tsx | 0 9 files changed, 11 insertions(+), 13 deletions(-) rename frontend/src/app/{tabs/index.tsx => (tabs)/_layout.tsx} (87%) rename frontend/src/app/{tabs => (tabs)}/heart.tsx (100%) rename frontend/src/app/{tabs => (tabs)}/home.tsx (100%) rename frontend/src/app/{tabs => (tabs)}/profile.tsx (100%) delete mode 100644 frontend/src/app/tabs/_layout.tsx diff --git a/frontend/babel.config.js b/frontend/babel.config.js index 018c823..6a08a3f 100644 --- a/frontend/babel.config.js +++ b/frontend/babel.config.js @@ -4,5 +4,6 @@ module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], + plugins: ["expo-router/babel"], }; }; diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0e9dfad..2bc7db1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20,7 +20,7 @@ "expo-status-bar": "~2.0.0", "react": "18.3.1", "react-native": "0.76.5", - "react-native-safe-area-context": "4.12.0", + "react-native-safe-area-context": "^4.12.0", "react-native-screens": "~4.4.0" }, "devDependencies": { @@ -8473,10 +8473,9 @@ } }, "node_modules/expo-router": { - "version": "4.0.15", - "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-4.0.15.tgz", - "integrity": "sha512-5MDy7iVzgi8lheRunsR4lTKEKTNqukC3uYSWhY370Nakdd+E/Woz+Vw1M67/KrnvefTV5hF97bNUUMzY+fyojw==", - "license": "MIT", + "version": "4.0.16", + "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-4.0.16.tgz", + "integrity": "sha512-KRGUxo43g9gCWbq9cJn5AkxW+rOxoJwBNv3X57Ylns5j/5p6WUMiKnRJOT4k8wmMQTQGzH37gGDx3ufI2A9Q2g==", "dependencies": { "@expo/metro-runtime": "4.0.0", "@expo/server": "^0.5.0", @@ -13003,7 +13002,6 @@ "version": "4.12.0", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.12.0.tgz", "integrity": "sha512-ukk5PxcF4p3yu6qMZcmeiZgowhb5AsKRnil54YFUUAXVIS7PJcMHGGC+q44fCiBg44/1AJk5njGMez1m9H0BVQ==", - "license": "MIT", "peerDependencies": { "react": "*", "react-native": "*" @@ -13013,7 +13011,6 @@ "version": "4.4.0", "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.4.0.tgz", "integrity": "sha512-c7zc7Zwjty6/pGyuuvh9gK3YBYqHPOxrhXfG1lF4gHlojQSmIx2piNbNaV+Uykj+RDTmFXK0e/hA+fucw/Qozg==", - "license": "MIT", "dependencies": { "react-freeze": "^1.0.0", "warn-once": "^0.1.0" diff --git a/frontend/package.json b/frontend/package.json index 1f2e4f3..a4cdca0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,7 +27,7 @@ "expo-status-bar": "~2.0.0", "react": "18.3.1", "react-native": "0.76.5", - "react-native-safe-area-context": "4.12.0", + "react-native-safe-area-context": "^4.12.0", "react-native-screens": "~4.4.0" }, "devDependencies": { diff --git a/frontend/src/app/tabs/index.tsx b/frontend/src/app/(tabs)/_layout.tsx similarity index 87% rename from frontend/src/app/tabs/index.tsx rename to frontend/src/app/(tabs)/_layout.tsx index 9e363e1..4ec49a3 100644 --- a/frontend/src/app/tabs/index.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -7,21 +7,21 @@ export default function TabLayout() { , }} /> , }} /> , }} /> diff --git a/frontend/src/app/tabs/heart.tsx b/frontend/src/app/(tabs)/heart.tsx similarity index 100% rename from frontend/src/app/tabs/heart.tsx rename to frontend/src/app/(tabs)/heart.tsx diff --git a/frontend/src/app/tabs/home.tsx b/frontend/src/app/(tabs)/home.tsx similarity index 100% rename from frontend/src/app/tabs/home.tsx rename to frontend/src/app/(tabs)/home.tsx diff --git a/frontend/src/app/tabs/profile.tsx b/frontend/src/app/(tabs)/profile.tsx similarity index 100% rename from frontend/src/app/tabs/profile.tsx rename to frontend/src/app/(tabs)/profile.tsx diff --git a/frontend/src/app/_layout.tsx b/frontend/src/app/_layout.tsx index af6e56a..6df5ac0 100644 --- a/frontend/src/app/_layout.tsx +++ b/frontend/src/app/_layout.tsx @@ -3,7 +3,7 @@ import { Stack } from "expo-router"; const RootLayout = () => { return ( - + {/* */} ); diff --git a/frontend/src/app/tabs/_layout.tsx b/frontend/src/app/tabs/_layout.tsx deleted file mode 100644 index e69de29..0000000 From b8b395b4aa95d87860e12c9025bbf386101bb345 Mon Sep 17 00:00:00 2001 From: Rudraksh Bhandari Date: Thu, 16 Jan 2025 15:25:14 -0800 Subject: [PATCH 03/19] Added 3 tabs but need to change icons --- frontend/google-services.json | 2 +- frontend/package-lock.json | 10 ++-- frontend/package.json | 4 +- frontend/src/app/(tabs)/_layout.tsx | 49 ++++++++++++++++++++ frontend/src/app/(tabs)/index.tsx | 23 +++++++++ frontend/src/app/(tabs)/profile.tsx | 23 +++++++++ frontend/src/app/(tabs)/resources.tsx | 23 +++++++++ frontend/src/app/_layout.tsx | 2 +- frontend/src/app/{index.tsx => old_home.tsx} | 2 +- 9 files changed, 130 insertions(+), 8 deletions(-) create mode 100644 frontend/src/app/(tabs)/_layout.tsx create mode 100644 frontend/src/app/(tabs)/index.tsx create mode 100644 frontend/src/app/(tabs)/profile.tsx create mode 100644 frontend/src/app/(tabs)/resources.tsx rename frontend/src/app/{index.tsx => old_home.tsx} (88%) diff --git a/frontend/google-services.json b/frontend/google-services.json index df1359f..e4331f4 100644 --- a/frontend/google-services.json +++ b/frontend/google-services.json @@ -51,4 +51,4 @@ } ], "configuration_version": "1" -} \ No newline at end of file +} diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0e9dfad..feb18b8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "@react-native-firebase/app": "^21.6.2", "@react-native-firebase/auth": "^21.6.2", + "@react-navigation/bottom-tabs": "^7.2.0", + "@react-navigation/native": "^7.0.14", "expo": "~52.0.20", "expo-build-properties": "~0.13.1", "expo-constants": "~17.0.3", @@ -20,7 +22,7 @@ "expo-status-bar": "~2.0.0", "react": "18.3.1", "react-native": "0.76.5", - "react-native-safe-area-context": "4.12.0", + "react-native-safe-area-context": "^4.12.0", "react-native-screens": "~4.4.0" }, "devDependencies": { @@ -8473,9 +8475,9 @@ } }, "node_modules/expo-router": { - "version": "4.0.15", - "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-4.0.15.tgz", - "integrity": "sha512-5MDy7iVzgi8lheRunsR4lTKEKTNqukC3uYSWhY370Nakdd+E/Woz+Vw1M67/KrnvefTV5hF97bNUUMzY+fyojw==", + "version": "4.0.16", + "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-4.0.16.tgz", + "integrity": "sha512-KRGUxo43g9gCWbq9cJn5AkxW+rOxoJwBNv3X57Ylns5j/5p6WUMiKnRJOT4k8wmMQTQGzH37gGDx3ufI2A9Q2g==", "license": "MIT", "dependencies": { "@expo/metro-runtime": "4.0.0", diff --git a/frontend/package.json b/frontend/package.json index 1f2e4f3..33751db 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,8 @@ "dependencies": { "@react-native-firebase/app": "^21.6.2", "@react-native-firebase/auth": "^21.6.2", + "@react-navigation/bottom-tabs": "^7.2.0", + "@react-navigation/native": "^7.0.14", "expo": "~52.0.20", "expo-build-properties": "~0.13.1", "expo-constants": "~17.0.3", @@ -27,7 +29,7 @@ "expo-status-bar": "~2.0.0", "react": "18.3.1", "react-native": "0.76.5", - "react-native-safe-area-context": "4.12.0", + "react-native-safe-area-context": "^4.12.0", "react-native-screens": "~4.4.0" }, "devDependencies": { diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx new file mode 100644 index 0000000..756c44c --- /dev/null +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -0,0 +1,49 @@ +import FontAwesome from "@expo/vector-icons/FontAwesome"; +import { Tabs } from "expo-router"; +import { Platform } from "react-native"; + +export default function TabLayout() { + return ( + + {/* Home Tab */} + , + }} + /> + + {/* Resources Tab */} + + {/* Profile Tab */} + + , + }} + /> + , + }} + /> + + ); +} diff --git a/frontend/src/app/(tabs)/index.tsx b/frontend/src/app/(tabs)/index.tsx new file mode 100644 index 0000000..54361b5 --- /dev/null +++ b/frontend/src/app/(tabs)/index.tsx @@ -0,0 +1,23 @@ +import { View, Text, StyleSheet } from "react-native"; + +export default function Home() { + return ( + + Home + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#25292e", // Dark background color + alignItems: "center", // Horizontally centers the content + justifyContent: "center", // Vertically centers the content + }, + text: { + color: "#ffffff", // White text color + fontSize: 24, // Text size + fontWeight: "bold", // Bold text + }, +}); diff --git a/frontend/src/app/(tabs)/profile.tsx b/frontend/src/app/(tabs)/profile.tsx new file mode 100644 index 0000000..3451eeb --- /dev/null +++ b/frontend/src/app/(tabs)/profile.tsx @@ -0,0 +1,23 @@ +import { View, Text, StyleSheet } from "react-native"; + +export default function Profile() { + return ( + + Profile + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#25292e", // Dark background color + alignItems: "center", // Horizontally centers the content + justifyContent: "center", // Vertically centers the content + }, + text: { + color: "#ffffff", // White text color + fontSize: 24, // Text size + fontWeight: "bold", // Bold text + }, +}); diff --git a/frontend/src/app/(tabs)/resources.tsx b/frontend/src/app/(tabs)/resources.tsx new file mode 100644 index 0000000..1837b3c --- /dev/null +++ b/frontend/src/app/(tabs)/resources.tsx @@ -0,0 +1,23 @@ +import { View, Text, StyleSheet } from "react-native"; + +export default function Resources() { + return ( + + Resources + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#25292e", // Dark background color + alignItems: "center", // Horizontally centers the content + justifyContent: "center", // Vertically centers the content + }, + text: { + color: "#ffffff", // White text color + fontSize: 24, // Text size + fontWeight: "bold", // Bold text + }, +}); diff --git a/frontend/src/app/_layout.tsx b/frontend/src/app/_layout.tsx index 5810d04..7798427 100644 --- a/frontend/src/app/_layout.tsx +++ b/frontend/src/app/_layout.tsx @@ -3,7 +3,7 @@ import { Stack } from "expo-router"; const RootLayout = () => { return ( - + ); }; diff --git a/frontend/src/app/index.tsx b/frontend/src/app/old_home.tsx similarity index 88% rename from frontend/src/app/index.tsx rename to frontend/src/app/old_home.tsx index 8de3751..9fe2a64 100644 --- a/frontend/src/app/index.tsx +++ b/frontend/src/app/old_home.tsx @@ -3,7 +3,7 @@ import { StatusBar, StyleSheet, Text, View } from "react-native"; export default function App() { return ( - New Home + Old Home ); From 47c526faeb97724327ff0391cc9940e522d25db0 Mon Sep 17 00:00:00 2001 From: Rudraksh Bhandari Date: Mon, 20 Jan 2025 16:19:18 -0800 Subject: [PATCH 04/19] Rounded the corners of the tabs --- frontend/src/app/(tabs)/_layout.tsx | 5 +++++ frontend/src/app/(tabs)/index.tsx | 12 ++++++------ frontend/src/app/(tabs)/profile.tsx | 12 ++++++------ frontend/src/app/(tabs)/resources.tsx | 12 ++++++------ 4 files changed, 23 insertions(+), 18 deletions(-) diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx index 756c44c..88c85ca 100644 --- a/frontend/src/app/(tabs)/_layout.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -11,6 +11,11 @@ export default function TabLayout() { tabBarStyle: { paddingBottom: Platform.OS === "ios" ? 20 : 10, // Adjusts padding based on platform backgroundColor: "#fff", // Tab bar background color + // borderRadius: 30, + borderTopLeftRadius: 30, // this is in px since react native uses pixels instead of rem + borderTopRightRadius: 30, + overflow: "hidden", + position: "absolute", }, tabBarLabelStyle: { fontSize: 14, // Label font size diff --git a/frontend/src/app/(tabs)/index.tsx b/frontend/src/app/(tabs)/index.tsx index 54361b5..c367b2e 100644 --- a/frontend/src/app/(tabs)/index.tsx +++ b/frontend/src/app/(tabs)/index.tsx @@ -11,13 +11,13 @@ export default function Home() { const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: "#25292e", // Dark background color - alignItems: "center", // Horizontally centers the content - justifyContent: "center", // Vertically centers the content + backgroundColor: "green", + alignItems: "center", + justifyContent: "center", }, text: { - color: "#ffffff", // White text color - fontSize: 24, // Text size - fontWeight: "bold", // Bold text + color: "#ffffff", + fontSize: 24, + fontWeight: "bold", }, }); diff --git a/frontend/src/app/(tabs)/profile.tsx b/frontend/src/app/(tabs)/profile.tsx index 3451eeb..5af592e 100644 --- a/frontend/src/app/(tabs)/profile.tsx +++ b/frontend/src/app/(tabs)/profile.tsx @@ -11,13 +11,13 @@ export default function Profile() { const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: "#25292e", // Dark background color - alignItems: "center", // Horizontally centers the content - justifyContent: "center", // Vertically centers the content + backgroundColor: "green", + alignItems: "center", + justifyContent: "center", }, text: { - color: "#ffffff", // White text color - fontSize: 24, // Text size - fontWeight: "bold", // Bold text + color: "#ffffff", + fontSize: 24, + fontWeight: "bold", }, }); diff --git a/frontend/src/app/(tabs)/resources.tsx b/frontend/src/app/(tabs)/resources.tsx index 1837b3c..b505ae2 100644 --- a/frontend/src/app/(tabs)/resources.tsx +++ b/frontend/src/app/(tabs)/resources.tsx @@ -11,13 +11,13 @@ export default function Resources() { const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: "#25292e", // Dark background color - alignItems: "center", // Horizontally centers the content - justifyContent: "center", // Vertically centers the content + backgroundColor: "green", + alignItems: "center", + justifyContent: "center", }, text: { - color: "#ffffff", // White text color - fontSize: 24, // Text size - fontWeight: "bold", // Bold text + color: "#ffffff", + fontSize: 24, + fontWeight: "bold", }, }); From dbc8426e41ae30310e59ae8610c924ea0aa0b18d Mon Sep 17 00:00:00 2001 From: Rudraksh Bhandari Date: Mon, 20 Jan 2025 16:35:27 -0800 Subject: [PATCH 05/19] Fixed styling of the tabs border radius, and added the icon svg files to assets folder --- frontend/src/app/(tabs)/_layout.tsx | 9 ++++----- frontend/src/assets/home-icon.svg | 3 +++ frontend/src/assets/profile-icon.svg | 9 +++++++++ frontend/src/assets/resources-icon.svg | 3 +++ 4 files changed, 19 insertions(+), 5 deletions(-) create mode 100644 frontend/src/assets/home-icon.svg create mode 100644 frontend/src/assets/profile-icon.svg create mode 100644 frontend/src/assets/resources-icon.svg diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx index 88c85ca..dd870e6 100644 --- a/frontend/src/app/(tabs)/_layout.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -7,19 +7,18 @@ export default function TabLayout() { {/* Home Tab */} diff --git a/frontend/src/assets/home-icon.svg b/frontend/src/assets/home-icon.svg new file mode 100644 index 0000000..8eedec4 --- /dev/null +++ b/frontend/src/assets/home-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/profile-icon.svg b/frontend/src/assets/profile-icon.svg new file mode 100644 index 0000000..170c155 --- /dev/null +++ b/frontend/src/assets/profile-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/resources-icon.svg b/frontend/src/assets/resources-icon.svg new file mode 100644 index 0000000..8ad077a --- /dev/null +++ b/frontend/src/assets/resources-icon.svg @@ -0,0 +1,3 @@ + + + From f84d19ff28404e0a3930e9a020acb4c1c6c4e3c8 Mon Sep 17 00:00:00 2001 From: Rudraksh Bhandari Date: Mon, 20 Jan 2025 16:52:16 -0800 Subject: [PATCH 06/19] Added the declarations.d.ts file to incorporate svg files without issues. But currently facing a different error when rendering the svg image in layout file --- frontend/declarations.d.ts | 9 +++++++++ frontend/src/app/(tabs)/_layout.tsx | 4 +++- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 frontend/declarations.d.ts diff --git a/frontend/declarations.d.ts b/frontend/declarations.d.ts new file mode 100644 index 0000000..22f6a84 --- /dev/null +++ b/frontend/declarations.d.ts @@ -0,0 +1,9 @@ +declare module "*.svg" { + import React from "react"; + + import { SvgProps } from "react-native-svg"; + + const content: React.FC; + + export default content; +} diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx index dd870e6..4f8aa72 100644 --- a/frontend/src/app/(tabs)/_layout.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -1,6 +1,7 @@ import FontAwesome from "@expo/vector-icons/FontAwesome"; import { Tabs } from "expo-router"; import { Platform } from "react-native"; +import HomeIcon from "../../assets/home-icon.svg"; export default function TabLayout() { return ( @@ -26,7 +27,8 @@ export default function TabLayout() { name="index" options={{ title: "Home", - tabBarIcon: ({ color }) => , + // tabBarIcon: ({ color }) => , + tabBarIcon: () => , }} /> From 78330ed99381c393d0d010264052e93aa66c8dd6 Mon Sep 17 00:00:00 2001 From: Rudraksh Bhandari Date: Mon, 20 Jan 2025 17:19:38 -0800 Subject: [PATCH 07/19] added metro.config.js file in frontend/ --- frontend/.eslintignore | 1 + frontend/declarations.d.ts | 1 - frontend/metro.config.js | 20 + frontend/package-lock.json | 780 +++++++++++++++++++++++++- frontend/package.json | 4 +- frontend/src/app/(tabs)/_layout.tsx | 1 + frontend/src/app/(tabs)/index.tsx | 2 +- frontend/src/app/(tabs)/profile.tsx | 2 +- frontend/src/app/(tabs)/resources.tsx | 2 +- 9 files changed, 807 insertions(+), 6 deletions(-) create mode 100644 frontend/metro.config.js diff --git a/frontend/.eslintignore b/frontend/.eslintignore index 5092b4e..8575b31 100644 --- a/frontend/.eslintignore +++ b/frontend/.eslintignore @@ -6,3 +6,4 @@ out/ public/ next.config.js vite.config.ts +metro.config.js diff --git a/frontend/declarations.d.ts b/frontend/declarations.d.ts index 22f6a84..7dfe1b6 100644 --- a/frontend/declarations.d.ts +++ b/frontend/declarations.d.ts @@ -1,6 +1,5 @@ declare module "*.svg" { import React from "react"; - import { SvgProps } from "react-native-svg"; const content: React.FC; diff --git a/frontend/metro.config.js b/frontend/metro.config.js new file mode 100644 index 0000000..3a1cd88 --- /dev/null +++ b/frontend/metro.config.js @@ -0,0 +1,20 @@ +// metro.config.js +const { getDefaultConfig } = require("expo/metro-config"); + +module.exports = (() => { + const config = getDefaultConfig(__dirname); + + const { transformer, resolver } = config; + + config.transformer = { + ...transformer, + babelTransformerPath: require.resolve("react-native-svg-transformer"), + }; + config.resolver = { + ...resolver, + assetExts: resolver.assetExts.filter((ext) => ext !== "svg"), + sourceExts: [...resolver.sourceExts, "svg"], + }; + + return config; +})(); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index feb18b8..366afef 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,7 +23,8 @@ "react": "18.3.1", "react-native": "0.76.5", "react-native-safe-area-context": "^4.12.0", - "react-native-screens": "~4.4.0" + "react-native-screens": "~4.4.0", + "react-native-svg": "^15.11.1" }, "devDependencies": { "@babel/core": "^7.25.2", @@ -37,6 +38,7 @@ "eslint-plugin-import": "^2.31.0", "husky": "^9.1.7", "prettier": "^3.4.2", + "react-native-svg-transformer": "^1.5.0", "typescript": "^5.3.3" } }, @@ -4841,6 +4843,462 @@ "@sinonjs/commons": "^3.0.0" } }, + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-dynamic-title": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-em-dimensions": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-react-native-svg": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-svg-component": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-preset": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "dev": true, + "license": "MIT", + "dependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", + "@svgr/babel-plugin-transform-svg-component": "8.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "camelcase": "^6.2.0", + "cosmiconfig": "^8.1.3", + "snake-case": "^3.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/core/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true, + "license": "Python-2.0" + }, + "node_modules/@svgr/core/node_modules/camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@svgr/core/node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dev": true, + "license": "MIT", + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@svgr/core/node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@svgr/core/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/@svgr/core/node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@svgr/core/node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/@svgr/hast-util-to-babel-ast": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.21.3", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/plugin-jsx": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "@svgr/hast-util-to-babel-ast": "8.0.0", + "svg-parser": "^2.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, + "node_modules/@svgr/plugin-svgo": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz", + "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==", + "dev": true, + "license": "MIT", + "dependencies": { + "cosmiconfig": "^8.1.3", + "deepmerge": "^4.3.1", + "svgo": "^3.0.2" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true, + "license": "Python-2.0" + }, + "node_modules/@svgr/plugin-svgo/node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dev": true, + "license": "MIT", + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -6039,6 +6497,12 @@ "node": ">=0.6" } }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "license": "ISC" + }, "node_modules/bplist-creator": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.0.7.tgz", @@ -6795,6 +7259,92 @@ "node": ">=8" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/css-tree/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "css-tree": "~2.2.0" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dev": true, + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "dev": true, + "license": "CC0-1.0" + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -7085,6 +7635,72 @@ "node": ">=6.0.0" } }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "license": "MIT", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "BSD-2-Clause" + }, + "node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "license": "BSD-2-Clause", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", + "license": "BSD-2-Clause", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "license": "MIT", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/dotenv": { "version": "16.4.7", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz", @@ -7182,6 +7798,18 @@ "node": ">=10.13.0" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/env-editor": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/env-editor/-/env-editor-0.4.2.tgz", @@ -10422,6 +11050,13 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "license": "MIT" }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true, + "license": "MIT" + }, "node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -10950,6 +11585,16 @@ "loose-envify": "cli.js" } }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -11031,6 +11676,12 @@ "node": ">=0.10" } }, + "node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "license": "CC0-1.0" + }, "node_modules/memoize-one": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", @@ -11726,6 +12377,17 @@ "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", "license": "MIT" }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "license": "MIT", + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/node-abort-controller": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz", @@ -11842,6 +12504,18 @@ "node": ">=4" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/nullthrows": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz", @@ -12308,6 +12982,13 @@ "cross-spawn": "^7.0.3" } }, + "node_modules/path-dirname": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz", + "integrity": "sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==", + "dev": true, + "license": "MIT" + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -13025,6 +13706,38 @@ "react-native": "*" } }, + "node_modules/react-native-svg": { + "version": "15.11.1", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.11.1.tgz", + "integrity": "sha512-Qmwx/yJKt+AHUr4zjxx/Q69qwKtRfr1+uIfFMQoq3WFRhqU76aL9db1DyvPiY632DAsVGba1pHf92OZPkpjrdQ==", + "license": "MIT", + "dependencies": { + "css-select": "^5.1.0", + "css-tree": "^1.1.3", + "warn-once": "0.1.1" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-svg-transformer": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/react-native-svg-transformer/-/react-native-svg-transformer-1.5.0.tgz", + "integrity": "sha512-RG5fSWJT7mjCQYocgYFUo1KYPLOoypPVG5LQab+pZZO7m4ciGaQIe0mhok3W4R5jLQsEXKo0u+aQGkZV/bZG7w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0", + "@svgr/plugin-svgo": "^8.1.0", + "path-dirname": "^1.0.2" + }, + "peerDependencies": { + "react-native": ">=0.59.0", + "react-native-svg": ">=12.0.0" + } + }, "node_modules/react-native/node_modules/babel-plugin-syntax-hermes-parser": { "version": "0.23.1", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.23.1.tgz", @@ -13991,6 +14704,17 @@ "node": ">=8.0.0" } }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "license": "MIT", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -14483,6 +15207,60 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-parser": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/svgo": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", + "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^5.1.0", + "css-tree": "^2.3.1", + "css-what": "^6.1.0", + "csso": "^5.0.5", + "picocolors": "^1.0.0" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/svgo" + } + }, + "node_modules/svgo/node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/svgo/node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true, + "license": "CC0-1.0" + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 33751db..c4d5080 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -30,7 +30,8 @@ "react": "18.3.1", "react-native": "0.76.5", "react-native-safe-area-context": "^4.12.0", - "react-native-screens": "~4.4.0" + "react-native-screens": "~4.4.0", + "react-native-svg": "^15.11.1" }, "devDependencies": { "@babel/core": "^7.25.2", @@ -44,6 +45,7 @@ "eslint-plugin-import": "^2.31.0", "husky": "^9.1.7", "prettier": "^3.4.2", + "react-native-svg-transformer": "^1.5.0", "typescript": "^5.3.3" }, "private": true diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx index 4f8aa72..259dcfa 100644 --- a/frontend/src/app/(tabs)/_layout.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -1,6 +1,7 @@ import FontAwesome from "@expo/vector-icons/FontAwesome"; import { Tabs } from "expo-router"; import { Platform } from "react-native"; + import HomeIcon from "../../assets/home-icon.svg"; export default function TabLayout() { diff --git a/frontend/src/app/(tabs)/index.tsx b/frontend/src/app/(tabs)/index.tsx index c367b2e..4d815ab 100644 --- a/frontend/src/app/(tabs)/index.tsx +++ b/frontend/src/app/(tabs)/index.tsx @@ -1,4 +1,4 @@ -import { View, Text, StyleSheet } from "react-native"; +import { StyleSheet, Text, View } from "react-native"; export default function Home() { return ( diff --git a/frontend/src/app/(tabs)/profile.tsx b/frontend/src/app/(tabs)/profile.tsx index 5af592e..980551f 100644 --- a/frontend/src/app/(tabs)/profile.tsx +++ b/frontend/src/app/(tabs)/profile.tsx @@ -1,4 +1,4 @@ -import { View, Text, StyleSheet } from "react-native"; +import { StyleSheet, Text, View } from "react-native"; export default function Profile() { return ( diff --git a/frontend/src/app/(tabs)/resources.tsx b/frontend/src/app/(tabs)/resources.tsx index b505ae2..e0e9b14 100644 --- a/frontend/src/app/(tabs)/resources.tsx +++ b/frontend/src/app/(tabs)/resources.tsx @@ -1,4 +1,4 @@ -import { View, Text, StyleSheet } from "react-native"; +import { StyleSheet, Text, View } from "react-native"; export default function Resources() { return ( From 2ae150938735fe2a4b467e9ca4f84d412f753038 Mon Sep 17 00:00:00 2001 From: Rudraksh Bhandari Date: Mon, 20 Jan 2025 18:43:50 -0800 Subject: [PATCH 08/19] Tried fixing the errors but instead made things work...app isnt launching. gonna try changing podfile and reinstalling pods --- .DS_Store | Bin 0 -> 6148 bytes frontend/.eslintignore | 1 + frontend/metro.config.js | 44 ++++++++++++++++++---------- frontend/src/app/(tabs)/_layout.tsx | 10 +++++-- frontend/src/app/(tabs)/index.tsx | 2 ++ frontend/src/assets/home-icon.svg | 4 ++- frontend/src/assets/simple-icon.svg | 4 +++ frontend/svg.d.ts | 7 +++++ frontend/tsconfig.json | 3 +- metro.config.js | 20 +++++++++++++ 10 files changed, 74 insertions(+), 21 deletions(-) create mode 100644 .DS_Store create mode 100644 frontend/src/assets/simple-icon.svg create mode 100644 frontend/svg.d.ts create mode 100644 metro.config.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c8f0dc2eb2bd6889f201135200ab24a3d2cbe688 GIT binary patch literal 6148 zcmeHK%}T>S5Z-O8-BN@c6nYGJE!fsS#7l_v1&ruHr8XpLFlI}V+CwSitS{t~_&m<+ zZotwUJc-yD*nG3|v%B*__J=XX-D%Kg%wmiQXowt@3PE$Ft7d``xf&y9Axl``&$3Cy zK!4GMYZvT+rA)%gzpdYor4POje-cMo-s^qxTD`Hc*%VFD7I)s0oO$^;pJwhjy}{n4 zl(ApxWB)1&XCrI-OeXm_O2SknL_r84x7Se;$eAmrNsy^rPdh|Qv_@8EJ|7$&ckP2- zf6=w)Cxag7`$vmKOYH3KonDNdQ5`*}-nBaK;^t^d$y}fn^5jx@+P2 ze-6J) { +// const config = getDefaultConfig(__dirname); + +// const { transformer, resolver } = config; + +// config.transformer = { +// ...transformer, +// babelTransformerPath: require.resolve("react-native-svg-transformer"), +// }; +// config.resolver = { +// ...resolver, +// assetExts: resolver.assetExts.filter((ext) => ext !== "svg"), +// sourceExts: [...resolver.sourceExts, "svg"], +// }; -module.exports = (() => { - const config = getDefaultConfig(__dirname); +// return config; +// })(); + +// frontend/metro.config.js + +const { getDefaultConfig } = require("expo/metro-config"); - const { transformer, resolver } = config; +const defaultConfig = getDefaultConfig(__dirname); - config.transformer = { - ...transformer, - babelTransformerPath: require.resolve("react-native-svg-transformer"), - }; - config.resolver = { - ...resolver, - assetExts: resolver.assetExts.filter((ext) => ext !== "svg"), - sourceExts: [...resolver.sourceExts, "svg"], - }; +defaultConfig.transformer.babelTransformerPath = require.resolve("react-native-svg-transformer"); +defaultConfig.resolver.assetExts = defaultConfig.resolver.assetExts.filter((ext) => ext !== "svg"); +defaultConfig.resolver.sourceExts.push("svg"); - return config; -})(); +module.exports = defaultConfig; diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx index 259dcfa..9992ee9 100644 --- a/frontend/src/app/(tabs)/_layout.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -3,6 +3,8 @@ import { Tabs } from "expo-router"; import { Platform } from "react-native"; import HomeIcon from "../../assets/home-icon.svg"; +import ResourcesIcon from "../../assets/resources-icon.svg"; +import SimpleIcon from "../../assets/simple-icon.svg"; export default function TabLayout() { return ( @@ -29,7 +31,7 @@ export default function TabLayout() { options={{ title: "Home", // tabBarIcon: ({ color }) => , - tabBarIcon: () => , + tabBarIcon: () => , }} /> @@ -41,14 +43,16 @@ export default function TabLayout() { name="resources" options={{ title: "Resources", - tabBarIcon: ({ color }) => , + // tabBarIcon: ({ color }) => , + tabBarIcon: () => , }} /> , + // tabBarIcon: ({ color }) => , + tabBarIcon: () => , }} /> diff --git a/frontend/src/app/(tabs)/index.tsx b/frontend/src/app/(tabs)/index.tsx index 4d815ab..b7a3756 100644 --- a/frontend/src/app/(tabs)/index.tsx +++ b/frontend/src/app/(tabs)/index.tsx @@ -1,9 +1,11 @@ import { StyleSheet, Text, View } from "react-native"; +import HomeIcon from "../../assets/home-icon.svg"; export default function Home() { return ( Home + ); } diff --git a/frontend/src/assets/home-icon.svg b/frontend/src/assets/home-icon.svg index 8eedec4..f6a94f1 100644 --- a/frontend/src/assets/home-icon.svg +++ b/frontend/src/assets/home-icon.svg @@ -1,3 +1,5 @@ - + diff --git a/frontend/src/assets/simple-icon.svg b/frontend/src/assets/simple-icon.svg new file mode 100644 index 0000000..624f6b0 --- /dev/null +++ b/frontend/src/assets/simple-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/svg.d.ts b/frontend/svg.d.ts new file mode 100644 index 0000000..425e04a --- /dev/null +++ b/frontend/svg.d.ts @@ -0,0 +1,7 @@ +// svg.d.ts +declare module "*.svg" { + import React from "react"; + import { SvgProps } from "react-native-svg"; + const content: React.FC; + export default content; +} diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index b9567f6..4e1c211 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -2,5 +2,6 @@ "extends": "expo/tsconfig.base", "compilerOptions": { "strict": true - } + }, + "include": ["svg.d.ts"] } diff --git a/metro.config.js b/metro.config.js new file mode 100644 index 0000000..3a1cd88 --- /dev/null +++ b/metro.config.js @@ -0,0 +1,20 @@ +// metro.config.js +const { getDefaultConfig } = require("expo/metro-config"); + +module.exports = (() => { + const config = getDefaultConfig(__dirname); + + const { transformer, resolver } = config; + + config.transformer = { + ...transformer, + babelTransformerPath: require.resolve("react-native-svg-transformer"), + }; + config.resolver = { + ...resolver, + assetExts: resolver.assetExts.filter((ext) => ext !== "svg"), + sourceExts: [...resolver.sourceExts, "svg"], + }; + + return config; +})(); From c141492c0031634235493e72a03d7cb237e4cfb7 Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Mon, 20 Jan 2025 19:56:16 -0800 Subject: [PATCH 09/19] merging tabs and lint fixes --- frontend/package-lock.json | 2 +- frontend/package.json | 2 +- frontend/src/app/(tabs)/_layout.tsx | 8 +++---- .../src/app/(tabs)/{home.tsx => index.tsx} | 4 ++-- frontend/src/app/(tabs)/profile.tsx | 4 ++-- .../app/(tabs)/{heart.tsx => resources.tsx} | 4 ++-- frontend/src/app/index.tsx | 22 ------------------- 7 files changed, 12 insertions(+), 34 deletions(-) rename frontend/src/app/(tabs)/{home.tsx => index.tsx} (77%) rename frontend/src/app/(tabs)/{heart.tsx => resources.tsx} (76%) delete mode 100644 frontend/src/app/index.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2bc7db1..b1be8bc 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,7 +16,7 @@ "expo-dev-client": "~5.0.8", "expo-device": "~7.0.1", "expo-linking": "~7.0.3", - "expo-router": "~4.0.15", + "expo-router": "^4.0.16", "expo-status-bar": "~2.0.0", "react": "18.3.1", "react-native": "0.76.5", diff --git a/frontend/package.json b/frontend/package.json index a4cdca0..78f3516 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,7 +23,7 @@ "expo-dev-client": "~5.0.8", "expo-device": "~7.0.1", "expo-linking": "~7.0.3", - "expo-router": "~4.0.15", + "expo-router": "^4.0.16", "expo-status-bar": "~2.0.0", "react": "18.3.1", "react-native": "0.76.5", diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx index 4ec49a3..71f2c6a 100644 --- a/frontend/src/app/(tabs)/_layout.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -5,16 +5,16 @@ export default function TabLayout() { return ( , }} /> , }} /> diff --git a/frontend/src/app/(tabs)/home.tsx b/frontend/src/app/(tabs)/index.tsx similarity index 77% rename from frontend/src/app/(tabs)/home.tsx rename to frontend/src/app/(tabs)/index.tsx index f9c6ab5..ee06340 100644 --- a/frontend/src/app/(tabs)/home.tsx +++ b/frontend/src/app/(tabs)/index.tsx @@ -10,10 +10,10 @@ const styles = StyleSheet.create({ }, }); -export default function Tab() { +export default function index() { return ( - Tab [Home|Heart|Profile] + Tab [Home|Resources|Profile] ); } diff --git a/frontend/src/app/(tabs)/profile.tsx b/frontend/src/app/(tabs)/profile.tsx index f87917f..6537e82 100644 --- a/frontend/src/app/(tabs)/profile.tsx +++ b/frontend/src/app/(tabs)/profile.tsx @@ -10,10 +10,10 @@ const styles = StyleSheet.create({ }, }); -export default function Tab() { +export default function profile() { return ( - Tab [Home|Heart|Profile] + Tab [Home|Resources|Profile] ); } diff --git a/frontend/src/app/(tabs)/heart.tsx b/frontend/src/app/(tabs)/resources.tsx similarity index 76% rename from frontend/src/app/(tabs)/heart.tsx rename to frontend/src/app/(tabs)/resources.tsx index 0e3593b..0666d01 100644 --- a/frontend/src/app/(tabs)/heart.tsx +++ b/frontend/src/app/(tabs)/resources.tsx @@ -9,10 +9,10 @@ const styles = StyleSheet.create({ }, }); -export default function Tab() { +export default function resources() { return ( - Tab [Home|Heart|Profile] + Tab [Home|Resources|Profile] ); } diff --git a/frontend/src/app/index.tsx b/frontend/src/app/index.tsx deleted file mode 100644 index 4093eb9..0000000 --- a/frontend/src/app/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { StatusBar, StyleSheet, Text, View } from "react-native"; - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: "#25292e", - alignItems: "center", - justifyContent: "center", - }, - text: { - color: "#fff", - }, -}); - -export default function App() { - return ( - - New Home - - - ); -} From a22b0c8f9285862066d8fe295542bb44c8814f0f Mon Sep 17 00:00:00 2001 From: Rudraksh Bhandari Date: Mon, 20 Jan 2025 20:49:54 -0800 Subject: [PATCH 10/19] Minor change. Also past few commits have been failing lint check...including this one --- frontend/src/app/(tabs)/_layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx index 9992ee9..68ddad2 100644 --- a/frontend/src/app/(tabs)/_layout.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -1,4 +1,3 @@ -import FontAwesome from "@expo/vector-icons/FontAwesome"; import { Tabs } from "expo-router"; import { Platform } from "react-native"; From 3529be5ac094d1659e286068dcfd18eade5fb408 Mon Sep 17 00:00:00 2001 From: Rudraksh Bhandari Date: Mon, 20 Jan 2025 21:52:28 -0800 Subject: [PATCH 11/19] Trying to fix eslint issues --- frontend/.eslintrc.json | 3 +- frontend/src/app/(tabs)/_layout.tsx | 72 +++++++++++++++++++--------- frontend/src/app/(tabs)/index.tsx | 2 - frontend/src/assets/home-icon.svg | 4 +- frontend/src/assets/profile-icon.svg | 9 ++-- frontend/src/assets/simple-icon.svg | 4 -- frontend/tsconfig.json | 8 +++- 7 files changed, 62 insertions(+), 40 deletions(-) delete mode 100644 frontend/src/assets/simple-icon.svg diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index c0181d6..77f5a4a 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -19,7 +19,7 @@ "parserOptions": { "ecmaVersion": "latest", "sourceType": "module", - "project": true + "project": "./tsconfig.json" }, "settings": { "react": { @@ -28,6 +28,7 @@ "import/ignore": ["node_modules/react-native/index\\.js$"] }, "plugins": ["@typescript-eslint", "react"], + "ignorePatterns": ["babel.config.js"], "rules": { "import/no-unresolved": "off", diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx index 68ddad2..da26fea 100644 --- a/frontend/src/app/(tabs)/_layout.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -1,27 +1,17 @@ import { Tabs } from "expo-router"; -import { Platform } from "react-native"; +import { StyleSheet, View } from "react-native"; import HomeIcon from "../../assets/home-icon.svg"; +import ProfileIcon from "../../assets/profile-icon.svg"; import ResourcesIcon from "../../assets/resources-icon.svg"; -import SimpleIcon from "../../assets/simple-icon.svg"; export default function TabLayout() { return ( {/* Home Tab */} @@ -29,31 +19,67 @@ export default function TabLayout() { name="index" options={{ title: "Home", - // tabBarIcon: ({ color }) => , - tabBarIcon: () => , + tabBarIcon: ({ focused }) => ( + + + {focused && } + + ), }} /> {/* Resources Tab */} - - {/* Profile Tab */} - , - tabBarIcon: () => , + tabBarIcon: ({ focused }) => ( + + + {focused && } + + ), }} /> + + {/* Profile Tab */} , - tabBarIcon: () => , + tabBarIcon: ({ focused }) => ( + + + {focused && } + + ), }} /> ); } + +const styles = StyleSheet.create({ + tabBar: { + paddingTop: 10, + backgroundColor: "#fff", + borderTopLeftRadius: 30, // this is in px since react native uses pixels instead of rem + borderTopRightRadius: 30, + overflow: "hidden", + position: "absolute", + justifyContent: "center", + alignItems: "center", + display: "flex", + }, + iconContainer: { + alignItems: "center", + justifyContent: "center", + }, + underline: { + marginTop: 4, + height: 2, + width: 24, + backgroundColor: "#000", + borderRadius: 1, + }, +}); diff --git a/frontend/src/app/(tabs)/index.tsx b/frontend/src/app/(tabs)/index.tsx index b7a3756..4d815ab 100644 --- a/frontend/src/app/(tabs)/index.tsx +++ b/frontend/src/app/(tabs)/index.tsx @@ -1,11 +1,9 @@ import { StyleSheet, Text, View } from "react-native"; -import HomeIcon from "../../assets/home-icon.svg"; export default function Home() { return ( Home - ); } diff --git a/frontend/src/assets/home-icon.svg b/frontend/src/assets/home-icon.svg index f6a94f1..8eedec4 100644 --- a/frontend/src/assets/home-icon.svg +++ b/frontend/src/assets/home-icon.svg @@ -1,5 +1,3 @@ - + diff --git a/frontend/src/assets/profile-icon.svg b/frontend/src/assets/profile-icon.svg index 170c155..4d318f8 100644 --- a/frontend/src/assets/profile-icon.svg +++ b/frontend/src/assets/profile-icon.svg @@ -1,9 +1,6 @@ - - + - - - - + + diff --git a/frontend/src/assets/simple-icon.svg b/frontend/src/assets/simple-icon.svg deleted file mode 100644 index 624f6b0..0000000 --- a/frontend/src/assets/simple-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 4e1c211..8954b46 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -3,5 +3,11 @@ "compilerOptions": { "strict": true }, - "include": ["svg.d.ts"] + "include": [ + "svg.d.ts", + "declarations.d.ts", + "src/**/*", + "src/app/(tabs)/**/*", + "App.tsx" // Added to include root-level App.tsx + ] } From 1f04418ccb61fb71aee34232c915436d1f597d97 Mon Sep 17 00:00:00 2001 From: Rudraksh Bhandari Date: Mon, 20 Jan 2025 22:10:10 -0800 Subject: [PATCH 12/19] Fixed last lint error. Finished implementation of tabs --- frontend/src/app/(tabs)/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/(tabs)/index.tsx b/frontend/src/app/(tabs)/index.tsx index 4d815ab..af4990b 100644 --- a/frontend/src/app/(tabs)/index.tsx +++ b/frontend/src/app/(tabs)/index.tsx @@ -21,3 +21,4 @@ const styles = StyleSheet.create({ fontWeight: "bold", }, }); +// done From 79a7e85b77ed6e3d53ad6708013128099fb0b765 Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Mon, 27 Jan 2025 15:31:33 -0800 Subject: [PATCH 13/19] Completed No internet Page --- frontend/src/app/pages/internetError.tsx | 30 ++++++++++++++++-------- frontend/src/assets/orange-mascot.svg | 9 +++++++ 2 files changed, 29 insertions(+), 10 deletions(-) create mode 100644 frontend/src/assets/orange-mascot.svg diff --git a/frontend/src/app/pages/internetError.tsx b/frontend/src/app/pages/internetError.tsx index 17e39e5..f44df12 100644 --- a/frontend/src/app/pages/internetError.tsx +++ b/frontend/src/app/pages/internetError.tsx @@ -2,32 +2,39 @@ import { useState } from "react"; import { StyleSheet, Text, View } from "react-native"; import { Button } from "../components/Button"; +import OrangeMascot from "../../assets/orange-mascot"; const styles = StyleSheet.create({ - container: { + pageContainer: { flex: 1, backgroundColor: "#ffffff", alignItems: "center", justifyContent: "center", }, + msgContainer: { + // backgroundColor: "black", + justifyContent: "center", + alignItems: "center", + width: 218, + marginBottom: 25, + gap: 10, + }, noConnection: { fontFamily: "Inter", fontSize: 32, - fontWeight: "600", + fontWeight: 700, lineHeight: 38.4, letterSpacing: -0.02, textAlign: "center", - textDecorationLine: "underline", textDecorationStyle: "solid", color: "black", }, noConnectionMessage: { fontFamily: "Open Sans", fontSize: 17, - fontWeight: "400", + fontWeight: 400, lineHeight: 25.5, textAlign: "center", - textDecorationLine: "underline", textDecorationStyle: "solid", }, }); @@ -36,11 +43,14 @@ export default function InternetError() { const [isConnected, setIsConnected] = useState(true); return ( - - No Connection - - No internet connection found. Please check your connection or try again. - + + + + No connection + + No internet connection found. Please check your connection or try again. + + From d6e63f9b6505d4cc1ab1803f42a47510a0b911d6 Mon Sep 17 00:00:00 2001 From: HarshGurnani Date: Sun, 16 Feb 2025 18:40:27 -0800 Subject: [PATCH 19/19] moved Button component, fixed string wrapped in text error --- frontend/src/app/(tabs)/_layout.tsx | 6 +++--- frontend/src/app/pages/internetError.tsx | 3 +-- frontend/src/{app => }/components/Button.tsx | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) rename frontend/src/{app => }/components/Button.tsx (89%) diff --git a/frontend/src/app/(tabs)/_layout.tsx b/frontend/src/app/(tabs)/_layout.tsx index 752c245..46bb9f8 100644 --- a/frontend/src/app/(tabs)/_layout.tsx +++ b/frontend/src/app/(tabs)/_layout.tsx @@ -47,7 +47,7 @@ export default function TabLayout() { tabBarIcon: ({ focused }) => ( - {focused && } + {focused ? : null} ), }} @@ -61,7 +61,7 @@ export default function TabLayout() { tabBarIcon: ({ focused }) => ( - {focused && } + {focused ? : null} ), }} @@ -75,7 +75,7 @@ export default function TabLayout() { tabBarIcon: ({ focused }) => ( - {focused && } + {focused ? : null} ), }} diff --git a/frontend/src/app/pages/internetError.tsx b/frontend/src/app/pages/internetError.tsx index 3adfdff..9d158f7 100644 --- a/frontend/src/app/pages/internetError.tsx +++ b/frontend/src/app/pages/internetError.tsx @@ -1,9 +1,8 @@ import { useState } from "react"; import { StyleSheet, Text, View } from "react-native"; -import { Button } from "../components/Button"; - import OrangeMascot from "@/assets/orange-mascot.svg"; +import { Button } from "@/components/Button"; const styles = StyleSheet.create({ pageContainer: { diff --git a/frontend/src/app/components/Button.tsx b/frontend/src/components/Button.tsx similarity index 89% rename from frontend/src/app/components/Button.tsx rename to frontend/src/components/Button.tsx index 3ee2de6..5147b8e 100644 --- a/frontend/src/app/components/Button.tsx +++ b/frontend/src/components/Button.tsx @@ -32,7 +32,7 @@ export function Button(props: { style={[styles.button, additionalStyle]} // Combine styles onPress={onClick} // Use onPress for React Native > - {children} {/* Display text inside the button */} + {children} ); }