diff --git a/src/app/components/MapModal.js b/src/app/components/MapModal.js
index 617ffa0..f2d6107 100644
--- a/src/app/components/MapModal.js
+++ b/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 (
- {
- alert("Modal has been closed.");
- }}
+ setVisible={setIsVisible}
>
- setIsVisible(!isVisible)}>
-
-
-
-
-
- {modalContent(isVisible, setIsVisible)}
-
-
-
+ {modalContent(isVisible, setIsVisible)}
+
);
}
-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;
diff --git a/src/app/components/SelfClosingModal.js b/src/app/components/SelfClosingModal.js
new file mode 100644
index 0000000..489a12a
--- /dev/null
+++ b/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 (
+
+
+ props.setVisible(!props.visible)}
+ >
+
+
+
+
+ {props.children}
+
+
+
+ );
+}
+
+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)",
+ },
+});