Four ways to make your React Native map become a lot faster and more responsive. Why this is important As a mobile developer working with React Native or any platform/language, you will sooner or later have to deal with maps. And when that time comes, you need to know how to optimize it effectively, because if not, your users’ experience will greatly suffer. In this article I will show you — in — how to make your map faster, smoother, and more responsive. 4 possible ways Putting a map and use it in your React Native application is dead simple because of . It’s a straightforward API, you only need to render a MapView to display a blank map, then render a bunch of Markers, which are essentially pins on a map. react-native-maps If you are not familiar with react-native-maps, make sure to check out their before continue. documentation What the problem is The problem is, as with a lot of other components, the performance of a React Native map will . Displaying 5 Markers for your favorite cafes around the city would be a walk in the park; but let say, if your app shows all McDonald’s in the country, there will be of Markers if you zoom out large enough! You will certainly experience lags up to a point where your app is effectively unusable. get worse the more data it has to handle hundreds or thousands Photo credit: EduBirdie Delays in React Native are commonly caused by , simply means that your app renders components more frequently than it should, wasting a lot of time. They are usually caused by changes in (Markers in this case). If we only allow re-renders when necessary — when the state of the Marker itself changes — the performance of the Map would be significantly better. excessive re-rendering part of the state unrelated to the component So we identified the problem and came up with a solution. But before we go further, let me first give you a small relief: your map might not be as slow as it appears. If you happen to be viewing your app in the iOS Simulator on macOS, and you are using Google as your map provider like this: <MapView  style={{ : }}  provider= > flex 1 'google' I might have good news for you. For some reasons, the , while the default Apple map does not (just remove and you will see). To better access its performance on iOS, make sure to have an iPhone which you can test the app on. Google-provided map in React Native runs very slowly on iOS Simulator provider='google' How to solve it 1. Turn off trackViewChanges in custom Markers when not needed The component comes with a default parameter set to true. This parameter enables custom Markers to track changes in the view and be redrawn. If your application does not require this feature, simply set to false will significantly increase speed. Marker trackViewChanges trackViewChanges {Marker} ; { ( import from 'react-native-maps' export default ( ) function MyMarker return );
} < = = = = = = /> Marker key {pin.id} coordinate {pin.coord} title {pin.name} onPress {onPinChosen} image {../assets/pin.png} tracksViewChanges {false} 2. React.memo, or shouldComponentUpdate, or PureComponent Another way to minimize rendering is to only allow your to be re-rendered when its . Marker props actually change (and usually they don’t: when is the last time your house move when you’re looking at it on the map?) React provide us with (for function components) and (for class components). Alternatively, you can also use to achieve the same result as React.memo shouldComponentUpdate React.PureComponent shouldComponentUpdate Firstly, an example of : React.memo React ; { Marker } ; { {coord} = props; ( import from 'react' import from 'react-native-maps' ( ) function CarPin props const return );
}
export default CarMarker = React.memo(CarPin); < = = /> Marker coordinate {coord} tracksViewChanges {false} an example of : shouldComponentUpdate React ; { Marker } ; {
  shouldComponentUpdate(nextProps) { nextProps.coord !== .props.coord
  }
  render(){ ( import from 'react' import from 'react-native-maps' export default . class CarPin extend React Component return this return );
  }
} < = = /> Marker coordinate {this.props.coord} tracksViewChanges {false} and an example of : React.PureComponent React ; { Marker } ; {
  render(){ ( import from 'react' import from 'react-native-maps' export default . class CarPin extend React PureComponent return );
  }
} < = = /> Marker coordinate {this.props.coord} tracksViewChanges {false} Make sure to check out , and official documentation if you want to further customize the behavior of your component. React.memo shouldComponentUpdate React.PureComponent 3. Use “icon” instead of “image” to build your custom Marker The performance difference is not explicitly said in the documentation, but according to the : official source code image: PropTypes.any, icon: PropTypes.any, /**
  * A custom image to be used as the marker's icon. Only local image resources are allowed to be used.
  */ /**
  * Marker icon to render (equivalent to `icon` property of GMSMarker Class).Using this property has an advantage over `image` in term of performance, battery usage... because it doesn't trigger tracksViewChanges. (tracksViewChanges is set to YES by default if iconView is not nil).
  */ 4. Cluster your Markers Instead of explaining what clustering means in this case, let me show you an example from . The images below shows a map clustering (left) and a map clustering (right) an app I built with without Map clustering can be done easily using APIs such as or react-native-map-clustering @bam.tech/react-native-component-map-clustering While the difference in is already impressive, the difference in is even more amazing. To understand why, we have to look at how map clustering works: appearance performance First, the API will count the number of Markers located in a (relatively) small region on the . Instead of rendering the Markers, it will render the number of Markers on the map. When the user zoom in or zoom out, the number will be calculated again. When the user zoom in enough, the actual Markers will be displayed. MapView This means, the app will save a lot of time from rendering a whole bunch of Markers. Instead it will only count and render the number of Markers. — since the app will have to count the number of Markers every time the user zooming in or out, make sure that the trade off between rendering time and recounting time is worth it. This is also where you should be careful Conclusion Optimizing React Native map, while relatively simple, is not something straightforward that is automatically done for you by the APIs. In this article I have listed 4 different ways to do that: Turn off in custom Markers when not needed. trackViewChanges Use , or , or . React.memo shouldComponentUpdate React.PureComponent Use “icon” instead of “image” to build a custom Marker. Cluster your Markers. I hope by using a these tips, you will be able to build faster, more responsive applications that can provide a superb user experience. Best of luck! If you are interested in what I do, or want to contact me, feel free to send me an email , visit my Github and connect with me on LinkedIn .

Apple

BUNCH

Optimize React Native Map in Your Applications [A How To Guide]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Cross-Platform vs Native: The 50 Shades of Mobile App Development

Flutter vs. React Native: What App Developers Should Know About Cross-Platform Mobile Development

Future of Mobile Apps: Here’s Everything that’s Worth the Wait

How To Make an Image Uploading App Using Vue, Quasar, Firebase Storage and Cordova [Part 1]

How To Make an Image Uploading App Using Vue, Quasar, Firebase Storage and Cordova [Part 2]

Minimum Viable Product: a Crucial Stage of Development Process

Cross-Platform vs Native: The 50 Shades of Mobile App Development

Flutter vs. React Native: What App Developers Should Know About Cross-Platform Mobile Development

Future of Mobile Apps: Here’s Everything that’s Worth the Wait

How To Make an Image Uploading App Using Vue, Quasar, Firebase Storage and Cordova [Part 1]

How To Make an Image Uploading App Using Vue, Quasar, Firebase Storage and Cordova [Part 2]

Minimum Viable Product: a Crucial Stage of Development Process

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps