react-native-maps with expo

Question

So im trying to make native-maps work within an expo app and the documentation page says that "No setup required for use within the Expo app"

https://docs.expo.io/versions/latest/sdk/map-view/?redirected

But after installing the library with expo its not working.

I have 2 basic questions about why its not working:

1. Where do you put the API key from Google console?
2. How do you enable the Google Maps to work with the expo app on the console, enable the android sdk?

Answer 1

Usage

You can just import the MapView from expo as react-native-maps is included in expo. (There aren't any integration or linking steps if you use expo and haven't ejected your app. I guess the documentation is not very clear about this...)

Just import from expo like this:

import { MapView } from 'expo'

and than use it as usual and described in the documentation of react-native-maps:

<MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />

Integration of the Api key

The api keys from the google play console belongs into the android and ios section of your app.json if you use expo.

add this to your app.json > android.config:

"googleMaps": { "apiKey": "<android maps api key>" }

and this to your app.json > ios.config:

"googleMapsApiKey": "<ios maps api key>"

Your app.json should contain something like this in the end (and all of the other stuff which is usually in there):

{
    "expo": {
        "android": {
            "package": "com.company",
            "config": {
                "googleMaps": {
                    "apiKey": "<android maps key>"
                }
            }
        },
        "ios": {
            "bundleIdentifier": "com.company",
            "config": {
                "googleMapsApiKey": "<ios maps api key>"
            }
        }
    }
}

Answer 2

Summer 2020 Update:

The expo package no longer supports its own built-in MapView component. So, rather than importing MapView from expo (as @Leo mentioned) like so:

import { MapView } from 'expo';

You should directly install the react-native-maps module to import the MapView component from there, like so:

import MapView from 'react-native-maps';

You can download react-native-maps either by using the expo-cli command mentioned in the error message shown here or a package manager of your choice, like npm or yarn.