react-native-maps markers not showing - react-native

Question

markersArr - an array of objects containing the title, latitude, and longitude:
Array [
Object {
"latitude": 31.74972996282075,
"longitude": 35.23612361202195,
"title": "ארמון הנציב",
},
Object {
"latitude": 31.779044392761453,
"longitude": 35.18955094821394,
"title": "בית הכרם",
},
Object {
"latitude": 31.765429951578884,
"longitude": 35.231964301905144,
"title": "אבו תור",
},
Object {
"latitude": 31.748258119122376,
"longitude": 35.21971512763567,
"title": "ארנונה",
},
]
The hardcoded Marker shows but the other doesn't and I can't figure out why.
The data in the array is correct.
This is the return statement:
return (
<SafeAreaView style={globalStyles.mapScreenContainer}>
<MapView
style={globalStyles.map}
region={mapRegion}
provider={null}
onMarkerPress={(e) => handleMarkerPressed(e)}
>
<Marker
coordinate={{ latitude: 31.7851951925, longitude: 35.2060641757 }}
pinColor={"purple"}
title={"מרכז מאי"}
description={"מיקום העמותה"}
onPress={() => {
console.log("");
}}
/>
{markersArr.map((marker) => {
console.log(marker);
<Marker
coordinate={{
latitude: marker.latitude,
longitude: marker.longitude,
}}
pinColor={"purple"}
title={marker.title}
onPress={() => {
handleMarkerPressed();
}}
/>;
})}
</MapView>
</SafeAreaView>
);
and the whole component if necessary:
import React, { useState, useEffect, Component } from "react";
import MapView, { Marker } from "react-native-maps";
import { SafeAreaView } from "react-native-safe-area-context";
import { globalStyles } from "../../styles/global";
import { useData } from "../../AuthProvider/UserDataProvider";
const MapScreen = () => {
const { markers, getMarkers } = useData();
const [markersArr, setMarkersArr] = useState([]);
const [mapRegion, setmapRegion] = useState({
latitude: 31.7851951925,
longitude: 35.2060641757,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
});
const handleMarkerPressed = (event) => {
// console.log(event.nativeEvent);
};
useEffect(() => {
getMarkers().then(() => {
for (const marker in markers) {
if (markers.hasOwnProperty.call(markers, marker)) {
setMarkersArr((prev) => [
...prev,
{
title: marker,
latitude: markers[marker].latitude,
longitude: markers[marker].longitude,
},
]);
}
}
});
return () => {};
}, []);
return (
<SafeAreaView style={globalStyles.mapScreenContainer}>
<MapView
style={globalStyles.map}
region={mapRegion}
provider={null}
onMarkerPress={(e) => handleMarkerPressed(e)}
>
<Marker
coordinate={{ latitude: 31.7851951925, longitude: 35.2060641757 }}
pinColor={"purple"}
title={"מרכז מאי"}
description={"מיקום העמותה"}
onPress={() => {
console.log("");
}}
/>
{markersArr.map((marker) => {
console.log(marker);
<Marker
coordinate={{
latitude: marker.latitude,
longitude: marker.longitude,
}}
pinColor={"purple"}
title={marker.title}
onPress={() => {
handleMarkerPressed();
}}
/>;
})}
</MapView>
</SafeAreaView>
);
};
export default MapScreen;
I get no errors when rendering the map

Answer 1

I've forgotten the return inside the map, added it and now it's working