fixed type errors

package.json

@@ -25,11 +25,8 @@
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-native": "^0.74.5",
-    "react-native-paper": "^5.12.5",
-<<<<<<< HEAD
     "react-native-media-controls": "^2.3.0",
-=======
->>>>>>> aafcee1 (Charlottelaw/jdi 14 tab navigation (#12))
+    "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-slider": "^0.11.0",

src/navigation/BottomTabNavigator 2.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/types 2.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/navigation/types.tsx

@@ -1,9 +1,14 @@
 import { MaterialBottomTabNavigationProp } from '@react-navigation/material-bottom-tabs';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { VideoResource } from '@/types/types';
 
 export type LegalStackParams = {
   LegalRights: undefined;
-  VideoPage: undefined;
+  VideoPage: {
+    currentModules: VideoResource[];
+    pageNumber: number;
+    language: string;
+  };
 };
 
 export type HealingStackParams = {

src/screens/LegalRights/VideoPage/index.tsx

@@ -2,10 +2,16 @@ import { useEffect, useRef, useState } from 'react';
 import { Pressable, ScrollView, Text, View } from 'react-native';
 // import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
 import { Video } from 'expo-av';
+import { LegalScreenProps } from '@/navigation/types';
 import supabase from '@/supabase/createClient';
 import { styles } from './styles';
 
-export default function VideoPage(testProp: any) {
+export default function VideoPage({
+  navigation,
+  route,
+}: LegalScreenProps<'VideoPage'>) {
+  const { currentModules, pageNumber, language } = route.params;
+
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   const [isFullScreen, setIsFullScreen] = useState(false);
@@ -27,7 +33,7 @@ export default function VideoPage(testProp: any) {
     },
   ]);
   const [index, setIndex] = useState(10); // index of current page in full array of pages; have to set to infinite or else if the first page (actually index 0) is pressed, the videopage wont update
-  const [language, setLanguage] = useState('english'); // which language associated to array of pages
+  // const [language, setLanguage] = useState('english'); // which language associated to array of pages
 
   const videoLinkRef = useRef(
     'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
@@ -46,9 +52,8 @@ export default function VideoPage(testProp: any) {
 
   // read in all the variables passed in from legal rights page; only once when initally rendered
   useEffect(() => {
-    setPreaData(testProp.route.params[0]);
-    setIndex(testProp.route.params[1]);
-    setLanguage(testProp.route.params[2]);
+    setPreaData(currentModules);
+    setIndex(pageNumber);
   }, []);
 
   useEffect(() => {

src/screens/LegalRights/index.tsx

@@ -1,10 +1,13 @@
 import { useEffect, 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 supabase from '@/supabase/createClient';
 import { styles } from './styles';
 
-export default function LegalRights({ navigation }: { navigation: any }) {
+export default function LegalRights({
+  navigation,
+}: LegalScreenProps<'LegalRights'>) {
   const [englishPressed, setEnglishPressed] = useState(true); // english or spanish 🧍‍♂️
 
   // english pages var mhm
@@ -70,15 +73,20 @@ export default function LegalRights({ navigation }: { navigation: any }) {
   const currentModules = englishPressed ? englishModules : spanishModules; // pages actually being rendered; conditiioned on lanugage boolean
 
   // navigate to video player
-  const goToVideo = (page_number: number, language: string) => {
+  const goToVideo = (pageNumber: number, language: string) => {
     // pass to video player array of [pages, index of page pressed, language of pages]
-    navigation.navigate('Video Page', [
-      currentModules,
-      page_number - 1,
-      language,
-    ]);
-  };
+    // navigation.navigate('VideoPage', [
+    //   currentModules,
+    //   page_number - 1,
+    //   language,
+    // ]);
 
+    navigation.navigate('VideoPage', {
+      currentModules: currentModules,
+      pageNumber: pageNumber - 1,
+      language: language,
+    });
+  };
 
   return (
     <>
@@ -132,4 +140,3 @@ export default function LegalRights({ navigation }: { navigation: any }) {
     </>
   );
 }
-}

src/types/types.tsx

@@ -10,3 +10,14 @@ export type HealingResource = {
   is_video: boolean;
   topics: string[];
 };
+
+export type VideoResource = {
+  id: string;
+  is_short_answer: boolean;
+  page_number: number;
+  parent_id: string;
+  short_answer: string;
+  spanish: boolean;
+  survey: string;
+  video_id: string;
+};