Response-native-maps: how to add markers without re-rendering the entire map?

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

+4

Source: https://habr.com/ru/post/1691125/


All Articles