How to optimize react-native map view and increase performance

React native always has been quite painful when it comes to performance compared to a native application. Today we will focus on increasing the performance and how to optimize react-native map view which has many pegs or markers.

First we will check for a library to render react-native map view. https://github.com/react-native-maps/react-native-maps this is the most commonly used map view that used to render most of the maps.

You can install the map view using this link https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md It has some tricky parts and if you face any problems when integrating, leave a comment and I will help you out.

If you render the iOS map viwe you can see its performance is better when loading a large number of markers. But when we turn into google maps it is not very optimized and we have to take extra measures to optimize it.

In the above code, we initially display a marker in blue and make it white after 600 milliseconds to demonstrate a state update.

Leave a Comment