How to Add Maps to a React Native App (2026)

The one library everyone uses

For maps in React Native, the answer is react-native-maps. It has been the default for years, it renders Apple Maps on iOS and Google Maps on Android out of the box, and Expo maintains a config plugin for it so you never hand-edit native project files. You give it a MapView and some Markerchildren — that’s the whole mental model.

The only real friction is that a map is a native module. That means Expo Go can show a basic map, but the full experience needs a development build. Budget for that one step and the rest is straightforward.

Step 1 — Install

Use the Expo installer so the versions match your SDK — this is the single most common cause of a blank map:

npx expo install react-native-maps expo-location

expo-locationis optional but you almost always want it — the “where am I” part of any map feature.

Step 2 — The Android API key

iOS uses Apple Maps and needs no key. Android needs a free Google Maps API key(create one in the Google Cloud console, enable “Maps SDK for Android”). Add it in app.json:

{
  "expo": {
    "plugins": [
      ["react-native-maps", {
        "androidGoogleMapsApiKey": "YOUR_KEY_HERE"
      }]
    ]
  }
}

Keep the key restricted to your app’s package name so a leaked key can’t be reused. The free tier covers far more map loads than an early-stage app will ever hit.

Step 3 — A map with markers

Here is a complete screen: a full-screen map centered on a region, with markers rendered from a data array. Swap the array for your database rows later.

import { StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

const PLACES = [
  { id: '1', title: 'Blue Bottle', lat: 37.7765, lng: -122.4172 },
  { id: '2', title: 'Ritual Coffee', lat: 37.7563, lng: -122.4211 },
];

export default function MapScreen() {
  return (
    <View style={styles.container}>
      <MapView
        style={StyleSheet.absoluteFill}
        initialRegion={{
          latitude: 37.7749,
          longitude: -122.4194,
          latitudeDelta: 0.06,
          longitudeDelta: 0.06,
        }}
        showsUserLocation
      >
        {PLACES.map((p) => (
          <Marker
            key={p.id}
            coordinate={{ latitude: p.lat, longitude: p.lng }}
            title={p.title}
          />
        ))}
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({ container: { flex: 1 } });

The latitudeDelta/longitudeDelta pair controls zoom — smaller numbers zoom in. showsUserLocation draws the blue dot for free once permission is granted.

Step 4 — Center on the user

To open the map on the user’s actual position, request permission and read the coordinates before setting the region:

import { useEffect, useState } from 'react';
import * as Location from 'expo-location';

function useUserRegion() {
  const [region, setRegion] = useState(null);
  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') return;
      const loc = await Location.getCurrentPositionAsync({});
      setRegion({
        latitude: loc.coords.latitude,
        longitude: loc.coords.longitude,
        latitudeDelta: 0.05,
        longitudeDelta: 0.05,
      });
    })();
  }, []);
  return region;
}

Pass region (with a fallback while it’s null) to the MapView. Always handle the denied-permission case — a map that silently breaks on refusal is a common App Store review flag.

Step 5 — Build and test on a device

Because the map is native, run a development build rather than relying on Expo Go for the final check:

npx expo run:android # or eas build --profile development

If the map shows up gray on Android, it’s almost always the API key — wrong key, wrong package restriction, or the Maps SDK not enabled in Google Cloud. That single issue accounts for most “react-native-maps blank screen” searches.

The shortcut: let the builder wire it

Every step above is mechanical, and mechanical is exactly what an AI builder should own. When you describe a store finder, a delivery tracker, or a “places near me” app in ShipNative, it recognizes the map intent, installs react-native-maps and expo-location, wires the permission flow, and shows the working map on your phone in the live preview — no key wrangling, no native-build detour to get to a working prototype.

You still add your production API key before shipping, but you spend your time on the actual product — the places, the data, the reason anyone opens the app — instead of on boilerplate. Curious how the generation handles native modules? Here’s how the AI app builder works.

Build a map-based app free

Describe your app in one sentence and see the map running on your phone in minutes at shipnative.dev. No credit card, and you export the full Expo project whenever you want.