Universal maps for React Native

One MapView for Apple Maps and Google Maps on iOS, Android, and Web. Markers, shapes, overlays, GeoJSON, and static maps, all native.

Get started GitHub

iOS: Apple Maps · Google Maps
Android: Google Maps
Web: Google Maps

Declarative

Just React. Everything is a child of the map.

Markers, polylines, polygons, and overlays are plain components. Update props, and the native map follows. No imperative bookkeeping, no ids to track.

Map.tsx

import { MapView, Marker, Polyline } from '@lugg/maps';

export function Map() {
  return (
    <MapView
      style={{ flex: 1 }}
      provider="google"
      initialCoordinate={{ latitude: 37.7749, longitude: -122.4194 }}
      initialZoom={12}
    >
      <Marker
        coordinate={{ latitude: 37.7749, longitude: -122.4194 }}
        title="San Francisco"
      />
      <Polyline
        coordinates={route}
        strokeWidth={4}
        strokeColors={['#4285F4', '#34A853']}
        animated
      />
    </MapView>
  );
}

Features

Everything a map needs. Nothing you have to wire up.

Two providers, one API

Apple Maps or Google Maps on iOS. Google Maps on Android and the web. Switch with a single prop.

Built for Fabric

New Architecture from day one. Codegen specs, direct C++ communication, no bridge.

Markers, your way

Native pins or any React view. Callouts, drag gestures, rotation, scaling, and z-ordering.

Lines and shapes

Polylines with gradient strokes and snake animation. Polygons with holes. Circles.

GeoJSON

Drop in a FeatureCollection. Styled with simplestyle-spec, customizable per feature.

Overlays

Ground image overlays pinned to geographic bounds and custom tile layers from any server.

Static maps for lists

Snapshot maps rendered off the main thread and cached, so long lists stay smooth.

Camera control

moveCamera, fitCoordinates, and setEdgeInsets with animation. Camera events as you pan.

Components

A small, focused API.

Browse the docs

<MapView />The map itself. Providers, camera, gestures, static mode.<Marker />Pins with custom views, callouts, and dragging.<Polyline />Lines with gradient strokes and animation.<Polygon />Filled shapes with optional holes.<Circle />Radius-based circular overlays.<GeoJson />Render GeoJSON features directly.<GroundOverlay />Images stretched over geographic bounds.<TileOverlay />Custom raster tile layers.

Ship a map in minutes.

Install the package, add your API key with the Expo config plugin, and render a map. Works with Expo and bare React Native.

Installation Usage guide