Merge pull request #12 from GenerateNU/feature/svg

feat(metro.config.js): Implemented functionality to allow for SVG input

client/App.tsx

@@ -1,21 +1,23 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { getAllMedications } from './services/medication';
+import UnionSvg from './assets/Union.svg';
 
 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>
-        ))}
-    </View>
+    {medications &&
+      medications.map((med, index) => (
+        <Text key={index} className="pb-2">
+          {`Name: ${med.medication_name} id: ${med.medication_id}`}
+        </Text>
+      ))}
+      <UnionSvg/>
+  </View>
   );
 }

client/metro.config.js

@@ -1,6 +1,18 @@
 const { getDefaultConfig } = require('@expo/metro-config');
 
-const defaultConfig = getDefaultConfig(__dirname);
-defaultConfig.resolver.sourceExts.push('cjs');
+module.exports = (() => {
+  const config = getDefaultConfig(__dirname);
+  config.resolver.sourceExts.push('cjs');
+  const { transformer, resolver } = config;
 
-module.exports = defaultConfig;
+  config.transformer = {
+    ...transformer,
+    babelTransformerPath: require.resolve('react-native-svg-transformer')
+  };
+  config.resolver = {
+    ...resolver,
+    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
+    sourceExts: [...resolver.sourceExts, 'svg']
+  };
+  return config;
+})();

client/package.json

@@ -18,8 +18,9 @@
     "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/types/declaration.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+    import React from "react";
+    import { SvgProps } from "react-native-svg";
+    const content: React.FC<SvgProps>;
+    export default content;
+  }