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