mapcn-react-native
Getting Started

Renderers and providers

Understand mapcn-rn's two independent choices: the native rendering SDK and the source of the basemap style.

mapcn-rn separates two decisions that are often conflated: renderer and provider.

Axis 1: renderer

The renderer is the native SDK that draws the map and implements camera, source, layer, marker, and location-puck behavior.

RendererNative packageExpo plugin
MapLibre@maplibre/maplibre-react-native@^11.3.6@maplibre/maplibre-react-native
Mapbox@rnmapbox/maps@^10.3.5@rnmapbox/maps

Renderer-specific implementations exist only for components that need them, currently map, marker, and location-puck. Higher-level components are shared where both native SDKs support the same contract.

The two renderer packages and Expo plugins cannot coexist in one application. Switch them with mapcn-rn provider <target>, then prebuild and rebuild the native client.

Axis 2: basemap provider

The provider supplies named style definitions and their credentials. A provider is constrained to its compatible renderer.

ProviderRendererKeyDefault light / dark
CARTOMapLibreNonelight / dark
MapTilerMapLibreEXPO_PUBLIC_MAPTILER_API_KEYlight / dark
CustomMapLibreNone managed by mapcn-rnlight / dark identifiers, but no built-in styles
MapboxMapboxEXPO_PUBLIC_MAPBOX_TOKEN plus MAPBOX_DOWNLOADS_TOKEN at build timelight / dark

The provider prop can override the configured provider at runtime, but it does not swap the native renderer. Only choose providers compatible with the renderer installed in the app.

Built-in style catalogues

These names come directly from the v2 provider registry.

CARTO

Style IDLabelStyle URL
lightLighthttps://basemaps.cartocdn.com/gl/positron-gl-style/style.json
darkDarkhttps://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json
streetsStreetshttps://basemaps.cartocdn.com/gl/voyager-gl-style/style.json

The catalogue records CARTO attribution as © CARTO. The CLI describes this option as no-key and non-commercial-use; confirm the provider's current terms for your project.

MapTiler

Style IDLabelMapTiler style slug
streetsStreetsstreets-v2
lightLightbasic-v2
darkDarkdataviz-dark
satelliteSatellitesatellite
hybridHybridhybrid
outdoorsOutdoorsoutdoor-v2
topoTopotopo-v2

Each URL is resolved as https://api.maptiler.com/maps/{style-slug}/style.json?key=.... Resolution throws a descriptive error when EXPO_PUBLIC_MAPTILER_API_KEY is absent. Attribution is © MapTiler © OpenStreetMap contributors.

Mapbox

Style IDLabelStyle URI
streetsStreetsmapbox://styles/mapbox/streets-v12
lightLightmapbox://styles/mapbox/light-v11
darkDarkmapbox://styles/mapbox/dark-v11
satelliteSatellitemapbox://styles/mapbox/satellite-v9
satelliteStreetsSatellite Streetsmapbox://styles/mapbox/satellite-streets-v12
outdoorsOutdoorsmapbox://styles/mapbox/outdoors-v12
standardStandardmapbox://styles/mapbox/standard

Attribution is © Mapbox © OpenStreetMap contributors.

Custom

The custom provider has no built-in styles, key, attribution, or documentation URL. Pass an explicit style URL, style object, or light/dark pair to Map. Because no catalogue entry exists, named style IDs are not resolved for you.

Switch providers

npx mapcn-rn provider mapbox

The provider command prints a plan before changing anything. Depending on the target, it can remove and install renderer packages, replace Expo plugins, add an environment placeholder, rewrite installed renderer-specific component files, update mapcn.json, and report capability changes. It refuses a dirty Git worktree unless you explicitly pass --force.

After any renderer change, run npx expo prebuild --clean and rebuild the development client.

On this page