react-brain
Browse decisions
React & language foundations 3App architecture 9UI 12Platform & native 9Build, test, observe, secure 6AI in React apps 3stack composerdecision recordscensusstaleness bencharchitecturechangelogmethodologyroadmap

entriesui · verified 2026-07-13 · react + react-native

Maps & geolocation UI

draftedconfidence: lowearly: 1/12 of this tier graded so far (0 overturned) — the public scorecard →

re-verified 2× — 2026-07-13 · 2026-07-06 · changelog

recommendation

React Native → react-native-maps for platform-native basics (markers, regions); switch to MapLibre RN when you need custom vector styles or offline without per-load billing, or @rnmapbox/maps when you want Mapbox's full commercial stack. Web → react-map-gl on MapLibre GL JS (mapcn for ready-made shadcn-style components). Lightly vetted (confidence: low) — prototype clustering + offline on-device before committing.

  • basic platform-native map + a few markers (RN) → react-native-maps (expo-maps is the Expo-native successor but ALPHA — track it, don't ship it)
  • custom map styling / offline regions / no per-load billing → MapLibre (@maplibre/maplibre-react-native on RN, react-map-gl on web) + any tile source
  • turnkey commercial stack (style studio, navigation, support) and the pricing is acceptable → @rnmapbox/maps
  • large marker sets needing native clustering on New Arch → react-native-better-maps (1.0, one release old — prototype first)
  • shadcn-patterned web map UI fast → mapcn
  • web app committed to Google Maps (tiles, Places, Street View) → @vis.gl/react-google-maps

Low confidence — fast-moving or lightly-vetted domain: treat the pick as a vetted lead and prototype before committing.

Options & tradeoffs

the field considered — and why each one isn’t the default here

optiontradeoffevidence
react-native-maps (1.29)the long-standing RN default — Apple Maps on iOS / Google Maps on Android; simple markers/polylines; limited style customization, no programmatic offline-region API; Google Maps billing applies on Android (~$7/1k mobile map loads)1.2M/wk
expo-maps — ALPHAExpo's modern maps module (Apple Maps iOS / Google Maps Android, SDK-versioned); explicit alpha with frequent breaking changes, no Expo Go — watch, don't bet yet90k/wk
@rnmapbox/maps (10.x)Mapbox native SDK — custom vector/GL styles, offline region downloads, navigation stack; commercial usage pricing after the free tier
@maplibre/maplibre-react-native (11.x)open-source Mapbox-SDK fork — Mapbox-compatible GL styles + offline, works with ANY tile source, no token or per-load pricing; you source (or pay for) tiles yourself
react-native-better-maps (1.0, Nitro)NEW (2026-06) — MapKit + Google Maps on Nitro Modules, New-Arch-only (RN 0.78+); native marker clustering + POI taps; one release old
web: react-map-gl / react-leaflet / mapcnreact-map-gl (8.x) wraps MapLibre/Mapbox GL JS; react-leaflet = classic raster Leaflet; mapcn = shadcn-patterned map components on MapLibre + Tailwind (copy-paste model)1.9M/wk · ships in 1/34
web: @vis.gl/react-google-maps (1.9)the vis.gl/OpenJS-governed React wrapper for the Google Maps JS API — components + hooks, markers/drawing; the maintained pick when the product is committed to Google's tiles/Places stack (per-load billing applies)1.5M/wk

evidence: npm weekly downloads (signals snapshot) · “ships in n/D” = adoption across the production-app census, honest denominators

npm weekly downloads (from the corpus's last signals run): react-native-maps 1.2M · expo-maps 90k · @rnmapbox/maps 160k · @maplibre/maplibre-react-native 65k · react-native-better-maps 247 · react-map-gl 1.9M · @vis.gl/react-google-maps 1.5M · react-leaflet 2.5M

Verified notes

The durable selection axis is the TILE/SDK PROVIDER, not the React wrapper: platform-native (Apple/Google — free-ish but Google bills per load and styling is limited) vs Mapbox (powerful, commercial) vs MapLibre + open tiles (free, self-hostable, Mapbox-compatible styles) — wrappers are cheap to swap, the provider commitment (billing, offline rights, style ecosystem) is not. NEW entry (2026-07-06): two independent signals in one week — react-native-better-maps 1.0 (TWiR #288) and mapcn (React Status #481) — exposed that maps, a common hard app need, had no entry. Versions verified vs npm (react-native-maps 1.29, @rnmapbox/maps 10.3, maplibre-react-native 11.3, react-map-gl 8.1, better-maps 1.0.0); expo-maps ALPHA status verified vs the Expo docs. ADDED 2026-07-13: @vis.gl/react-google-maps (1.9.0, verified vs npm) on its 2nd independent signal (TWiR #289 bench → React Status #482) — the Google-committed web lane the web row lacked.

Canonical reading

Editorial annotations on why each piece matters — the articles themselves are the originals; read them there.

react-native-maps vs Mapbox RN vs MapLibre RN (2026)PkgPulse (team-authored)

The concrete three-way comparison behind this entry's axes: per-load pricing math (Google ~$7/1k mobile loads vs Mapbox $0.50/1k after free tier vs MapLibre free-but-BYO-tiles), which libraries actually expose offline region-download APIs (Mapbox/MapLibre yes, react-native-maps no), GL style customization, API-key requirements, and New-Architecture status — with code for each. Team-authored (no individual byline) but sourced and measured; use for the decision table, not authority.

Sources

Depth (in-domain rules) is owned by the react-native-best-practices skill — this entry is selection breadth.

Related in ui: styling · component-libs · animation · lists · a11y · i18n · charts · editors · svg · calendars · polish