Enabling to close loading modal

src/app/components/LoadingMarkersModal.js

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   Modal,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
+  TouchableOpacity,
 } from "react-native";
 
 import { MaterialCommunityIcons } from "@expo/vector-icons";
@@ -12,10 +13,27 @@ import colors from "../config/colors";
 import { dimensions, screen_height } from "../config/dimensions";
 
 export default function LoadingMarkersModal({ show }) {
-  if (show) {
+  const [closed, setClosed] = useState(false);
+  if (show && !closed) {
     return (
+      // NOTE:
       // 267 = (tabBar height = 49) + (data menu btn height = 48) + (this modal = 170/2)
       <View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
+        <View
+          style={{
+            justifyContent: "flex-start",
+            alignSelf: "flex-end",
+          }}
+        >
+          <TouchableOpacity onPress={() => setClosed(true)}>
+            <MaterialCommunityIcons
+              name="close"
+              size={20}
+              color={colors.primary}
+              alignItems="center"
+            />
+          </TouchableOpacity>
+        </View>
         <MaterialCommunityIcons
           name="sync"
           size={48}
@@ -37,7 +55,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     width: "80%",
     height: 170,
-    justifyContent: "center",
+    // justifyContent: "center",
     alignSelf: "center",
     backgroundColor: colors.lightestGray,
     borderColor: colors.primary,