Implementing custom Callout of MarMarker component

src/app/components/MapMarker.js

@@ -1,21 +1,70 @@
-import React from "react";
-import { View, StyleSheet, Image } from "react-native";
-import MapView from "react-native-maps";
+import React, { useState } from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import MapView, { Callout } from "react-native-maps";
+import colors from "../config/colors";
+import { dimensions, screen_height, screen_width } from "../config/dimensions";
 
 const markerSize = 30;
 
-export default function MapMarker({ title, image, coordinate, ...props }) {
-  // console.log({ title, image, coordinate, ...props });
+export default function MapMarker({
+  title,
+  image,
+  pictures,
+  coordinate,
+  description,
+  ...props
+}) {
+  console.log(pictures);
   return (
-    <MapView.Marker coordinate={coordinate} title={title} {...props}>
+    <MapView.Marker coordinate={coordinate} {...props}>
       <View>
-        <Image style={styles.markerPoint} source={image} resizeMode="stretch" />
+        <Image style={styles.markerPoint} resizeMode="stretch" source={image} />
       </View>
+      <Callout tooltip>
+        <View>
+          <View style={styles.container}>
+            <Text>{"Título: \t" + title}</Text>
+            <Text>{"Descrição: \t" + description}</Text>
+            <Image
+              style={{ width: 200, height: 200 }}
+              resizeMode="stretch"
+              source={{ uri: JSON.parse(pictures)[0] }}
+            />
+          </View>
+          <View style={styles.arrow}></View>
+        </View>
+      </Callout>
     </MapView.Marker>
   );
 }
 
 const styles = StyleSheet.create({
+  arrow: {
+    alignSelf: "center",
+    borderTopWidth: 20,
+    borderRightWidth: 20,
+    borderBottomWidth: 0,
+    borderLeftWidth: 20,
+    borderTopColor: colors.lightGray,
+    borderRightColor: "transparent",
+    borderBottomColor: "transparent",
+    borderLeftColor: "transparent",
+    paddingBottom: 8,
+  },
+
+  container: {
+    flexDirection: "column",
+    alignSelf: "center",
+    backgroundColor: colors.lightestGray,
+    borderColor: colors.lightGray,
+    borderRadius: 6,
+    borderWidth: 2,
+    borderBottomWidth: 4,
+    borderRightWidth: 4,
+    padding: 15,
+    width: screen_width * 0.95,
+    height: screen_height * 0.2,
+  },
   markerPoint: {
     alignSelf: "center",
     height: markerSize,

src/app/config/colors.js

@@ -9,4 +9,5 @@ export default {
   danger: "#ff5252",
   lightGray: "#d3d3d3",
   gray: "gray",
+  lightestGray: "#F0F0F0",
 };

src/app/hooks/selectFromDB.js

@@ -59,6 +59,7 @@ function partsePluviometer(row) {
     },
     image: custom_assets.pluviometer,
     description: row["Precipitation"] + "mm" + ",  " + row["Date"],
+    pictures: row["Images"],
   };
   console.log(i);
   return i;
@@ -82,6 +83,7 @@ function parseFloodZones(row) {
         ? custom_assets.floodZones.passable
         : custom_assets.floodZones.notPassable,
     description: row["Description"],
+    pictures: row["Images"],
   };
 }
 
@@ -102,6 +104,7 @@ function parseRiverLevel(row) {
     },
     image: custom_assets.riverLevel[riverIdx],
     description: row["Description"],
+    pictures: row["Images"],
   };
 }
 
@@ -129,6 +132,7 @@ function parseRainLevel(row) {
     },
     image: custom_assets.rainLevel[rainIdx],
     description: rainLevel[rainIdx],
+    pictures: row["Images"],
   };
 }