Adjusting initial code for modal view in MapMarker when user wants more

information.

src/app/components/MapMarker.js

@@ -5,28 +5,33 @@ import colors from "../config/colors";
 import assets from "../config/assets";
 import { dimensions, screen_height, screen_width } from "../config/dimensions";
 import { Svg, Image as ImageSvg } from "react-native-svg";
+import MapModal from "./MapModal";
 const markerSize = 30;
 
-export default function MapMarker({
-  title,
-  image,
-  pictures,
-  coordinate,
-  description,
-  ...props
-}) {
-  console.log(pictures);
-  const pictures_s = JSON.parse(pictures);
+export default function MapMarker(props) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
   return (
-    <MapView.Marker coordinate={coordinate} {...props}>
+    <MapView.Marker coordinate={props.coordinate}>
       <View>
-        <Image style={styles.markerPoint} resizeMode="stretch" source={image} />
+        <Image
+          style={styles.markerPoint}
+          resizeMode="stretch"
+          source={props.image}
+        />
       </View>
-      <Callout tooltip style={{ width: 250 }}>
+
+      <MapModal isVisible={isModalVisible} setIsVisible={setIsModalVisible} />
+
+      <Callout
+        tooltip
+        style={{ width: 250 }}
+        onPress={() => setIsModalVisible(!isModalVisible)}
+      >
         <View>
           <View style={styles.container}>
-            <Text style={styles.title}>{title}</Text>
-            <Text style={styles.description}>{description}</Text>
+            <Text style={styles.title}>{props.title}</Text>
+            <Text style={styles.description}>{props.description}</Text>
           </View>
           <View style={styles.arrow}></View>
         </View>

src/app/components/MapModal.js

@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import { Modal, Text, TouchableOpacity, View, StyleSheet } from "react-native";
+import { screen_height, screen_width } from "../config/dimensions";
+
+function MapModal({ isVisible, setIsVisible }) {
+  console.log(screen_width);
+  return (
+    <View style={styles.centeredView}>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isVisible}
+        onRequestClose={() => {
+          alert("Modal has been closed.");
+        }}
+      >
+        <View style={styles.centeredView}>
+          <View style={styles.modalView}>
+            <View>
+              <Text>Hello World!</Text>
+
+              <TouchableOpacity
+                onPress={() => {
+                  setIsVisible(!isVisible);
+                }}
+              >
+                <Text>Hide Modal</Text>
+              </TouchableOpacity>
+            </View>
+          </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,
+  },
+});
+
+export default MapModal;