Charlottelaw/jdi 14 tab navigation (#12)

* navigation

* got rid of unused files

* CodyGarciaa/Legal-Rights-Prea-Pages (#13)

* set up legal rights skeleton, can go to video page with nothing there yet tho

* added video and testing player

* more testing with video, lowk not getting .mp4 to work

* legal rights page scrollable

* added caption buttons, lowk still to add more to it

* closed caption buttons are toggleable and XOR

* finished pr

* resolved philip's problems lol

* 5 create resources sub pages (#15)

* seek help to resource list

* seek help to resource list

* fixed some things

* removed unused import

---------

Co-authored-by: Philip Ye <[email protected]>
Co-authored-by: philipye314 <[email protected]>

* 8-healing-resource-pages (#19)

* [feat] resources rendered and scrolling by buttons

* good work arfa, minor adjustments

---------

Co-authored-by: philipye314 <[email protected]>

* [bug fix] removed extra type file

* navigation

* got rid of unused files

* [fix] 🐐🐐🐐

* [fix] did screen props

* deleted unused files

---------

Co-authored-by: philipye314 <[email protected]>
Co-authored-by: CodyGarciaa <[email protected]>
Co-authored-by: angelinetu <[email protected]>
Co-authored-by: Philip Ye <[email protected]>
Co-authored-by: philipye314 <[email protected]>
Co-authored-by: Arfa Momin <[email protected]>

App.tsx

@@ -1,33 +1,11 @@
 import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import HealingResources from '@/screens/HealingResources';
-import HealingCatalogue from '@/screens/HealingResources/HealingCatalogue';
-import HFHGuide from '@/screens/HealingResources/HFHGuide';
-import Home from '@/screens/Home';
-import LegalRights from '@/screens/LegalRights/index';
-import VideoPage from '@/screens/LegalRights/VideoPage';
-import SeekHelp from '@/screens/SeekHelp';
-import resourceList from '@/screens/SeekHelp/ResourceList';
-
-const Stack = createNativeStackNavigator();
+import NavigationBar from '@/navigation/BottomTabNavigator';
 
 export default function App() {
   return (
-    <NavigationContainer independent={true}>
-      <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home" component={Home} />
-        <Stack.Screen name="Healing Resources" component={HealingResources} />
-        <Stack.Screen name="Legal Rights" component={LegalRights} />
-        <Stack.Screen name="Seek Help" component={SeekHelp} />
-        <Stack.Screen
-          name="Themed Healing Resources"
-          component={HealingCatalogue}
-        />
-        <Stack.Screen name="Hope for Healing Guide" component={HFHGuide} />
-        <Stack.Screen name="Resource List" component={resourceList} />
-        <Stack.Screen name="Video Page" component={VideoPage} />
-      </Stack.Navigator>
+    <NavigationContainer>
+      <NavigationBar />
     </NavigationContainer>
   );
 }

package.json

@@ -15,13 +15,16 @@
     "pre-commit": "(npm run tsc || true) && (npm run lint:check || true) && npm run prettier:check"
   },
   "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-video": "^6.6.4",

src/HealingResources/index.tsx

@@ -0,0 +1,5 @@
+import { Text } from 'react-native';
+
+export default function HealingResources() {
+  return <Text>HEALING!!!!</Text>;
+}

src/navigation/BottomTabNavigator.tsx

@@ -0,0 +1,51 @@
+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 { BottomTabParams } from './types';
+
+const initialRouteName = 'Healing';
+
+const Tab = createBottomTabNavigator<BottomTabParams>();
+
+export default function NavigationBar() {
+  return (
+    <Tab.Navigator
+      initialRouteName={initialRouteName}
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <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/stacks/HealingResourcesNavigator.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HealingResources from '@/screens/HealingResources';
+import HealingCatalogue from '@/screens/HealingResources/HealingCatalogue';
+import HFHGuide from '@/screens/HealingResources/HFHGuide';
+import { HealingStackParams } from '../types';
+
+const HealingStack = createNativeStackNavigator<HealingStackParams>();
+
+export default function HealingResourcesNavigator() {
+  return (
+    <HealingStack.Navigator>
+      <HealingStack.Screen
+        name="HealingResources"
+        component={HealingResources}
+      />
+      <HealingStack.Screen
+        name="HealingCatalogue"
+        component={HealingCatalogue}
+      />
+      <HealingStack.Screen name="HopeForHealingGuide" component={HFHGuide} />
+    </HealingStack.Navigator>
+  );
+}

src/navigation/stacks/LegalRightsNavigator.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import LegalRights from '@/screens/LegalRights';
+import VideoPage from '@/screens/LegalRights/VideoPage';
+import { LegalStackParams } from '../types';
+
+const LegalStack = createNativeStackNavigator<LegalStackParams>();
+
+export default function LegalRightsNavigator() {
+  return (
+    <LegalStack.Navigator>
+      <LegalStack.Screen name="LegalRights" component={LegalRights} />
+      <LegalStack.Screen name="VideoPage" component={VideoPage} />
+    </LegalStack.Navigator>
+  );
+}

src/navigation/stacks/SeekHelpNavigator.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import SeekHelp from '@/screens/SeekHelp';
+import ResourceList from '@/screens/SeekHelp/ResourceList';
+import { SeekHelpStackParams } from '../types';
+
+const SeekHelpStack = createNativeStackNavigator<SeekHelpStackParams>();
+
+export default function SeekHelpNavigator() {
+  return (
+    <SeekHelpStack.Navigator>
+      <SeekHelpStack.Screen name="SeekHelp" component={SeekHelp} />
+      <SeekHelpStack.Screen name="ResourceList" component={ResourceList} />
+    </SeekHelpStack.Navigator>
+  );
+}

src/navigation/types.tsx

@@ -0,0 +1,37 @@
+import { MaterialBottomTabNavigationProp } from '@react-navigation/material-bottom-tabs';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+export type LegalStackParams = {
+  LegalRights: undefined;
+  VideoPage: undefined;
+};
+
+export type HealingStackParams = {
+  HealingResources: undefined;
+  HopeForHealingGuide: undefined;
+  HealingCatalogue: undefined;
+};
+
+export type SeekHelpStackParams = {
+  SeekHelp: undefined;
+  ResourceList: undefined;
+};
+
+export type BottomTabParams = {
+  Legal: undefined;
+  Healing: undefined;
+  Seek: undefined;
+  Home: undefined;
+};
+
+export type LegalScreenProps<T extends keyof LegalStackParams> =
+  NativeStackScreenProps<LegalStackParams, T>;
+
+export type HealingScreenProps<T extends keyof HealingStackParams> =
+  NativeStackScreenProps<HealingStackParams, T>;
+
+export type SeekHelpScreenProps<T extends keyof SeekHelpStackParams> =
+  NativeStackScreenProps<SeekHelpStackParams, T>;
+
+export type BottomTabScreenProps<T extends keyof BottomTabParams> =
+  MaterialBottomTabNavigationProp<BottomTabParams, T>;

src/screens/HealingResources/index.tsx

@@ -1,18 +1,21 @@
 import { Text, TouchableOpacity, View } from 'react-native';
+import { HealingScreenProps } from '@/navigation/types';
 import styles from './styles';
 
-export default function HealingResources({ navigation }: { navigation: any }) {
+export default function HealingResources({
+  navigation,
+}: HealingScreenProps<'HealingResources'>) {
   return (
     <View style={styles.container}>
       <TouchableOpacity
         style={styles.pagebutton}
-        onPress={() => navigation.navigate('Hope for Healing Guide')}
+        onPress={() => navigation.navigate('HopeForHealingGuide')}
       >
         <Text style={styles.buttonText}>Hope for Healing Guide</Text>
       </TouchableOpacity>
       <TouchableOpacity
         style={styles.pagebutton}
-        onPress={() => navigation.navigate('Themed Healing Resources')}
+        onPress={() => navigation.navigate('HealingCatalogue')}
       >
         <Text style={styles.buttonText}>Resources Catalogue</Text>
       </TouchableOpacity>

src/screens/Home/index.tsx

@@ -1,21 +1,5 @@
-import { Button, Text, View } from 'react-native';
+import { Text } from 'react-native';
 
-export default function Home({ navigation }: { navigation: any }) {
-  return (
-    <View>
-      <Text>hello</Text>
-      <Button
-        title="Healing Resources"
-        onPress={() => navigation.navigate('Healing Resources')}
-      />
-      <Button
-        title="Legal Rights"
-        onPress={() => navigation.navigate('Legal Rights')}
-      />
-      <Button
-        title="Seek Help"
-        onPress={() => navigation.navigate('Seek Help')}
-      />
-    </View>
-  );
+export default function HomeScreen() {
+  return <Text>HOME!!!</Text>;
 }

src/screens/LegalRights/index.tsx

@@ -1,11 +1,14 @@
 import { useState } from 'react';
 import { Image, Pressable, ScrollView, Text, View } from 'react-native';
 import placeholderPoster from '@/assets/images/placeholder.png';
+import { LegalScreenProps } from '@/navigation/types';
 import { styles } from './styles';
 
-export default function LegalRights({ navigation }: { navigation: any }) {
+export default function LegalRights({
+  navigation,
+}: LegalScreenProps<'LegalRights'>) {
   const rickRolls = () => {
-    navigation.navigate('Video Page');
+    navigation.navigate('VideoPage');
   };
 
   const placeholderModulesEnglish = [
@@ -143,10 +146,11 @@ export default function LegalRights({ navigation }: { navigation: any }) {
       </View>
       <ScrollView>
         <View style={styles.preaModulesView}>
-          {currentModules.map(section => (
+          {currentModules.map((section, index) => (
             <Pressable
               style={styles.preaModule}
               onPress={section['onClickFunction']}
+              key={index}
             >
               <Image
                 style={styles.modulePoster}

src/screens/SeekHelp/index.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
+import { SeekHelpScreenProps } from '@/navigation/types';
 import { styles } from './styles';
 
-export default function SeekHelp({ navigation }: { navigation: any }) {
+export default function SeekHelp({
+  navigation,
+}: SeekHelpScreenProps<'SeekHelp'>) {
   return (
     <View style={styles.container}>
       <TouchableOpacity
         style={styles.button}
-        onPress={() => navigation.navigate('Resource List')}
+        onPress={() => navigation.navigate('ResourceList')}
       >
         <Text style={styles.buttonText}>California</Text>
       </TouchableOpacity>
       <TouchableOpacity
         style={styles.button}
-        onPress={() => navigation.navigate('Resource List')}
+        onPress={() => navigation.navigate('ResourceList')}
       >
         <Text style={styles.buttonText}>National</Text>
       </TouchableOpacity>