Switching MapMarker ballon to bottom sheet.

src/app/components/MapMarker.js

@@ -1,10 +1,8 @@
 import React, { useState } from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import MapView, { Callout } from "react-native-maps";
+import { View, StyleSheet, Image } from "react-native";
+import MapView from "react-native-maps";
 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 { dimensions } from "../config/dimensions";
 import MapModal from "./MapModal";
 const markerSize = 30;
 
@@ -12,34 +10,23 @@ export default function MapMarker(props) {
   const [isModalVisible, setIsModalVisible] = useState(false);
 
   return (
-    <MapView.Marker coordinate={props.coordinate}>
+    <MapView.Marker
+      coordinate={props.coordinate}
+      onPress={() => setIsModalVisible(!isModalVisible)}
+    >
       <View>
         <Image
           style={styles.markerPoint}
           resizeMode="stretch"
           source={props.image}
         />
-      </View>
-
-      <MapModal
-        isVisible={isModalVisible}
-        setIsVisible={setIsModalVisible}
-        {...props}
-      />
 
-      <Callout
-        tooltip
-        style={{ width: 250 }}
-        onPress={() => setIsModalVisible(!isModalVisible)}
-      >
-        <View>
-          <View style={styles.container}>
-            <Text style={styles.title}>{props.title}</Text>
-            <Text style={styles.description}>{props.description}</Text>
-          </View>
-          <View style={styles.arrow}></View>
-        </View>
-      </Callout>
+        <MapModal
+          isVisible={isModalVisible}
+          setIsVisible={setIsModalVisible}
+          {...props}
+        />
+      </View>
     </MapView.Marker>
   );
 }
@@ -84,21 +71,3 @@ const styles = StyleSheet.create({
     width: markerSize,
   },
 });
-
-/*
- * NOTE: Code for displaying images inside MapMarker. Leaved here for possible
- * future needs
- *
- *
- *   {pictures_s.length > 0 && (
- *     <Svg width={240} height={120}>
- *       <ImageSvg
- *         width={"100%"}
- *         height={"100%"}
- *         preserveAspectRatio="xMidYMid stretch"
- *         href={{ uri: pictures_s[0] }}
- *       />
- *     </Svg>
- *   )}
- *
- */