navigation set up for future screens (#15)

* navigation set up for future screens

---------

Co-authored-by: Matt McCoy <[email protected]>

client/App.tsx

@@ -1,23 +1,45 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
-import { getAllMedications } from './services/medication';
-import UnionSvg from './assets/Union.svg';
+import { Text } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { NavigationContainer, NavigationProp } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import Medication from './screens/Medication';
+import Home from './assets/home.svg';
 
+export type ScreenNames = ['BottomNav', 'Landing'];
+export type RootStackParamList = Record<ScreenNames[number], any>;
+export type StackNavigation = NavigationProp<RootStackParamList>;
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+const Tab = createBottomTabNavigator();
+
+// TODO: figure out a way to do this better, I didnt enjoy this way of doing it in SaluTemp there HAS to be a better way
 export default function App() {
-  const [medications, setMedications] = React.useState<Medication[]>();
-  React.useEffect(() => {
-    getAllMedications().then((med) => setMedications(med));
-  }, []);
-  // Adding the UnionSvg component here to show that it's able to be displayed here
   return (
-    <View className="flex-1 items-center w-[100vw] justify-center bg-white">
-    {medications &&
-      medications.map((med, index) => (
-        <Text key={index} className="pb-2">
-          {`Name: ${med.medication_name} id: ${med.medication_id}`}
-        </Text>
-      ))}
-      <UnionSvg/>
-  </View>
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="BottomNav"
+          options={{ headerShown: false }}
+          component={Tabs}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function Tabs() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen
+        name="Landing"
+        options={{
+          headerShown: true,
+          tabBarIcon: () => <Home color={'gray'} />,
+          tabBarLabel: () => <Text>Landing</Text>
+        }}
+        component={Medication}
+      />
+    </Tab.Navigator>
   );
 }

client/package.json

@@ -11,15 +11,23 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-native-fontawesome": "^0.3.0",
+    "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native-stack": "^6.9.17",
     "axios": "^1.6.4",
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
-    "react-native-safe-area-context": "4.6.3"
+    "react-native-svg-transformer": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

client/screens/Medication.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { getAllMedications } from '../services/medication';
+
+export default function Medication() {
+  const [medications, setMedications] = React.useState<Medication[]>();
+  React.useEffect(() => {
+    getAllMedications().then((med) => setMedications(med));
+  }, []);
+
+  return (
+    <View className="flex-1 items-center w-[100vw] justify-center bg-white">
+      {medications &&
+        medications.map((med, index) => (
+          <Text key={index} className="pb-2">
+            {`Name: ${med.medication_name} id: ${med.medication_id}`}
+          </Text>
+        ))}
+    </View>
+  );
+}