Closing MapModal when user clicks outside modal component.

src/app/components/MapModal.js

@@ -1,8 +1,34 @@
 import React, { Component } from "react";
-import { Modal, Text, TouchableOpacity, View, StyleSheet } from "react-native";
+import {
+  Modal,
+  Text,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from "react-native";
 import { screen_height, screen_width } from "../config/dimensions";
 
-function MapModal({ isVisible, setIsVisible }) {
+function modalContent(isVisible, setIsVisible) {
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        setIsVisible(!isVisible);
+      }}
+    >
+      <Text>Hide Modal</Text>
+    </TouchableOpacity>
+  );
+}
+
+function MapModal({
+  isVisible,
+  setIsVisible,
+  title,
+  description,
+  icon,
+  pictures,
+}) {
   console.log(screen_width);
   return (
     <View style={styles.centeredView}>
@@ -14,19 +40,13 @@ function MapModal({ isVisible, setIsVisible }) {
           alert("Modal has been closed.");
         }}
       >
+        <TouchableWithoutFeedback onPress={() => setIsVisible(!isVisible)}>
+          <View style={styles.modalOverlay} />
+        </TouchableWithoutFeedback>
+
         <View style={styles.centeredView}>
           <View style={styles.modalView}>
-            <View>
-              <Text>Hello World!</Text>
-
-              <TouchableOpacity
-                onPress={() => {
-                  setIsVisible(!isVisible);
-                }}
-              >
-                <Text>Hide Modal</Text>
-              </TouchableOpacity>
-            </View>
+            {modalContent(isVisible, setIsVisible)}
           </View>
         </View>
       </Modal>
@@ -60,6 +80,14 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 5,
   },
+  modalOverlay: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: "rgba(0,0,0,0)",
+  },
 });
 
 export default MapModal;