# React Native Maps — Interactive Maps for Mobile Apps

> A cross-platform map component for React Native that wraps Apple Maps on iOS and Google Maps on Android, providing markers, polygons, heatmaps, and custom overlays with a unified API.

## Install

Save in your project root:

# React Native Maps — Interactive Maps for Mobile Apps

## Quick Use
```bash
npm install react-native-maps
npx pod-install   # iOS only
```
```jsx
import MapView, { Marker } from 'react-native-maps';
<MapView style={{ flex: 1 }} initialRegion={{ latitude: 37.78, longitude: -122.43, latitudeDelta: 0.05, longitudeDelta: 0.05 }}>
  <Marker coordinate={{ latitude: 37.78, longitude: -122.43 }} title="SF" />
</MapView>
```

## Introduction
React Native Maps provides a declarative React component for embedding maps into iOS and Android applications. It delegates to platform-native map renderers, giving users smooth 60 fps panning and zooming without a WebView.

## What React Native Maps Does
- Renders Apple Maps on iOS and Google Maps on Android from a single codebase
- Supports markers, callouts, polylines, polygons, circles, heatmaps, and custom overlays
- Exposes camera animation APIs for programmatic panning, zooming, and rotation
- Integrates with the Geolocation API for real-time user tracking
- Provides event callbacks for region changes, marker presses, and map readiness

## Architecture Overview
The library bridges React Native's JavaScript thread to native MapKit (iOS) and Google Maps SDK (Android) views via the React Native bridge. Props declared in JSX are serialized and forwarded to native view managers that create or update native annotation, overlay, and camera objects. Touch events flow back through the bridge as synthetic React events.

## Self-Hosting & Configuration
- Add a Google Maps API key to `AndroidManifest.xml` and `AppDelegate` for Google provider
- Use `provider="google"` prop to force Google Maps on iOS (requires Google Maps SDK pod)
- Configure map types (standard, satellite, hybrid, terrain) via the `mapType` prop
- Enable `showsUserLocation` and `followsUserLocation` for live GPS tracking
- Adjust `minZoomLevel` and `maxZoomLevel` to constrain zoom range

## Key Features
- Platform-native rendering delivers 60 fps panning with hardware acceleration
- Custom marker views accept arbitrary React components for branded pins
- Animated region transitions with `animateToRegion` and `animateCamera`
- GeoJSON overlay support for rendering complex geographic datasets
- Clustering plugin (`react-native-map-clustering`) for handling large marker sets

## Comparison with Similar Tools
- **Mapbox GL Native** — more styling control but requires a commercial license at scale
- **react-native-mapbox-gl** — Mapbox wrapper with vector tile support; heavier setup
- **Leaflet (via WebView)** — web-based approach; smoother in browsers but slower on mobile
- **Google Maps Flutter** — Flutter equivalent; react-native-maps covers the React Native ecosystem

## FAQ
**Q: Is a Google Maps API key required?**
A: On Android, yes. On iOS, Apple Maps is the default and requires no key; Google Maps on iOS needs a key.

**Q: Can I use custom map tiles?**
A: Yes. The `UrlTile` and `LocalTile` components overlay custom tile servers or offline tile packs.

**Q: How do I cluster large numbers of markers?**
A: Use the companion `react-native-map-clustering` library, which groups nearby markers at lower zoom levels.

**Q: Does it work with Expo?**
A: Yes. react-native-maps is included in the Expo SDK and works in managed and bare workflows.

## Sources
- https://github.com/react-native-maps/react-native-maps
- https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

---
Source: https://tokrepo.com/en/workflows/asset-ef4bda09
Author: AI Open Source