fetch multiple image source before render react native - reactjs

Question

I would like show image on my markers, but it works only when I use the icon attribute of the marker. I need to use the subview to manage the style. When I use the ICON attribute, the view image appear (so I have two image on the map) but not showing when it's in comment.
This how I fetch the data and update the state.
componentDidMount(){
getmarkers().then(data => {
let test = []
data.forEach(element => {
test.push(
{
latlng:
{
latitude: JSON.parse(element.latitude),
longitude: JSON.parse(element.longitude)
},
name: JSON.parse(element.images)[0],
id: element.id,
image: JSON.parse(element.images)[0]
}
)
});
this.setState({ markers: test, loaded: true })
})
}
}
This is my view
{this.state.markers.map((marker, i) => (
<Marker
key={i}
coordinate={marker.latlng}
title={marker.name}
description={marker.name}
tracksViewChanges={false}
// icon={{ uri: 'https://www.testeed.com/uploads/minifiedplaces/' + marker.image}}
>
<View>
<Image source={{ uri: 'https://www.testeed.com/uploads/minifiedplaces/' + marker.image }} style={{ width: 40, height: 40, borderRadius: 6 }} />
</View>
</Marker>
))}

Answer 1

The issue come from Trackviewchange. If you put this value to false. the application is lagging. then if you put the value to false, the application do not load the image at first loading.
So you have to init Trackviewchange to True and create promise after the execution of your fetch/foreach, if it doesn't work, you can do a a setimeout or setinterval to change the value of trackviewchange to false to show images changes and get a better smooth user experience.

Answer 2

const customMarkerImage = require("../../../customMarkerImage.png");
<MapView.Marker>
<View >
<Image source={customMarkerImage} onLoad={() => this.forceUpdate()}>
</Image>
</View>
</MapView.Marker>
It is probably about this issue : https://github.com/react-native-community/react-native-maps/issues/924