onRegionChangeComplete

I had the opportunity to fine tune an Android app that was using react-native-maps. I spent some time googling about it and was able to improve performance by a lot! At first the app ran around 0–15 fps based on the In-App “Show Perf Monitor”. I was able to bring that up to 30–59 fps by doing these performance enhancements.

One noticeable performance boost was switching from using the prop onRegionChange to onRegionChangeComplete.

onRegionChange updates the map position as the user is scrolling and zooming. Imagine every swipe of your finger or pinch onRegionChange is being called. That can cause some lag and stutter if the user is quick with their actions.

onRegionChangeComplete is only called when the user has stopped interacting with the map. So the user can pinch and zoom as much as they want and once they stop this func will run.

Another way to help boost performance in a specific component is by using a pure component! They help to reduce the amount of renders within the component by running a specificl life cycle method. This life cycle method is “shouldComponentUpdate()”.

Pure components run “shouldComponentUpdate()”, but they only do a shallow comparison of objects in the props and state. That means if your objects are complex they may return a false-negative.

If the function is returning a false-negative it may be necessary to use a regular component instead. You would then have to implement a custom version of “shouldComponentUpdate()” yourself.

This was a life saver in the performance department. Not only were images used for markers, but custom components were in the mix. The markers that were more complex used Views with rounded corners and Text, and Image components.

To be honest some sacrifices were made to the markers so “tracks

ViewChanges” could be implemented. Since tracksViewChanges was set to false the text component was useless. The text in the marker provided info that would potentially be updated after graphql query polling occurred.

So to get more into it, “tracksViewChanges” is a boolean property. If set to false the marker won’t be re-rendered and it will be static. This is useful in applications that only need markers to stay put.

With these 3 modifications to react-native-maps I was able to improve performance by a lot. My situation could be unique since we had custom markers, but I still wanted to share.

Related posts:

With all the EPOS systems out there, how do you know which one to pick? There are so many to choose from. In this article, I’m going to help you decide on an EPOS System for Takeaway businesses. So…

Are you tired of struggling to engage meeting participants? No one talks. Participants (using that term loosely, because of course there isn’t any participation!) look around whenever you ask for…

When people do not fit into an existing mold, it is because they belong to something greater. Something they will never find because they will one day shape it for themselves. People rush into their…