feat: navigation bar (#16)

* Created navigation bar

---------

Co-authored-by: Chris Torres <[email protected]>

package.json

@@ -17,11 +17,12 @@
     "@expo-google-fonts/dm-sans": "^0.2.3",
     "@expo/metro-runtime": "~4.0.0",
     "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-navigation/bottom-tabs": "^6.6.1",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
-    "@react-navigation/stack": "^6.4.1",
+    "@react-navigation/bottom-tabs": "^7.0.6",
+    "@react-navigation/elements": "^2.1.0",
+    "@react-navigation/native": "^7.0.3",
+    "@react-navigation/native-stack": "^7.1.1",
     "@supabase/supabase-js": "^2.45.6",
+    "@svgr/cli": "^8.1.0",
     "@types/react-navigation": "^3.0.8",
     "axios": "^1.7.7",
     "body-parser": "^1.20.3",
@@ -30,7 +31,7 @@
     "dotenv": "^16.4.5",
     "expo": "^52.0.17",
     "expo-auth-session": "~6.0.1",
-    "expo-camera": "^16.0.6",
+    "expo-camera": "^16.0.7",
     "expo-constants": "~17.0.3",
     "expo-crypto": "~14.0.1",
     "expo-dev-client": "~5.0.5",
@@ -51,7 +52,7 @@
     "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "~3.16.1",
-    "react-native-safe-area-context": "4.12.0",
+    "react-native-safe-area-context": "^4.12.0",
     "react-native-screens": "~4.1.0",
     "react-native-svg": "15.8.0",
     "react-native-toast-message": "^2.2.1",

src/components/GoogleSignInButton/GoogleSignInButton.tsx

@@ -80,6 +80,10 @@ export default function GoogleSignInButton({
     <TouchableOpacity
       onPress={() => {
         promptAsync();
+        navigation.navigate('BottomTabs', {
+          screen: 'Home',
+          params: { screen: 'TreeSearch' },
+        });
       }}
     >
       <Text style={styles.adminLoginLinkText}>Login Here</Text>

src/icons/ContactSelected.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+const SvgContactSelected = (props: any) => (
+  <Svg width={30} height={31} fill="none" {...props}>
+    <Path
+      fill="#446127"
+      d="M15 15.422a6.25 6.25 0 1 0 0-12.5 6.25 6.25 0 0 0 0 12.5M15 18.547c-6.262 0-11.362 4.2-11.362 9.375 0 .35.275.625.625.625h21.475c.35 0 .625-.275.625-.625 0-5.175-5.1-9.375-11.363-9.375"
+    />
+  </Svg>
+);
+
+export default SvgContactSelected;

src/icons/ContactUnselected.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+const SvgContactUnselected = (props: SvgProps) => (
+  <Svg width={31} height={31} fill="none" {...props}>
+    <Path
+      fill="#446127"
+      d="M15.119 16.36c-3.963 0-7.188-3.226-7.188-7.188 0-3.963 3.225-7.188 7.188-7.188s7.187 3.226 7.187 7.188-3.225 7.188-7.187 7.188m0-12.5a5.324 5.324 0 0 0-5.313 5.312 5.324 5.324 0 0 0 5.313 5.313 5.324 5.324 0 0 0 5.312-5.313A5.324 5.324 0 0 0 15.12 3.86M25.857 28.86a.944.944 0 0 1-.938-.938c0-4.312-4.4-7.812-9.8-7.812s-9.8 3.5-9.8 7.812a.944.944 0 0 1-.937.938.944.944 0 0 1-.938-.938c0-5.338 5.238-9.687 11.675-9.687s11.675 4.35 11.675 9.687a.944.944 0 0 1-.937.938"
+    />
+  </Svg>
+);
+
+export default SvgContactUnselected;

src/icons/HomeSelected.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+const SvgHomeSelected = (props: any) => (
+  <Svg width={31} height={31} fill="none" {...props}>
+    <Path
+      fill="#446127"
+      d="M15.769.662a1 1 0 0 0-1.3 0l-14.35 12.3v14.46a3 3 0 0 0 3 3h8a1 1 0 0 0 1-1v-6a3 3 0 1 1 6 0v6a1 1 0 0 0 1 1h8a3 3 0 0 0 3-3v-14.46z"
+    />
+  </Svg>
+);
+
+export default SvgHomeSelected;

src/icons/HomeUnselected.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+const SvgHomeUnselected = (props: any) => (
+  <Svg width={30} height={31} fill="none" {...props}>
+    <Path
+      fill="#446127"
+      d="m15 1.422.65-.76a1 1 0 0 0-1.3 0zm-14 12-.65-.76-.35.3v.46zm10 16v1a1 1 0 0 0 1-1zm8 0h-1a1 1 0 0 0 1 1zm10-16h1v-.46l-.35-.3zm-26 17h8v-2H3zm26.65-17.76-14-12-1.3 1.52 14 12zm-15.3-12-14 12 1.3 1.52 14-12zM12 29.422v-6h-2v6zm6-6v6h2v-6zm1 7h8v-2h-8zm11-3v-14h-2v14zm-30-14v14h2v-14zm15 7a3 3 0 0 1 3 3h2a5 5 0 0 0-5-5zm0-2a5 5 0 0 0-5 5h2a3 3 0 0 1 3-3zm12 12a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1zm-24-2a1 1 0 0 1-1-1H0a3 3 0 0 0 3 3z"
+    />
+  </Svg>
+);
+
+export default SvgHomeUnselected;

src/icons/index.ts

@@ -0,0 +1,4 @@
+export { default as ContactSelected } from './ContactSelected';
+export { default as ContactUnselected } from './ContactUnselected';
+export { default as HomeSelected } from './HomeSelected';
+export { default as HomeUnselected } from './HomeUnselected';

src/navigation/AppNavigator.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import QRCodeScanner from '@/components/QRCodeScanner/QRCodeScanner';
+import SvgContactSelected from '@/icons/ContactSelected';
+import SvgContactUnselected from '@/icons/ContactUnselected';
+import SvgHomeSelected from '@/icons/HomeSelected';
+import SvgHomeUnselected from '@/icons/HomeUnselected';
 import ContactScreen from '@/screens/Contact/Contact';
 import DirectoryScreen from '@/screens/Directory/Directory';
 import LoginScreen from '@/screens/Login/Login';
@@ -18,11 +22,11 @@ import {
 } from '@/types/navigation';
 
 // Stack and Tab Navigators
-const LoginStack = createStackNavigator<LoginStackParamList>();
-const HomeStack = createStackNavigator<HomeStackParamList>();
-const ContactStack = createStackNavigator<ContactStackParamList>();
+const LoginStack = createNativeStackNavigator<LoginStackParamList>();
+const HomeStack = createNativeStackNavigator<HomeStackParamList>();
+const ContactStack = createNativeStackNavigator<ContactStackParamList>();
 const BottomTab = createBottomTabNavigator<BottomTabParamList>();
-const RootStack = createStackNavigator<RootStackParamList>();
+const RootStack = createNativeStackNavigator<RootStackParamList>();
 
 // Login Stack Navigator
 function LoginStackNavigator() {
@@ -69,7 +73,27 @@ function BottomTabNavigator() {
   return (
     <BottomTab.Navigator
       initialRouteName="Home"
-      screenOptions={{ headerShown: false }}
+      screenOptions={({ route }) => ({
+        tabBarShowLabel: false,
+        tabBarStyle: { paddingTop: 10 },
+        tabBarIcon: ({ focused }) => {
+          if (route.name === 'Home') {
+            return focused ? (
+              <SvgHomeSelected width={30} height={30} />
+            ) : (
+              <SvgHomeUnselected width={30} height={30} />
+            );
+          }
+          if (route.name === 'Contact') {
+            return focused ? (
+              <SvgContactSelected width={30} height={30} />
+            ) : (
+              <SvgContactUnselected width={30} height={30} />
+            );
+          }
+          return null;
+        },
+      })}
     >
       <BottomTab.Screen name="Home" component={HomeStackNavigator} />
       <BottomTab.Screen name="Contact" component={ContactStackNavigator} />

src/screens/Contact/Contact.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Image, ScrollView, Text, View } from 'react-native';
 import { styles } from './styles';
 
-export default function App() {
+export default function ContactScreen() {
   return (
     <ScrollView style={styles.backgroundContainer}>
       <View style={styles.imageContainer}>

src/screens/TEMP_NAME/styles.ts → src/screens/Login/styles.ts

@@ -22,8 +22,8 @@ export const styles = StyleSheet.create({
 
   logo: {
     height: 200,
-    marginTop: 20,
-    marginBottom: 70,
+    marginTop: 40,
+    marginBottom: 40,
   },
 
   button: {