Showing different markers on different points in react native maps - react-native

Question

I have a react native app where i'm using react-native-maps.Here, i want to show different marker images for different points according to their coordinate indexes. But its showing just one same marker for all. Here is the code i have now:
{this.state.coordinates.map((coordinate, index) =>
<MapView.Marker key={`coordinate_${index}`}
coordinate={coordinate}
title={coordinate.title}
description={coordinate.description}
image={require(../assests/1.png)}>
</MapView.Marker>
)}
I have more images named 2.png , 3.png etc. How can i show these images in different coordinates such as for index 0 ,it will get 1.png. For index 1,it will get 2.png. What is the wayout from here?

Answer 1

You are hard coding image index to 1, this code should work:
{this.state.coordinates.map((coordinate, index) =>
<MapView.Marker key={`coordinate_${index}`}
coordinate={coordinate}
title={coordinate.title}
description={coordinate.description}
image={require(`../assests/${index}.png`)}>
</MapView.Marker>
)}

Answer 2

Try this code. I hope it solved your problem.
First form the marker array.
For Ex.
var marker1 = {
coordinates: {
latitude: ...,
longitude: ...
},
key: MARKER1,
image: require(../assests/1.png)
};
var marker2 = {
coordinates: {
latitude: ...,
longitude: ...
},
key: MARKER2,
image: require(../assests/2.png)
};
//Push it into your marker array
this.state.markers.push(marker1);
this.state.markers.push(marker2);
//Render
<MapView
...
{this.state.markers.map(marker => (
<MapView.Marker
coordinate={marker.coordinates}
key={marker.key}>
<Image source={marker.image} style={width:50, height:50}/>
</MapView.Marker>
))}
</MapView>