JDI Branch Navigation

App.tsx

@@ -1,22 +1,11 @@
 import * as React from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
-import HealingResources from '@/HealingResources';
-import Home from '@/screens/Home';
-import LegalRights from '@/screens/LegalRights';
-import SeekHelp from '@/screens/SeekHelp';
-
-const Tab = createBottomTabNavigator();
+import MainTabNav from '@/navigation/BottomTabNavigator';
 
 export default function App() {
   return (
-    <NavigationContainer independent={true}>
-      <Tab.Navigator initialRouteName="Home">
-        <Tab.Screen name="Home" component={Home} />
-        <Tab.Screen name="Legal Rights" component={LegalRights} />
-        <Tab.Screen name="Healing Resources" component={HealingResources} />
-        <Tab.Screen name="Seek Help" component={SeekHelp} />
-      </Tab.Navigator>
+    <NavigationContainer>
+      <MainTabNav />
     </NavigationContainer>
   );
 }

package.json

@@ -16,15 +16,18 @@
   },
   "dependencies": {
     "@react-navigation/bottom-tabs": "^6.6.1",
+    "@react-navigation/material-bottom-tabs": "^6.2.29",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
-    "@supabase/supabase-js": "^2.45.4",
+    "@supabase/supabase-js": "^2.45.6",
     "expo": "~51.0.21",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-native": "^0.74.5",
+    "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1"
+    "react-native-screens": "3.31.1",
+    "react-native-vector-icons": "^10.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/navigation/BottomTabNavigator.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import HomeScreen from 'src/screens/Home/';
+import HealingResourcesNavigator from './stacks/HealingResourcesNavigator';
+import LegalRightsNavigator from './stacks/LegalRightsNavigator';
+import SeekHelpNavigator from './stacks/SeekHelpNavigator';
+import { BottomTabParamList } from './types';
+
+const initialRouteName = 'Healing';
+
+const Tab = createBottomTabNavigator<BottomTabParamList>();
+
+export default function NavigationBar() {
+  return (
+    <Tab.Navigator initialRouteName={initialRouteName}>
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarLabel: 'Home',
+        }}
+      />
+      <Tab.Screen
+        name="Healing"
+        component={HealingResourcesNavigator}
+        options={{
+          tabBarLabel: 'Healing Resources',
+        }}
+      />
+      <Tab.Screen
+        name="Legal"
+        component={LegalRightsNavigator}
+        options={{
+          tabBarLabel: 'Legal Rights',
+        }}
+      />
+      <Tab.Screen
+        name="Seek"
+        component={SeekHelpNavigator}
+        options={{
+          tabBarLabel: 'Seek Help',
+        }}
+      />
+    </Tab.Navigator>
+  );
+}

src/navigation/MainNavigator.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import BottomTabNavigator from './BottomTabNavigator';
+
+export default function AppNavigator() {
+  return (
+    <NavigationContainer>
+      <BottomTabNavigator />
+    </NavigationContainer>
+  );
+}