Maps power store locators, delivery tracking, and location pickers. react-native-maps renders native Google or Apple maps inside a React Native view, and the difference between a good and a janky map experience is mostly about how you handle markers and region updates.
Key takeaways
- Use the native map provider per platform and set up API keys correctly for Google Maps.
- Control the visible region deliberately and avoid fighting the user's gestures.
- Cluster or virtualize markers when you have many pins to keep the map smooth.
Provider and setup
react-native-maps renders a real native map. On Android you typically use Google Maps, which requires an API key in the manifest; on iOS you can use Apple Maps or Google. Getting the keys and native configuration right is the first hurdle — a blank or grey map is almost always a key or billing problem.
Markers and regions
Place markers with coordinates and custom callouts, and control the camera with a region or camera prop. Treat region changes carefully: animate to a location when needed, but avoid resetting the region on every render or you will yank the map away from the user as they pan.
Performance with many pins
Hundreds of markers will stutter. Use marker clustering to group nearby pins at low zoom levels, render simple marker views, and only show detail callouts on tap. For live tracking, update marker coordinates rather than remounting markers.