Extracting "SelfClosingModal" to custom component.

src/app/components/MapModal.js

@@ -8,6 +8,7 @@ import {
   TouchableWithoutFeedback,
 } from "react-native";
 import { screen_height, screen_width } from "../config/dimensions";
+import SelfClosingModal from "../components/SelfClosingModal";
 
 function modalContent(isVisible, setIsVisible) {
   return (
@@ -32,62 +33,18 @@ function MapModal({
   console.log(screen_width);
   return (
     <View style={styles.centeredView}>
-      <Modal
+      <SelfClosingModal
         animationType="slide"
         transparent={true}
         visible={isVisible}
-        onRequestClose={() => {
-          alert("Modal has been closed.");
-        }}
+        setVisible={setIsVisible}
       >
-        <TouchableWithoutFeedback onPress={() => setIsVisible(!isVisible)}>
-          <View style={styles.modalOverlay} />
-        </TouchableWithoutFeedback>
-
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
         {modalContent(isVisible, setIsVisible)}
-          </View>
-        </View>
-      </Modal>
+      </SelfClosingModal>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: "flex-end",
-    alignItems: "center",
-    marginTop: 22,
-  },
-  modalView: {
-    margin: 20,
-    width: screen_width,
-    height: screen_height * 0.4,
-    backgroundColor: "white",
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
-    padding: 35,
-    marginBottom: 0,
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  modalOverlay: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: "rgba(0,0,0,0)",
-  },
-});
+const styles = StyleSheet.create({});
 
 export default MapModal;

src/app/components/SelfClosingModal.js

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  Modal,
+  View,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from "react-native";
+import { screen_height, screen_width } from "../config/dimensions";
+
+export default function SelfClosingModal(props) {
+  return (
+    <View style={styles.centeredView}>
+      <Modal
+        animationType={props.animationType}
+        transparent={props.transparent}
+        visible={props.visible}
+      >
+        <TouchableWithoutFeedback
+          onPress={() => props.setVisible(!props.visible)}
+        >
+          <View style={styles.modalOverlay} />
+        </TouchableWithoutFeedback>
+
+        <View style={styles.centeredView}>
+          <View style={styles.modalView}>{props.children}</View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 20,
+    width: screen_width,
+    height: screen_height * 0.4,
+    backgroundColor: "white",
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    padding: 35,
+    marginBottom: 0,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalOverlay: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: "rgba(0,0,0,0)",
+  },
+});