I am creating a map that displays markers to show the location of nearby merchants. I transfer the data array as a props to the card. I set such an interval that every two seconds I get more sellers from my API, and the "data" array is growing.
I am collecting data inside componentWillReceiveProps. fetchData () adds more sellers to the data array.
componentWillReceiveProps(nextProps) {
if(nextProps.loading == false) {
setTimeout(nextProps.fetchData,2000);
}
And inside my MapView component -
{
this.props.data.length > 0 && this.props.data.map(merchant => (
<MapView.Marker
coordinate={{latitude: Number(merchant.latitude), longitude: Number(merchant.longitude)}}
title={merchant.name}
description={merchant.address}
identifier={"" + merchant.id}
key={merchant.id}
/>
))
}
My problem: Whenever I call fetchData (), new markers are displayed. However, the entire map is displayed again. I do not want this flashing behavior.
I would be very grateful for any help / suggestions. Thanks in advance!
PS you can find the visual here