Charlottelaw/jdi-7-navigation-drawer

App.tsx

@@ -1,22 +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 Home from '@/screens/Home';
-import LegalRights from '@/screens/LegalRights';
-import SeekHelp from '@/screens/SeekHelp';
-
-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.Navigator>
+    <NavigationContainer>
+      <NavigationBar />
     </NavigationContainer>
   );
 }

graphics.d.ts

@@ -21,3 +21,8 @@ declare module '*.jpeg' {
   const value: ImageSourcePropType;
   export default value;
 }
+
+declare module '*.mp4' {
+  const source: { uri: string };
+  export default source;
+}

package.json

@@ -15,15 +15,23 @@
     "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/drawer": "^6.7.2",
+    "@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-av": "~14.0.7",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-native": "^0.74.5",
+    "react-native-paper": "^5.12.5",
+    "react-native-reanimated": "^3.10.1",
     "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1"
+    "react-native-screens": "3.31.1",
+    "react-native-video": "^6.6.4",
+    "react-navigation": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

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/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>
+  );
+}

src/navigation/mainTabNav.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import HealingResources from '@/screens/HealingResources';
+import Home from '@/screens/Home';
+import LegalRights from '@/screens/LegalRights/LegalRightsScreen';
+import SeekHelp from '@/screens/SeekHelp';
+
+const Tab = createBottomTabNavigator();
+
+export default function MainTabNav() {
+  return (
+    <>
+      <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>
+    </>
+  );
+}

src/navigation/stacks/HealingResourcesNavigator.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HealingResources from '@/screens/HealingResources';
+import HealingCatalogue from '@/screens/HealingResources/HealingCatalogue';
+import HopeHealingGuide from '@/screens/HealingResources/HopeHealingGuide';
+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={HopeHealingGuide}
+      />
+    </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/HFHGuide/index.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export default function HFHGuide() {
+  return (
+    <View>
+      <Text> This is the HFH page! </Text>
+    </View>
+  );
+}

src/screens/HealingResources/HealingCatalogue/index.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { getHealingResourceData } from '@/supabase/queries/generalQueries';
+import { HealingResource } from '@/types/types';
+import styles from './styles';
+
+const themes = ['Breathing', 'Meditation', 'Joy', 'Resilience'];
+
+export default function HealingCatalogue() {
+  const [resources, setResources] = useState<HealingResource[]>([]);
+  const scrollViewRef = useRef<ScrollView | null>(null);
+  const [headerPositions, setHeaderPositions] = useState<number[]>([]);
+
+  useEffect(() => {
+    const fetchResources = async () => {
+      const data = await getHealingResourceData();
+      setResources(data);
+    };
+    fetchResources();
+  }, []);
+
+  const groupedResources = themes.reduce(
+    (acc, theme) => {
+      acc[theme] = resources.filter(resource =>
+        resource.topics.includes(theme),
+      );
+      return acc;
+    },
+    {} as Record<string, HealingResource[]>,
+  );
+
+  const scrollToTheme = (index: number) => {
+    const targetY = headerPositions[index] || 0;
+    const paddingTop = 30;
+    scrollViewRef.current?.scrollTo({
+      y: targetY - paddingTop,
+      animated: true,
+    });
+  };
+
+  const onLayoutHeader =
+    (index: number) => (event: { nativeEvent: { layout: { y: number } } }) => {
+      const { y } = event.nativeEvent.layout;
+      setHeaderPositions(prevPositions => {
+        const newPositions = [...prevPositions];
+        newPositions[index] = y;
+        return newPositions;
+      });
+    };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.themesContainer}>
+        {themes.map((theme, index) => (
+          <TouchableOpacity
+            key={index}
+            style={styles.themeButton}
+            onPress={() => scrollToTheme(index)}
+          >
+            <Text>{theme}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <ScrollView ref={scrollViewRef}>
+        <View style={styles.resourcesContainer}>
+          {themes.map((theme, index) => (
+            <>
+              <View
+                style={styles.themeHeader}
+                onLayout={onLayoutHeader(index)}
+                key={index}
+              >
+                <Text style={styles.themeHeaderText}>{theme}</Text>
+              </View>
+              <View style={styles.cardsContainer}>
+                {groupedResources[theme].map((resource, resourcesIndex) => (
+                  <View style={styles.resourceContainer} key={resourcesIndex}>
+                    <View style={styles.resourceCard}></View>
+                    <Text style={styles.resourceText}>
+                      {resource.text_content}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            </>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}