This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

This library is currently in alpha and will frequently experience breaking changes. It is not available in the Expo Go app – use development builds to try it out.

Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

Watch: Expo Maps Deep Dive

Add Google Maps and Apple Maps to your Expo app with the expo-maps library.

Configuration

Expo Maps provides access to the platform native map APIs on Android and iOS.

• Apple Maps (available on
  iOS
  only). No additional configuration is required to use it after installing this package.
• Google Maps (available on
  Android
  only). While Google provides a Google Maps SDK for iOS, Expo Maps supports it exclusively on Android. If you want to use Google Maps on iOS, you can look into using an alternative library or writing your own.

Google Cloud API setup

Before you can use Google Maps on Android, you need to register a Google Cloud API project, enable the Maps SDK for Android, and add the associated configuration to your Expo project.

Permissions

To display the user's location on the map, you need to declare and request location permission beforehand. You can configure this using its built-in config plugin if you use config plugins in your project (Continuous Native Generation (CNG)). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does not use CNG, then you'll need to manually configure the library.

Example app.json with config plugin

{
  "expo": {
    "plugins": [
      [
        "expo-maps",
        {
          "requestLocationPermission": true,
          "locationPermission": "Allow $(PRODUCT_NAME) to use your location"
        }
      ]
    ]
  }
}

Configurable properties

Usage

import { AppleMaps, GoogleMaps } from 'expo-maps';
import { Platform, Text } from 'react-native';

export default function App() {
  if (Platform.OS === 'ios') {
    return <AppleMaps.View style={{ flex: 1 }} />;
  } else if (Platform.OS === 'android') {
    return <GoogleMaps.View style={{ flex: 1 }} />;
  } else {
    return <Text>Maps are only available on Android and iOS</Text>;
  }
}

Custom marker icons

You can use the useImage hook from expo-image to load custom marker and annotation icons.

import { useImage } from 'expo-image';
import { GoogleMaps } from 'expo-maps';

export default function Map() {
  const icon = useImage('https://example.com/marker.svg', { maxWidth: 48, maxHeight: 48 });

  return (
    <GoogleMaps.View
      style={{ flex: 1 }}
      markers={[
        {
          coordinates: { latitude: 37.78825, longitude: -122.4324 },
          icon: icon ?? undefined,
          anchor: { x: 0.5, y: 0.5 },
        },
      ]}
    />
  );
}

import { useImage } from 'expo-image';
import { AppleMaps } from 'expo-maps';

export default function Map() {
  const icon = useImage('https://example.com/marker.svg');

  return (
    <AppleMaps.View
      style={{ flex: 1 }}
      annotations={[
        {
          coordinates: { latitude: 37.78825, longitude: -122.4324 },
          icon: icon ?? undefined,
        },
      ]}
    />
  );
}

API

import { AppleMaps, GoogleMaps } from 'expo-maps';

// AppleMaps.View and GoogleMaps.View are the React components

No API data file found, sorry!

Permissions

Android

To show the user's location on the map, the expo-maps library requires the following permissions:

• ACCESS_COARSE_LOCATION: for approximate device location
• ACCESS_FINE_LOCATION: for precise device location

iOS

The following usage description keys are used by this library: