Create a React Native App with Google Map using Expo.io
By: Mofizur Rahman
Tags: Android App Development, Expo, React Native, iOS App Development, Google Maps

Its often useful to represent information in a map as key-value pairs. For instance, the location of certain landmarks or areas of impact can be represented in a map to provide an intuitive way to structure data.

What You Need

Node.js

create-react-native-app command line tool

To get started quickly with set up you can follow this post.

Setup

The following setup is for Android phones. If you use iPhone simulator or load the app in an iPhone you could skip to the code part.

Local Setup

Once the application is created from the project folder open app.json

Your app.json looks something like this

looks something like this We are going to install expo command line tools

npm install -g expo

Go to expo.io and create and account.

From terminal

expo login

You will be prompted to enter your username/email address and password.

You should see a message like above.

We are going to update our app.json with the following

{

"expo": {

"name": "Your App Name",

"icon": "./path/to/your/app-icon.png",

"version": "1.0.0",

"slug": "your-app-slug",

"sdkVersion": "XX.0.0",

"ios": {

"bundleIdentifier": "com.yourcompany.yourappname"

},

"android": {

"package": "com.yourcompany.yourappname"

}

}

}

The iOS bundleIdentifier and Android package fields use reverse DNS notation, but don't have to be related to a domain. Replace "com.yourcompany.yourappname" with whatever makes sense for your app.

and Android fields use reverse DNS notation, but don't have to be related to a domain. Replace with whatever makes sense for your app. You’re probably not surprised that name , icon and version are required.

, and are required. slug is the url name that your app's JavaScript is published to. For example: expo.io/@community/native-component-list , where community is my username and native-component-list is the slug.

is the url name that your app's JavaScript is published to. For example: , where is my username and is the slug. The sdkVersion tells Expo what Expo runtime version to use, which corresponds to a React Native version. Although "XX.0.0" is listed in the example, you already have an sdkVersion in your app.json and should not change it except when you want to update to a new version of Expo.

With all the info my app.json is the following.

{

"expo": {

"name": "map-cuny",

"icon": "./assets/icon.png",

"version": "1.0.0",

"slug": "map-cuny",

"sdkVersion": "26.0.0",

"ios": {

"bundleIdentifier": "com.codingmechanic.mapcuny"

},

"android": {

"package": "com.codingmechanic.mapcuny"

}

}

}

Once the app.json is all set we can then build the android standalone app from terminal.

expo build:android

This will take a few minutes. Get some coffee in the mean time.

Once the Build is completed run expo fetch:android:keystore

This would generate the map-cuny.jks file and return the keystore password . We will need the key store password in a second.

. We will need the key store password in a second. Run keytool -list -v -keystore map-cuny.jks . For your app replace map-cuny.jks with your .jks file.

. For your app replace with your .jks file. If you enter the correct keystore password you should see something like this.

What we are interested in is the SHA1 key. We will use that in Google Cloud Platform in a minute.

Google Cloud Platform Setup

Log into Google Cloud Platform

Click on Create

Give your project a meaningful name

Once created you should be taken to your app dashboard.

Go to APIs and Services on the left side bar

Go to Library on the left side bar

Select Google Maps Android API

(If the UI changes over the time and Google Maps Api is not on the screen, You can always search for the Api in the search bar)

Enable Google Maps Android API

The Warning basically asks us to “Create Credentials” for our app to be able to use google maps api.

Click on Create Credentials.

Click on API Key

In the API restrictions tab select Google Maps Android API

Click on create. Copy the api key that was generated.

Go Back to app.json

"android": {

"package": "com.codingmechanic.mapcuny",

"config": {

"googleMaps": { "apiKey": "<Your API Key>" }

}

}

Add config to android

Setup is complete

Code

Base Code

We are now ready to start coding. Just to see we have the setup right, we will just put a Map View in the screen. Update your App.js with the following

import React from "react";

import { StyleSheet, Text, View } from "react-native";

import { MapView } from "expo"; export default class App extends React.Component {

render() {

return (

<MapView

style={{

flex: 1

}}

initialRegion={{

latitude: 37.78825,

longitude: -122.4324,

latitudeDelta: 0.0922,

longitudeDelta: 0.0421

}}

/>

);

}

}