Moved callouts to a separate component

src/components/CustomMapCallout/CustomMapCallout.tsx

@@ -0,0 +1,41 @@
+import { Callout } from "react-native-maps";
+import { LocationType } from "../../interfaces/Interfaces";
+import styles from "../../styles";
+import { Text } from "react-native";
+
+// Map popup for user's location
+
+type props = {
+  location: LocationType;
+  studying: boolean;
+  subject?: string;
+};
+
+export default function CustomMapCallout(props: props) {
+  let { location, studying, subject } = props;
+  if (location && location.coords) {
+    if (studying) {
+      return (
+        <Callout>
+          <Text style={styles.text_black_tiny}>
+            You are here {"\n"}
+            X: {Math.round(location.coords.longitude) + "\n"}
+            Z: {Math.round(location.coords.latitude) + "\n"}
+            Studying: {subject}
+          </Text>
+        </Callout>
+      );
+    } else {
+      return (
+        <Callout>
+          <Text style={styles.text_black_tiny}>
+            You are here {"\n"}
+            X: {Math.round(location.coords.longitude) + "\n"}
+            Z: {Math.round(location.coords.latitude)}
+          </Text>
+        </Callout>
+      );
+    }
+  }
+  return <></>;
+}

src/routes/Home/Home.tsx

@@ -22,6 +22,7 @@ import {
 } from "../../components/Api/Api";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useToast } from "react-native-toast-notifications";
+import CustomMapCallout from "../../components/CustomMapCallout/CustomMapCallout";
 
 export default function Home() {
   // Switch this condition to see the main map when debugging
@@ -188,34 +189,6 @@ export default function Home() {
     },
   });
 
-  // Map popup for user's location
-  function CustomCallout() {
-    if (location && location.coords) {
-      if (studying) {
-        return (
-          <Callout>
-            <Text style={styles.text_black_tiny}>
-              You are here {"\n"}
-              X: {Math.round(location.coords.longitude) + "\n"}
-              Z: {Math.round(location.coords.latitude) + "\n"}
-              Studying: {subject}
-            </Text>
-          </Callout>
-        );
-      } else {
-        return (
-          <Callout>
-            <Text style={styles.text_black_medium}>
-              You are here {"\n"}
-              X: {Math.round(location.coords.longitude) + "\n"}
-              Z: {Math.round(location.coords.latitude)}
-            </Text>
-          </Callout>
-        );
-      }
-    }
-    return <></>;
-  }
   function CustomMap() {
     if (dist && location) {
       if (dist <= 2 || map_debug) {
@@ -289,7 +262,11 @@ export default function Home() {
                 }}
                 pinColor={colors.primary_1}
               >
-                <CustomCallout />
+                <CustomMapCallout
+                  location={location}
+                  studying={studying}
+                  subject={subject}
+                />
               </Marker>
             </MapView>
             <Button