How to add Custom Map Marker in React Native and improve performance

Moderator: Reach-Native-gp

Post Reply
Anisha Sharma
Posts: 11
Joined: Fri May 08, 2020 12:30 pm

How to add Custom Map Marker in React Native and improve performance

Post by Anisha Sharma »

In order to add a customised map marker to your MapView, we can use the react-native-maps package, which is one of the most popular choices. It is easy to implement and also provides the developer with a lot of flexibility.

To add Custom Map Marker
The best and the most common way of doing this is to first select the component or <Image/> that you want to implement as a customised marker for your marker. The next step will be to wrap this component around the <Marker> tags.

Problem
Wrapping a custom marker component with <Marker> tags is easy, but the problem occurs when there are too many of them (for example 10). This can at times cause the map to lag and also create performance issues. There are a large number of unwanted re-renders occurring as the map keeps updating its view and render the custom markers again and again. This makes the process very inefficient, as the customised pin remains unchanged.

How to fix it and Improve Performance?
The first step to do this will be to let the MapView know exactly when to track view changes made to the customised marker pins. This can be done by using the tracksViewChanges that is provided as a prop in the marker.

Breaking down the components that you may use:
1. Set tracksViewChanges = true. This will make sure that the custom marker on loading will render.
2. In onLoad for the image, we will set the tracksViewChanges = false. This will stop the unnecessary re-rendering of the map marker component.
3. Lastly, set fadeDuration=0. When the marker will stop tracking the changes made in the view, this will stop the image from getting stuck on being partially faded.

With this solution, you can add as many customised markers to your map without compromising with the performance of the app.

Post Reply