So within the constructor, I define a state
this.state = {
markers: [{
title: "Bike1",
description: "Bike1",
latitude: 38.232,
longitude: -121.3312186
},
{
title: "Bike2",
description: "Bike2",
latitude: 39.532,
longitude: -123.5312186
}]
}
Later on, I call the function to map all markers to actual MapView.Markers
.
This looks as follows:
{this.state.markers.map( marker => {
console.log(JSON.stringify(marker));
<MapView.Marker
coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
title={marker.title}
description={marker.description}
>
<View style={styles.bikeRadius}>
<View style={styles.bikeMarker}></View>
</View>
</MapView.Marker>
})}
However, this works when I call a single marker.
<MapView.Marker coordinate={{latitude: this.state.gpsPosition.latitude, longitude: this.state.gpsPosition.longitude}}>
<View style={styles.radius}>
<View style={styles.marker}></View>
</View>
</MapView.Marker>
I am new to react-native and am not sure what I am doing wrong. Any suggestions?
The link to the full file is https://codepen.io/yeni/pen/QgyWPZ
You're not returning anything from your map
function to render. Quick fix would be to do something like this:
{this.state.markers.map( (marker, index) => {
console.log(JSON.stringify(marker));
return (
<MapView.Marker
key={index}
coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
title={marker.title}
description={marker.description}
>
<View style={styles.bikeRadius}>
<View style={styles.bikeMarker}></View>
</View>
</MapView.Marker>
)
})}
I've also included a simple way to add a key
using index
from the map
function as you will get a warning about that when using map
in this manner.