Custom component for map marker

src/app/components/MapMarker.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { View, StyleSheet, Image } from "react-native";
+import MapView from "react-native-maps";
+
+const markerSize = 30;
+
+export default function MapMarker({ ID, title, image, coordinate, ...props }) {
+  console.log(ID);
+  return (
+    <MapView.Marker key={ID} coordinate={coordinate} title={title} {...props}>
+      <View>
+        <Image style={styles.markerPoint} source={image} resizeMode="stretch" />
+      </View>
+    </MapView.Marker>
+  );
+}
+
+const styles = StyleSheet.create({
+  markerPoint: {
+    alignSelf: "center",
+    height: markerSize,
+    width: markerSize,
+  },
+  title: {
+    fontWeight: "400",
+  },
+});

src/app/hooks/selectFromDB.js

@@ -29,7 +29,7 @@ var ID = 0;
 function partsePluviometer(row) {
   displacement += offset;
   return {
-    key: ++ID,
+    ID: ++ID,
     title: "Pluviometro",
     coordinate: {
       latitude: row["Latitude"] + displacement,
@@ -43,7 +43,7 @@ function partsePluviometer(row) {
 function parseFloodZones(row) {
   displacement += offset;
   return {
-    key: ++ID,
+    ID: ++ID,
     title: row["Passable"] == 0 ? "Transponível" : "Intransponível",
     coordinate: {
       latitude: row["Latitude"],
@@ -59,7 +59,7 @@ function parseRiverLevel(row) {
   const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"];
   const riverIdx = row["RiverIdx"];
   return {
-    key: ++ID,
+    ID: ++ID,
     title: "Nível do rio",
     coordinate: {
       latitude: row["Latitude"],
@@ -82,7 +82,7 @@ function parseRainLevel(row) {
   ];
   const rainIdx = row["RainIdx"];
   return {
-    key: ++ID,
+    ID: ++ID,
     title: "Nível da chuva",
     coordinate: {
       latitude: row["Latitude"],

src/app/screens/MapFeedScreen.js

@@ -1,14 +1,19 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { StyleSheet, View } from "react-native";
-import MapView, { Marker } from "react-native-maps";
+import MapView from "react-native-maps";
 
 import colors from "../config/colors";
 
 import useLocation from "../hooks/useLocation";
 import useMarkers from "../hooks/selectFromDB";
+import MapMarker from "../components/MapMarker";
 
 function MapFeedScreen(props) {
-  const location = useLocation();
+  const location = useLocation({
+    latitude: -22.1070263,
+    longitude: -51.3948396,
+  });
+
   const markers = useMarkers();
 
   console.log(markers.markers);
@@ -31,7 +36,7 @@ function MapFeedScreen(props) {
         }}
       >
         {markers.markers.map((val) => {
-          return <MapView.Marker {...val} />;
+          return <MapMarker {...val} />;
         })}
       </MapView>
     </View>