limit studying to within 250m of the center of ustp

Feature/qol fixes

package.json

@@ -26,7 +26,7 @@
     "moment": "^2.29.4",
     "moti": "^0.25.3",
     "react": "18.2.0",
-    "react-native": "0.71.13",
+    "react-native": "0.71.14",
     "react-native-bouncy-checkbox": "^3.0.7",
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.9.0",

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -143,7 +143,7 @@ export default function CustomDrawerContent(props: {}) {
         <DrawerButton
           onPress={async () => {
             // We don't clear student statuses when logging out on debug
-            if (!debug) {
+            if (debug) {
               queryClient.clear();
               dispatch(logout());
               await AsyncStorage.clear();

src/icons/CaretLeftIcon/CaretLeftIcon.tsx

@@ -3,7 +3,7 @@ import { IconProps } from "../../interfaces/Interfaces";
 import { Svg, Path } from "react-native-svg";
 import { colors } from "../../styles";
 
-export default function CaretLeftIcon(props: IconProps) {
+export default function CaretRightIcon(props: IconProps) {
   return (
     <>
       <Svg

src/icons/CaretRightIcon/CaretRightIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
+
+export default function CaretRightIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        height={props.size + "px"}
+        width={props.size + "px"}
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke={colors.icon_color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path
+          d="M13.883 5.007l.058 -.005h.118l.058 .005l.06 .009l.052 .01l.108 .032l.067 .027l.132 .07l.09 .065l.081 .073l.083 .094l.054 .077l.054 .096l.017 .036l.027 .067l.032 .108l.01 .053l.01 .06l.004 .057l.002 .059v12c0 .852 -.986 1.297 -1.623 .783l-.084 -.076l-6 -6a1 1 0 0 1 -.083 -1.32l.083 -.094l6 -6l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01z"
+          stroke-width="0"
+          fill={colors.icon_color}
+        ></Path>
+      </Svg>
+    </>
+  );
+}

src/routes/ConversationPage/ConversationPage.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ActivityIndicator, Image } from "react-native";
+import { ActivityIndicator, Image, Pressable } from "react-native";
 import styles from "../../styles";
 import {
   View,
@@ -36,6 +36,7 @@ import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContai
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useSelector } from "react-redux";
 import { RootState } from "../../features/redux/Store/Store";
+import CaretRightIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
 
 export default function ConversationPage() {
   const toast = useToast();
@@ -70,6 +71,7 @@ export default function ConversationPage() {
     enabled:
       student_status?.study_group != "" && student_status?.study_group != null,
     queryKey: ["study_group"],
+    refetchInterval: 10000,
     queryFn: async () => {
       const data = await GetStudyGroup(student_status?.study_group || "");
       if (data[0] == false) {
@@ -127,7 +129,7 @@ export default function ConversationPage() {
   // Avatar List
   const [users, setUsers] = useState<GroupMessageAvatarType[]>([]);
   const AvatarsQuery = useQuery({
-    refetchInterval: 3000,
+    refetchInterval: 10000,
     enabled:
       student_status?.study_group != null ||
       (student_status?.study_group != "" &&
@@ -162,7 +164,7 @@ export default function ConversationPage() {
     mutationFn: async (info: MessagePostType) => {
       const data = await PostMessage(info);
       if (data[0] != true) {
-        return Promise.reject(new Error());
+        return Promise.reject(new Error(data[1]));
       }
       return data;
     },
@@ -198,9 +200,17 @@ export default function ConversationPage() {
           >
             <View style={styles.flex_row}>
               <Text style={{ ...styles.text_white_medium }}>
-                {`Group: ${studygroup?.name ? studygroup.name : ""}`}
+                {`Group: ${studygroup?.name ? studygroup.name : "Loading..."}`}
               </Text>
             </View>
+            {studygroup.landmark ? (
+              <Text style={{...styles.text_white_tiny_bold,...{textAlign:'left'}}}>
+              {studygroup.landmark}
+              </Text>
+            ) : (
+              <></>
+            )}
+
             <View style={{ ...styles.flex_row }}>
               <Text
                 style={{
@@ -209,7 +219,9 @@ export default function ConversationPage() {
                   paddingRight: 4,
                 }}
               >
-                {studygroup.students.length} studying
+                {!StudyGroupQuery.isFetching
+                  ? studygroup.students.length + " studying"
+                  : "Loading"}
               </Text>
               {users.map((user: GroupMessageAvatarType, index: number) => {
                 if (index > 6) {
@@ -293,23 +305,41 @@ export default function ConversationPage() {
               <Text style={styles.text_white_small}>There are no messages</Text>
             )}
           </ScrollView>
-          <TextInput
-            style={styles.chatbox}
-            placeholder="Send a message..."
-            placeholderTextColor="white"
-            value={message}
-            onChange={(
-              e: NativeSyntheticEvent<TextInputChangeEventData>
-            ): void => {
-              setMessage(e.nativeEvent.text);
-            }}
-            onSubmitEditing={() => {
-              send_message.mutate({
-                message_content: message,
-              });
-              setMessage("");
-            }}
-          />
+          <View style={styles.flex_row}>
+            <TextInput
+              style={styles.chatbox}
+              placeholder="Send a message..."
+              placeholderTextColor="white"
+              value={message}
+              onChange={(
+                e: NativeSyntheticEvent<TextInputChangeEventData>
+              ): void => {
+                setMessage(e.nativeEvent.text);
+              }}
+              onSubmitEditing={() => {
+                send_message.mutate({
+                  message_content: message,
+                });
+                setMessage("");
+              }}
+            />
+            <Pressable
+              style={{
+                backgroundColor: colors.secondary_3,
+                borderRadius: 16,
+                alignSelf: "center",
+                marginLeft: 16,
+              }}
+              onPress={() => {
+                send_message.mutate({
+                  message_content: message,
+                });
+                setMessage("");
+              }}
+            >
+              <CaretRightIcon size={48} />
+            </Pressable>
+          </View>
         </AnimatedContainer>
       </View>
     );

src/routes/CreateGroup/CreateGroup.tsx

@@ -24,6 +24,7 @@ import MapView, { UrlTile, Marker } from "react-native-maps";
 import { useNavigation } from "@react-navigation/native";
 import { useToast } from "react-native-toast-notifications";
 import CaretLeftIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 
 export default function CreateGroup({ route }: any) {
   const { location, subject } = route.params;
@@ -82,9 +83,9 @@ export default function CreateGroup({ route }: any) {
         duration: 2000,
         animationType: "slide-in",
       });
-      // Set a delay before going back to homepage to hopefully let the queries refresh in time
+      // Set a delay before going back to conversation page to hopefully let the queries refresh in time
       setTimeout(() => {
-        navigation.navigate("Home");
+        navigation.navigate("Conversation");
       }, 200);
     },
     onError: (error: Error) => {
@@ -100,7 +101,7 @@ export default function CreateGroup({ route }: any) {
   if (location) {
     return (
       <View style={styles.background}>
-        <AnimatedContainerNoScroll>
+        <AnimatedContainer>
           <View style={{ zIndex: -1 }}>
             <View style={styles.padding} />
             <View style={{ borderRadius: 16, overflow: "hidden" }}>
@@ -183,7 +184,7 @@ export default function CreateGroup({ route }: any) {
           </View>
 
           <View style={styles.padding} />
-        </AnimatedContainerNoScroll>
+        </AnimatedContainer>
       </View>
     );
   }

src/routes/Home/Home.tsx

@@ -6,10 +6,11 @@ import {
   ScrollView,
   Switch,
   ActivityIndicator,
+  TouchableHighlight,
 } from "react-native";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import { useState, useEffect } from "react";
-import MapView, { Circle, Marker, UrlTile } from "react-native-maps";
+import MapView, { Callout, Circle, Marker, UrlTile } from "react-native-maps";
 import * as Location from "expo-location";
 import GetDistance from "../../components/GetDistance/GetDistance";
 import Button from "../../components/Button/Button";
@@ -44,6 +45,8 @@ import Modal from "react-native-modal";
 import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
 import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
 import RefreshIcon from "../../icons/RefreshIcon/RefreshIcon";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
 
 export default function Home() {
   // Switch this condition to see the main map when debugging
@@ -61,7 +64,7 @@ export default function Home() {
   const [modalOpen, setModalOpen] = useState(false);
   const [modalByGroup, setModalByGroup] = useState(false);
 
-  async function requestLocation() {
+  async function requestLocationPermission() {
     const { status } = await Location.requestForegroundPermissionsAsync();
     if (status !== "granted") {
       setFeedback("Allow location permissions to continue");
@@ -75,44 +78,32 @@ export default function Home() {
         }
       );
       return;
-    }
-    if (status == "granted") {
-      if (locationPermitted === false) {
-        setLocationPermitted(true);
-      }
-
-      let newLocation = await Location.getCurrentPositionAsync();
-      if (newLocation) {
-        // Only update location state if user's location has changed
-        if (
-          !location ||
-          newLocation.coords.latitude !== location.coords.latitude ||
-          newLocation.coords.longitude !== location.coords.longitude
-        ) {
-          setLocation(newLocation);
-          await DistanceHandler(newLocation);
-        }
-      }
+    } else {
+      setLocationPermitted(true);
+    }
+  }
+
+  async function requestLocation() {
+    if (locationPermitted) {
+      let newLocation = await Location.getCurrentPositionAsync();
+
+      setLocation(newLocation);
+      await DistanceHandler(newLocation);
     }
   }
 
-  // Refresh every 10 seconds
-  requestLocation();
   useEffect(() => {
+    // console.log("Location Update");
+    // console.log(locationPermitted);
+    requestLocation();
+  }, [locationPermitted]);
+
+  useEffect(() => {
+    requestLocationPermission();
+    // Refresh every 30 seconds
     const interval = setInterval(() => {
       requestLocation();
     }, 30000);
-    setTimeout(() => {
-      queryClient.invalidateQueries({ queryKey: ["user"] });
-      queryClient.invalidateQueries({ queryKey: ["user_status"] });
-      queryClient.invalidateQueries({
-        queryKey: ["user_status_list"],
-      });
-      queryClient.invalidateQueries({
-        queryKey: ["study_group_list"],
-      });
-      requestLocation();
-    }, 2000);
     return () => clearInterval(interval);
   }, []);
 
@@ -120,8 +111,8 @@ export default function Home() {
   async function DistanceHandler(location: RawLocationType) {
     let dist = GetDistanceFromUSTP(location.coords);
     setDist(dist);
-    // Deactivate student status if too far away and still studying
-    if (dist >= 2 && !map_distance_override && studying && !stopping_toofar) {
+    // Deactivate student status if too far away from USTP and still studying
+    if (dist >= 1 && !map_distance_override && studying && !stopping_toofar) {
       stop_studying.mutate({
         active: false,
       });
@@ -129,6 +120,9 @@ export default function Home() {
     }
   }
 
+  async function clear_messages_notification_cache() {
+    AsyncStorage.setItem("messages", "");
+  }
   // Student Status
   const [studying, setStudying] = useState(false);
   const [subject, setSubject] = useState("");
@@ -152,6 +146,22 @@ export default function Home() {
       setSubject(data[1].subject);
       setStudying(data[1].active);
       setStudentStatus(data[1]);
+      // Deactivate student status if too far away from current location you are studying in
+      if (student_status && location) {
+        const dist = GetDistance(
+          student_status.location.latitude,
+          student_status.location.longitude,
+          location.coords.latitude,
+          location.coords.longitude
+        );
+        if (dist > 0.5 && studying && !stopping_toofar) {
+          console.log("Too far from current studying location");
+          stop_studying.mutate({
+            active: false,
+          });
+          setStopping(true);
+        }
+      }
     },
     onError: (error: Error) => {
       toast.show(String(error), {
@@ -167,7 +177,7 @@ export default function Home() {
     mutationFn: async (info: StudentStatusPatchType) => {
       const data = await PatchStudentStatus(info);
       if (data[0] != true) {
-        return Promise.reject(new Error());
+        return Promise.reject(new Error(JSON.stringify(data[1])));
       }
       return data;
     },
@@ -197,9 +207,7 @@ export default function Home() {
       }, 500);
       setStudyGroups([]);
       setStudying(false);
-      if (stopping_toofar) {
-        setStopping(false);
-      }
+      setStopping(false);
     },
     onError: (error: Error) => {
       toast.show(String(error), {
@@ -220,7 +228,7 @@ export default function Home() {
       return data;
     },
     onSuccess: () => {
-      if (student_status?.study_group) {
+      if (student_status?.study_group == "") {
         // Display separate toast if you stop studying while in a study group
         toast.show("You left study group  \n" + student_status?.study_group, {
           type: "success",
@@ -228,7 +236,9 @@ export default function Home() {
           duration: 2000,
           animationType: "slide-in",
         });
+        clear_messages_notification_cache();
       }
+
       queryClient.invalidateQueries({ queryKey: ["user_status"] });
 
       // Delay refetching for study groups since backend still needs to delete groups without students after leaving a study group
@@ -380,12 +390,27 @@ export default function Home() {
         </>
       );
     } else if (
-      (StudentStatusQuery.isFetching && studying) ||
-      StudentStatusListQuery.isFetching ||
-      StudyGroupQuery.isFetching ||
-      (StudentStatusQuery.isFetching && !studying) ||
-      StudentStatusListGlobalQuery.isFetching ||
-      StudyGroupGlobalQuery.isFetching
+      (!StudentStatusQuery.isSuccess &&
+        studying &&
+        !StudentStatusListQuery.isSuccess &&
+        !StudyGroupQuery.isSuccess) ||
+      (!StudentStatusQuery.isSuccess &&
+        !studying &&
+        !StudentStatusListGlobalQuery.isSuccess &&
+        !StudyGroupGlobalQuery.isSuccess)
+    ) {
+      return (
+        <>
+          <View style={{ paddingVertical: 8 }} />
+          <ActivityIndicator size={96} color={colors.secondary_1} />
+          <Text style={styles.text_white_medium}>Loading...</Text>
+        </>
+      );
+    } else if (
+      study_groups == undefined ||
+      study_groups_global == undefined ||
+      student_statuses == undefined ||
+      student_statuses_global == undefined
     ) {
       return (
         <>
@@ -395,7 +420,7 @@ export default function Home() {
         </>
       );
     } else if (dist && location) {
-      if (dist <= 1 || map_distance_override) {
+      if (dist <= 0.25 || map_distance_override) {
         return (
           <>
             <MapView
@@ -454,6 +479,7 @@ export default function Home() {
                         zIndex={1000}
                         onPress={() => {
                           toast.hideAll();
+
                           toast.show(
                             <View
                               style={{
@@ -482,7 +508,26 @@ export default function Home() {
                             }
                           );
                         }}
-                      />
+                      >
+                        <Callout>
+                          <Text style={styles.text_white_tiny_bold}>
+                            Student: {student_status.user}
+                          </Text>
+                          <Text style={styles.text_white_tiny_bold}>
+                            {`Studying ${student_status.subject}`}
+                          </Text>
+                          <Text style={styles.text_black_tiny}>
+                            {`${Math.round(
+                              GetDistance(
+                                student_status.location.latitude,
+                                student_status.location.longitude,
+                                location.coords.latitude,
+                                location.coords.longitude
+                              ) * 1000
+                            )}m away`}
+                          </Text>
+                        </Callout>
+                      </Marker>
                     );
                   }
                 )
@@ -563,6 +608,7 @@ export default function Home() {
                           zIndex={1000}
                           onPress={() => {
                             toast.hideAll();
+
                             toast.show(
                               <View
                                 style={{
@@ -574,6 +620,13 @@ export default function Home() {
                                 <Text style={styles.text_white_tiny_bold}>
                                   Study Group: {studygroup.name}
                                 </Text>
+                                {studygroup.landmark ? (
+                                  <Text style={styles.text_white_tiny_bold}>
+                                    {studygroup.landmark}
+                                  </Text>
+                                ) : (
+                                  <></>
+                                )}
                                 <Text style={styles.text_white_tiny_bold}>
                                   {`Studying ${studygroup.subject}`}
                                 </Text>
@@ -598,6 +651,7 @@ export default function Home() {
                                         study_group: studygroup.name,
                                         subject: studygroup.subject,
                                       });
+                                      navigation.navigate("Conversation");
                                     }}
                                   >
                                     <Text style={styles.text_white_tiny_bold}>
@@ -637,7 +691,35 @@ export default function Home() {
                               }
                             );
                           }}
-                        />
+                        >
+                          <Callout>
+                            <Text style={styles.text_black_tiny}>
+                              Study Group: {studygroup.name}
+                            </Text>
+                            <Text style={styles.text_black_tiny}>
+                              Studying: {studygroup.subject}
+                            </Text>
+                            {studygroup.landmark ? (
+                              <Text style={styles.text_black_tiny}>
+                                {studygroup.landmark}
+                              </Text>
+                            ) : (
+                              <></>
+                            )}
+                            <Text style={styles.text_black_tiny}>
+                              {`${studygroup.students.length} ${
+                                studygroup.students.length > 1
+                                  ? "students"
+                                  : "student"
+                              } studying`}
+                            </Text>
+                            <Text style={styles.text_black_tiny}>
+                              {`${Math.round(
+                                studygroup.distance * 1000
+                              )}m away`}
+                            </Text>
+                          </Callout>
+                        </Marker>
                         <Circle
                           center={studygroup.location}
                           radius={studygroup.radius}
@@ -680,6 +762,13 @@ export default function Home() {
                                 <Text style={styles.text_white_tiny_bold}>
                                   Study Group: {studygroup.name}
                                 </Text>
+                                {studygroup.landmark ? (
+                                  <Text style={styles.text_white_tiny_bold}>
+                                    {studygroup.landmark}
+                                  </Text>
+                                ) : (
+                                  <></>
+                                )}
                                 <Text style={styles.text_white_tiny_bold}>
                                   {`Studying ${studygroup.subject}`}
                                 </Text>
@@ -712,7 +801,40 @@ export default function Home() {
                               }
                             );
                           }}
-                        />
+                        >
+                          <Callout>
+                            <Text style={styles.text_black_tiny}>
+                              Study Group: {studygroup.name}
+                            </Text>
+                            <Text style={styles.text_black_tiny}>
+                              Studying: {studygroup.subject}
+                            </Text>
+                            {studygroup.landmark ? (
+                              <Text style={styles.text_black_tiny}>
+                                {studygroup.landmark}
+                              </Text>
+                            ) : (
+                              <></>
+                            )}
+                            <Text style={styles.text_black_tiny}>
+                              {`${studygroup.students.length} ${
+                                studygroup.students.length > 1
+                                  ? "students"
+                                  : "student"
+                              } studying`}
+                            </Text>
+                            <Text style={styles.text_black_tiny}>
+                              {`${Math.round(
+                                GetDistance(
+                                  studygroup.location.latitude,
+                                  studygroup.location.longitude,
+                                  location.coords.latitude,
+                                  location.coords.longitude
+                                )
+                              )}m away`}
+                            </Text>
+                          </Callout>
+                        </Marker>
                         <Circle
                           center={studygroup.location}
                           radius={studygroup.radius}
@@ -888,6 +1010,7 @@ export default function Home() {
                       duration: 2000,
                       animationType: "slide-in",
                     });
+                    requestLocation();
                   }}
                 >
                   <RefreshIcon size={32} />
@@ -903,7 +1026,7 @@ export default function Home() {
                   setModalOpen(true);
                 }}
               >
-                {studying ? <CaretUpIcon size={32} /> : <></>}
+                <CaretUpIcon size={32} />
               </Pressable>
             </View>
             {student_status?.active && !student_status?.study_group ? (
@@ -932,6 +1055,8 @@ export default function Home() {
         return <MapRendererFar location={location.coords} dist={dist} />;
       }
     } else {
+      requestLocationPermission();
+      requestLocation();
       return (
         <>
           <View style={{ paddingVertical: 8 }} />
@@ -960,14 +1085,15 @@ export default function Home() {
           >
             <DropdownIcon size={32} />
           </Pressable>
-          <View style={styles.flex_row}>
+          <View style={styles.flex_column}>
+            <Text style={styles.text_white_medium}>List View</Text>
             <Switch
               value={modalByGroup}
               onChange={() => {
                 setModalByGroup(!modalByGroup);
               }}
+              style={{ alignSelf: "center" }}
             />
-            <Text style={styles.text_white_medium}>List View</Text>
           </View>
 
           <ScrollView>
@@ -998,6 +1124,20 @@ export default function Home() {
                       <Text style={styles.text_white_tiny_bold}>
                         {`${Math.round(student_status.distance * 1000)}m away`}
                       </Text>
+                      {location && location.coords ? (
+                        <Text style={styles.text_black_tiny}>
+                          {`${Math.round(
+                            GetDistance(
+                              student_status.location.latitude,
+                              student_status.location.longitude,
+                              location.coords.latitude,
+                              location.coords.longitude
+                            )
+                          )}m away`}
+                        </Text>
+                      ) : (
+                        <></>
+                      )}
                     </View>
                   );
                 }
@@ -1025,6 +1165,13 @@ export default function Home() {
                     <Text style={styles.text_white_tiny_bold}>
                       Group Name: {studygroup.name}
                     </Text>
+                    {studygroup.landmark ? (
+                      <Text style={styles.text_white_tiny_bold}>
+                        {studygroup.landmark}
+                      </Text>
+                    ) : (
+                      <></>
+                    )}
                     <Text style={styles.text_white_tiny_bold}>
                       {`Studying ${studygroup.subject}`}
                     </Text>
@@ -1049,6 +1196,7 @@ export default function Home() {
                             study_group: studygroup.name,
                             subject: studygroup.subject,
                           });
+                          navigation.navigate("Conversation");
                           setModalOpen(!modalOpen);
                         }}
                       >
@@ -1088,6 +1236,138 @@ export default function Home() {
           </ScrollView>
         </AnimatedContainer>
       </Modal>
+      <Modal
+        coverScreen={false}
+        isVisible={modalOpen && !studying}
+        style={{ opacity: 0.85 }}
+        hasBackdrop={false}
+      >
+        <AnimatedContainer>
+          <Pressable
+            style={{
+              alignContent: "flex-start",
+              backgroundColor: colors.secondary_3,
+              borderRadius: 16,
+            }}
+            onPress={() => setModalOpen(false)}
+          >
+            <DropdownIcon size={32} />
+          </Pressable>
+          <View style={styles.flex_column}>
+            <Text style={styles.text_white_medium}>List View</Text>
+            <Switch
+              value={modalByGroup}
+              onChange={() => {
+                setModalByGroup(!modalByGroup);
+              }}
+              style={{ alignSelf: "center" }}
+            />
+          </View>
+
+          <ScrollView>
+            {!modalByGroup ? (
+              student_statuses_global.map(
+                (student_status: StudentStatusFilterType, index: number) => {
+                  return (
+                    <View
+                      key={index}
+                      style={{
+                        alignContent: "center",
+                        alignSelf: "center",
+                        justifyContent: "center",
+                        backgroundColor: colors.secondary_3,
+                        borderColor: colors.primary_2,
+                        borderWidth: 1,
+                        borderRadius: 16,
+                        width: 256,
+                        marginVertical: 4,
+                      }}
+                    >
+                      <Text style={styles.text_white_tiny_bold}>
+                        Student: {student_status.user}
+                      </Text>
+                      <Text style={styles.text_white_tiny_bold}>
+                        {`Studying ${student_status.subject}`}
+                      </Text>
+                      {location && location.coords ? (
+                        <Text style={styles.text_white_tiny}>
+                          {`${Math.round(
+                            GetDistance(
+                              student_status.location.latitude,
+                              student_status.location.longitude,
+                              location.coords.latitude,
+                              location.coords.longitude
+                            )
+                          )}m away`}
+                        </Text>
+                      ) : (
+                        <></>
+                      )}
+                    </View>
+                  );
+                }
+              )
+            ) : (
+              <></>
+            )}
+            {modalByGroup ? (
+              study_groups_global.map(
+                (studygroup: StudyGroupType, index: number) => {
+                  return (
+                    <View
+                      key={index}
+                      style={{
+                        alignContent: "center",
+                        alignSelf: "center",
+                        justifyContent: "center",
+                        backgroundColor: colors.secondary_3,
+                        borderColor: colors.primary_2,
+                        borderWidth: 1,
+                        borderRadius: 16,
+                        width: 256,
+                        marginVertical: 4,
+                      }}
+                    >
+                      <Text style={styles.text_white_tiny_bold}>
+                        Group Name: {studygroup.name}
+                      </Text>
+                      {studygroup.landmark ? (
+                        <Text style={styles.text_white_tiny_bold}>
+                          {studygroup.landmark}
+                        </Text>
+                      ) : (
+                        <></>
+                      )}
+                      <Text style={styles.text_white_tiny_bold}>
+                        {`Studying ${studygroup.subject}`}
+                      </Text>
+                      <Text style={styles.text_white_tiny_bold}>
+                        Students Studying: {studygroup.students.length}
+                      </Text>
+                      {location && location.coords ? (
+                        <Text style={styles.text_white_tiny}>
+                          {`${Math.round(
+                            GetDistance(
+                              studygroup.location.latitude,
+                              studygroup.location.longitude,
+                              location.coords.latitude,
+                              location.coords.longitude
+                            )
+                          )}m away`}
+                        </Text>
+                      ) : (
+                        <></>
+                      )}
+                    </View>
+                  );
+                }
+              )
+            ) : (
+              <></>
+            )}
+          </ScrollView>
+        </AnimatedContainer>
+      </Modal>
 
       <AnimatedContainer>
         <View style={{ borderRadius: 16, overflow: "hidden" }}>

src/routes/Register/Register.tsx

@@ -17,6 +17,7 @@ import { UserRegister } from "../../components/Api/Api";
 import IsNumber from "../../components/IsNumber/IsNumber";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import { useToast } from "react-native-toast-notifications";
+import { ScrollView } from "react-native-gesture-handler";
 
 export default function Register() {
   const navigation = useNavigation<RootDrawerParamList>();

src/styles.tsx

@@ -44,8 +44,9 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     display: "flex",
     flexDirection: "column",
-    flex: 1,
+    flexGrow: 1,
     paddingHorizontal: 4,
+    paddingVertical: 32,
   },
   flex_row: {
     display: "flex",