Maps in React Native: Google Maps vs Apple Maps vs Mapbox

Maps look like one of the easier features to add: drop in a component, show a pin. Then the requirements arrive: hundreds of markers, custom styling to match the brand, clustering, offline areas, routes, and an invoice from the map provider after a busy month. The library you pick decides how hard each of those is.

This guide compares the main options for maps in React Native in 2026 (react-native-maps, Expo's newer expo-maps, and Mapbox through @rnmapbox/maps), covers API keys and cost, and gives practical tips for performance with many markers.

Key takeaways

• react-native-maps is the most widely used option: Apple Maps or Google Maps on iOS, Google Maps on Android, with markers, polygons and custom styles.
• expo-maps is Expo's newer module that wraps Apple Maps (via SwiftUI) on iOS and Google Maps (via Jetpack Compose) on Android; check its current maturity for your feature list.
• Mapbox (@rnmapbox/maps) offers deep custom styling, offline maps and vector tiles, with its own pricing.
• Google Maps needs an API key (and billing) on Android, and on iOS if you choose Google as the provider.
• Many markers need clustering and lightweight marker views, or the map stutters.

The options compared

Choosing

• Standard maps with pins and routes: react-native-maps. It's the safe default with the largest community.
• Native-feeling maps in an Expo app, with simple needs: consider expo-maps, after checking it supports the features you need today.
• Heavily branded maps, offline areas or vector-tile data: Mapbox.
• Data visualisations on a map (heat maps, many shapes): Mapbox or a careful react-native-maps setup with polygons and clustering.

react-native-maps vs expo-maps

expo-maps is Expo's newer library, built on the native SwiftUI and Jetpack Compose map components: Apple Maps on iOS and Google Maps on Android. As of October 2026 Expo still labels it alpha, with frequent breaking changes; it needs a development build (it isn't in Expo Go), and Android still needs a Google Maps API key. Some interactions are limited to recent iOS versions, such as marker tap events on iOS 18 and later. For production apps today, react-native-maps is the safer choice; expo-maps is worth trying for simple maps if you can absorb changes.

Maps without a Google API key

On iOS, react-native-maps uses Apple Maps by default, which needs no key. On Android, both react-native-maps and expo-maps use Google Maps and need a key. To avoid Google entirely:

• MapLibre (@maplibre/maplibre-react-native) is an open-source map renderer that works with any vector tile source, including OpenStreetMap-based tiles from a tile provider. OpenStreetMap's own tile servers have a usage policy that rules out heavy app traffic, so use a commercial or self-hosted tile service.
• Mapbox uses its own access token and pricing instead of Google's.

API keys and cost

Google Maps on Android requires a Google Maps Platform API key with billing enabled, restricted to your app's package name and signing certificate fingerprint. Mapbox requires an access token. Both providers offer free usage tiers and charge beyond them, and pricing models change, so:

• Restrict keys to your app identifiers so they can't be abused if extracted.
• Watch usage dashboards after launch, especially for features that load maps on every screen.
• Cache what you can and avoid reloading maps unnecessarily.

Is react-native-maps free? The library is open source; what can cost money is the map provider. Check current Google Maps Platform pricing, where native map loads and the Places, Routes and Geocoding APIs are priced differently.

When the map is blank or not showing

1. The map has no size. A MapView with no height or flex: 1 renders nothing; give it an explicit size first.
2. Android key problems: the key is missing from the app config, the Maps SDK for Android isn't enabled in Google Cloud, billing isn't set up, or the key is restricted to the wrong signing certificate. With Play App Signing, add the SHA-1 of Google's app signing key from Play Console as well as your upload and debug keys.
3. Expo Go: expo-maps and custom map configurations need a development build.
4. Google Maps on iOS: using Google as the iOS provider needs the Google Maps SDK for iOS and its own key; Apple Maps doesn't.

Web, light mode and Leaflet

react-native-maps doesn't support the web. For a web build, render a web map library (such as MapLibre GL JS or the Google Maps JavaScript API) through a platform-specific file. Leaflet is a web library too; in a native app it only runs inside a WebView, which is slower than a native map. To force light or dark map styling, react-native-maps offers a userInterfaceStyle prop for Apple Maps on iOS; on Android, apply a Google Maps style.

Routes, directions and search

Maps rarely stop at pins. Three common additions, and how to handle them:

• Directions in your app: call a directions API (Google, Mapbox or Apple's MapKit services) from your server, then draw the returned route as a polyline. These APIs are billed per request, so cache routes that many users request.
• Turn-by-turn navigation: usually better handed to the user's own maps app. Open Apple Maps, Google Maps or Waze with a link containing the destination, rather than rebuilding navigation.
• Place search and autocomplete: debounce requests as the user types, start searching after a few characters, and proxy requests through your server so you can cache results and keep billing under control.

Each of these has its own pricing, separate from the map itself, so estimate monthly usage before launch.

Showing the user's location

Use expo-location to request foreground permission and get the position, then centre the map or show the user's dot (showsUserLocation in react-native-maps). Ask for permission when the user opens the map feature, with a short explanation, and handle denial with a manual location search.

From the field: Maps and geolocation are a regular part of my mobile work, including LYOS, a travel app for a UK client that organises a private storyline of trips into location-based chapters from background location, built on React Native, Node.js and PostgreSQL with PostGIS. Pairing a map library with PostGIS on the server keeps location queries (nearby, within an area, along a route) fast and simple.

Performance with many markers

• Cluster markers when zoomed out, with a clustering library or the provider's built-in clustering.
• Keep marker views lightweight: images over complex custom views, and avoid re-rendering markers on every region change.
• Track view changes carefully: on react-native-maps, set tracksViewChanges={false} on custom markers once they've rendered.
• Load data for the visible region, not the whole world, and debounce region-change requests.
• Use polygons and polylines sparingly at high detail; simplify shapes server-side.

Accessibility on maps

Maps are visual by nature, which makes them easy to get wrong for screen-reader users. Always offer a list view of the same results (nearby studios, properties, stops) alongside the map, give markers meaningful accessibility labels, and make sure every action available on the map, such as booking or opening details, can also be done from the list. A list view also helps sighted users comparing many options at once.

Server-side geodata

Map features are only as good as the queries behind them. For "nearby studios", "properties in this area" or "places on this trip", store locations in a geospatial database such as PostgreSQL with PostGIS, use spatial indexes, and return only what the current map view needs.

FAQ

What's the best map library for React Native?

react-native-maps is the most widely used and the safe default for standard maps with markers and routes. Mapbox is better for deep custom styling and offline maps. Expo's expo-maps is a newer option that wraps the native Apple and Google map components.

Do I need a Google Maps API key for React Native?

Yes for Google Maps on Android, and on iOS if you use the Google provider instead of Apple Maps. Enable billing in Google Cloud, and restrict the key to your app's package name and certificate fingerprint to prevent misuse.

How do I show many markers without lag?

Cluster markers when zoomed out, use lightweight marker images instead of complex views, stop tracking view changes on rendered custom markers, and load only the markers for the visible region from your server.

Can React Native maps work offline?

Mapbox supports downloading offline map regions. react-native-maps and the native Apple and Google maps have limited offline support. If offline maps are essential, for example in field or travel apps, choose Mapbox.

Next steps

If your app needs maps, location search or geospatial features that perform with real data, I can choose the right library and build the server-side queries to match. Get in touch, or see how I work as a React Native developer.

Sources

• Maps (expo-maps), Expo documentation
• MapLibre React Native, GitHub
• Tile usage policy, OpenStreetMap Foundation
• react-native-maps, GitHub
• Maps (expo-maps), Expo
• Mapbox Maps SDK for React Native, GitHub
• Google Maps Platform pricing, Google
• PostGIS, PostGIS