CODEWITHSUNDEEP
react-nativereact-native-maps
iqbal125
iqbal125

Reputation: 1431

react-native-maps with expo

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?

Upvotes: 9

Views: 21645

Answers (2)

Leo
Leo

Reputation: 1800

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

Upvotes: 33

Haejin Jo
Haejin Jo

Reputation: 101

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.

Upvotes: 8

Related Questions