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

Install & import

For current expo versions

Just add react-native-maps through expo: npx expo install react-native-maps as described here in the documentation Afterwards you can use react-native-maps as you would without expo.

Note that you don't have to add anything if you are using expo go since it is already bundled in expo go.

Just import the MapView like this:

import { MapView } from 'react-native-maps'

For Legacy expo versions

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'

Simple MapView use

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>"
            }
        }
    }
}

More information on the API Key integration can be found in the expo documentation