tl;dr — use the marker prop tracksViewChanges to control when markers are re-rendered by setting it to false after your custom marker loads.

Adding a Custom Marker

<Marker

coordinate={marker.coordinate}

>

<CustomMarkerComponent />

</Marker>

The typical way to do this is to simply wrap your custom marker component or <Image/> in the <Marker> tags. This works okay until you have multiple markers. Even adding 10 custom markers to the map like this can cause serious performance issues with the map rendering.

The Problem

The root of the problem, as with almost all React Native performance issues, is a large number of unnecessary re-renders. Every time the map updates all of the custom markers are rendered which is quite inefficient as marker pins typically don’t change (image and coordinates).

Improving Performance

To fix this we will tell the map exactly when to track view changes to the marker pins. We do this using the tracksViewChanges prop on the marker .

import React, { PureComponent } from 'react';

import { Image } from 'react-native';

import { Marker } from 'react-native-maps'; export default class CustomMarker extends PureComponent { constructor() {

super();

this.state = {

tracksViewChanges: true,

};

} stopTrackingViewChanges = () => {

this.setState(() => ({

tracksViewChanges: false,

}));

} render() {

const { tracksViewChanges } = this.state;

const { marker } = this.props; return (

<Marker

coordinate={marker.coordinate}

tracksViewChanges={tracksViewChanges}

>

<Image

onLoad={this.stopTrackingViewChanges}

fadeDuration={0}

/>

</Marker>

);

}

}

Let break down what’s happening here:

1. We initialize with tracksViewChanges = true so when the custom marker image loads it will render.

2. onLoad of the image we set trackViewChanges = false so we don’t needlessly re-render the custom marker.

3. We should set the fadeDuration = 0 otherwise the image may get stuck only partially faded in when the marker stops tracking the view changes.

Using this component you can adds lots of pins without slowing down your app.

But remember the marker is not tracking changes after the initial image load. This means that updates to your markers will not trigger rerenders.

It is not possible to create a an effect like this where a single markers image is updated based on the carousels position unless we handle prop changes.

Handling Prop Changes

All you have to do is add this componentWillRecieveProps logic and implement the shouldUpdate method with your own implementation:

componentWillReceiveProps(nextProps) {

if (this.shouldUpdate(nextProps)) {

this.setState(() => ({

tracksViewChanges: true,

}));

}

} shouldUpdate = (nextProps) => { //TODO implement }

The map pins will now update dynamically without sacrificing performance.