# Map — React Native component for Expo

> A map with flying camera, clusters, animated pins and routes — no API key, works in Expo Go.

A full map with no API key, no native module and no config plugin: raster tiles drawn by React Native and moved on the UI thread, so it runs in Expo Go, iOS, Android and web. Drag and fling with momentum, pinch around your fingers, double-tap to zoom in, two-finger tap to zoom out. The camera flies like a plane between far places and glides between near ones. Comes with drop-in pins, rating tags, clusters that split as you zoom, a pulsing location dot with a heading beam, routes that draw themselves on, geofence circles and a floating control stack, all themed by the kit and switching to a dark basemap in dark mode.

- Docs: https://expokit.in/docs/components/map
- Tier: Pro (ExpoKit Pro plan)
- Also called: map view, map without API key, map with pins and clusters, map without native module
- Category: Display
- Platforms: iOS, Android, web
- Expo Go: yes, no development build needed
- npm dependencies: react-native-reanimated, react-native-worklets, react-native-gesture-handler, react-native-svg
- Uses ExpoKit items: kit
- Variants: Explore, Ride, Drop Pin

## Installation

This component is part of ExpoKit Pro. With a Pro plan, log the CLI in once and add it like any other item:

```bash
npx @expokit/cli@latest login
```

Plans: https://expokit.in/pricing

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `initialCamera` | `{ center: [lng, lat], zoom }` | `world` | Where MapView opens. |
| `initialBounds` | `[lng, lat][]` | — | Open framing these points inside contentInset (wins over initialCamera). |
| `theme` | `'auto' \| 'light' \| 'dark' \| 'streets' \| 'satellite'` | `'auto'` | Basemap look; auto follows light / dark mode. |
| `tileUrl` | `string` | `Esri` | Your raster tiles: {z} {x} {y}, {r} → @2x on retina, {s} → subdomain. |
| `tileMaxZoom` | `number` | `19` | Deepest zoom your tiles exist at; past it they're scaled up. |
| `attribution` | `string \| null` | `tile credit` | Credit line at the bottom-left. |
| `minZoom / maxZoom` | `number` | `0 / 19` | Zoom limits. |
| `contentInset` | `{ top, right, bottom, left }` | `0` | Space your own UI covers; the camera centres and frames inside the rest. |
| `onCameraChange` | `(camera) => void` | — | The camera came to rest. |
| `onPress / onLongPress` | `(coordinate) => void` | — | Tap, or press and hold, on the map. |
| `ref` | `MapViewHandle` | — | flyTo, easeTo, fitBounds, zoomBy, getCamera. Inside the map, useMap() returns the same. |
| `MapPin` | `{ coordinate, variant: 'pin' \| 'pill' \| 'dot', label, icon, color, selected, onPress }` | — | Ready-made marker. |
| `MapMarker` | `{ coordinate, anchor, rotation, moveDuration, onPress, children }` | — | Any view pinned to a coordinate. |
| `MapClusters` | `{ data, coordinate, keyExtractor, renderItem, renderCluster?, standalone?, radius }` | — | Merges nearby markers into bubbles. |
| `MapRoute` | `{ coordinates, color, width, casing, dashed, progress, track, animateIn }` | — | A line that draws itself on. |
| `MapUserLocation` | `{ coordinate, heading, accuracy, color }` | — | Pulsing location dot. |
| `MapCircle` | `{ center, radius (m), color, fillOpacity }` | — | A real-world-size circle. |
| `MapControls` | `{ onLocate, following, position }` | — | Zoom and locate buttons. |
| `pointAlong` | `(coordinates, t) => { coordinate, bearing }` | — | Point and heading part-way along a line. |

## Behaviour & accessibility

- **Touch**: One finger drags and flings with momentum; two fingers pinch around their midpoint and pan at the same time. Double-tap zooms in where you tap, a two-finger tap zooms out, press and hold fires onLongPress.
- **Camera**: flyTo zooms out, travels and zooms back in for far hops and glides for near ones; easeTo always glides; fitBounds frames a set of points inside contentInset, so nothing hides under your sheet.
- **Tiles**: Sharp tiles fade in over a coarser layer two zooms out, so the map is never blank while loading. Tiles are only re-laid-out when the camera drifts far from them; every frame in between is a single transform on the UI thread.
- **Markers**: Any view inside MapMarker stays the same size as you zoom. Give it a new coordinate and it glides there; give it a rotation and it turns the short way round. Pins drop in, tags and bubbles grow in.
- **Basemap**: Esri's keyless light / dark canvas (with a separate label layer), streets and satellite tiles; auto follows the kit's light / dark mode. They're for building and demos: for production traffic pass tileUrl for a provider you have a plan with, and keep the credit line it asks for.
- **Screen readers**: Markers and cluster bubbles are buttons named by their label; the controls are named Zoom in, Zoom out and Show my location.
- **Reduced motion**: Camera moves, zooms and route drawing jump to their end; the location pulse stops.

## FAQ

### How do I make a map view in React Native?

Use ExpoKit's Map, a Pro component: with ExpoKit Pro, the ExpoKit CLI copies a ready-made map view into your Expo or React Native app as plain TypeScript you can edit. It works on iOS, Android and web, and in Expo Go.

### Does Map work in Expo Go?

Yes. Map runs in Expo Go on iOS and Android with no development build — its packages (react-native-reanimated, react-native-worklets, react-native-gesture-handler, react-native-svg) are all included in Expo Go.

### How do I add Map to my Expo app?

With ExpoKit Pro, add it with the ExpoKit CLI: it copies the component's source into your app and installs react-native-reanimated, react-native-worklets, react-native-gesture-handler, react-native-svg, so the code is yours to change. The install command is on this page for Pro members.

### Is Map free?

Map is part of ExpoKit Pro. With a Pro plan, log the CLI in once and it installs the full source into your app.

### Can I change how Map looks?

Yes. It takes its colours, radius and light / dark mode from useKit(), so wrapping your app in <KitProvider accent radius> re-skins it with every other ExpoKit component. The code lives in your project, so you can also edit anything directly.

## More

- Live preview, variants and code: https://expokit.in/docs/components/map
- Every ExpoKit component, screen, template and chart: https://expokit.in/llms.txt
- Install commands and props for every free component: https://expokit.in/llms-full.txt
- Pricing: https://expokit.in/pricing