react-native-maps done right for Android🕵️
Tags: reactnative, android, googlemaps, reactnativemaps
Published: 2018-06-30 08:31:38

---
title: react-native-maps done right for Android🕵️
published: true
description: a try on intuitive approach on how to add react-native-maps into your react-native application
tags: #react-native #android #google-maps #react-native-maps
---

So this article will run you through the pitfalls which i faced while actually trying to mend react-native-maps into my rn app

#### So, I'm considering that you have configured the following in checklist 

✔️ Node JS
✔️ npm/yarn
✔️ react-native-cli

PS: This is for android, as I neither own a Mac nor an iPhone 😉
So let's create a boilerplate setup of the application.

`react-native init mapapp`
`cd mapapp`

It'll take sometime to install the dependencies, script files and bootstrapped source codes for **android** and **ios** in two seperate folders.

The project tree looks something like this 🌲. Oops not that one 😂👇

![Project Tree](https://i.imgur.com/QEm5tcS.png)

So go ahead and try running the command

`react-native run-android`

Make sure that you have an **avd** or an **android device** connected to your machine with developer options enabled .

Once executed successfully you'll basically look at a screen like the one below.

![First Screenshot](https://i.imgur.com/jjX9ee7.png)

Now let's install the react-native-maps package.

>If Yarn
`yarn add react-native-maps`

>For npm
`npm install --save react-native-maps`

Once installed you can see **react-native-maps** package added to the dependencies section in **package.json**

For the basic rn packages all you need to do is *react-native link react-native-package*. This'll auto configure the android and ios source files for you like the gradle build files imports etc. But not in this case.

If you go to react-native-map [installation page](https://github.com/react-community/react-native-maps/blob/master/docs/installation.md) there's a big notification like **!!DO NOT USE!! react-native link**
So i'll follow their steps for configuring is what I thought!

>But things don't go always the way as you think it would. 🙃

As for android suggested in installation page we need to add dependencies in `android\app\build.gradle`. 

![build.gradle file](https://i.imgur.com/r3AyPp1.png)

Then in your **settings.gradle** file configure the code as in the below image. to import the android package of react-native-maps into the project.

![Settings gradle](https://i.imgur.com/eNgf9gH.png)

Now into your `android/app/src/main/AndroidManifest.xml`  add the google maps meta-data  content.
Make sure the meta-data you are adding is under the scope of application tag.

```xml
`<application>
	<meta-data />
</application>` 
```
Sample abstraction looks like the one above ☝️ .
>While getting your **Google API Key**  make sure that you've enabled google maps api in your google cloud console.

![AndroidManifest.xml](https://i.imgur.com/uP12Hl4.png)

Now in your `android\app\src\main\java\com\mapapp\MainApplication.java` file include the package dependencies and an instance of maps package.

```java
//Import it below all imports in the file
import com.airbnb.android.react.maps.MapsPackage;

//Now Under ReactList package add an instance of MapsPackage
@Override
     protected List<ReactPackage> getPackages() {
         return Arrays.<ReactPackage>asList(
                 new MainReactPackage(),
                 //This is where you create instance of package
                 new MapsPackage()
         );
     }
```
Once done your **MainApplication.java** file will look like this.
![MainApplication.java](https://i.imgur.com/I426Szl.png)

Now after that let's try and run the command `react-native run-android`. Stop the existing packager for the updates to get reflected.

 Now once you run you'll be getting an error like this.

![Error1](https://i.imgur.com/2UoGBdD.png)

> Now how do we fix that! 🤔

First we need to update the `build.gradle` script to update it to latest version as implementation is not supported by the gradle version we are using.
~~implementation~~  &nbsp; `compile project(':react-native-maps')`

```java
dependencies {
	compile fileTree(dir: "libs", include: ["*.jar"])
	compile "com.android.support:appcompat-v7:25.3.1"
	compile "com.facebook.react:react-native:+"  // From node_modules
	compile project(':react-native-maps')
}
```

After running through a certain level of proper build steps... The build fails again. But this time it was a bit different. After googling for some time came across a comment in github which stated that need to follow the alter steps from [here](https://gist.github.com/nazrdogan/87c63e89a2bfd4cefee24990e4e7ed0e).

🐞 Issue Link is [here](https://gist.github.com/nazrdogan/87c63e89a2bfd4cefee24990e4e7ed0e).

Now according to the new guide by @nazrdogan. Open the **build.gradle** file from the android path. `android\build.gradle`.

![build.gradle in android](https://i.imgur.com/7Il7LVE.png)

Now in `build.gradle` file in **android/app** update a few parameters of sdk version.

```java
android {
// Change compileSdkVersion from 23 to 25
compileSdkVersion 25
// buildToolsVersion from 23.0.1 => 25.0.1
buildToolsVersion "25.0.1"

defaultConfig {
	applicationId "com.mapapp"
	minSdkVersion 16
	targetSdkVersion 22
	versionCode 1
	versionName "1.0"
	ndk {
		abiFilters "armeabi-v7a", "x86"
	}
}
```
![buildGradle](https://i.imgur.com/nbFT6OJ.png)

In your dependencies section of your `app/build.gradle` file  change ~~compile~~ to implementation and appcompat-v7 to 25.0.1 from 23.0.1

```java
dependencies {
	implementation fileTree(dir: "libs", include: ["*.jar"])
	//						Change it from 23.0.1 => 25.0.1
	implementation "com.android.support:appcompat-v7:25.0.1"
	implementation "com.facebook.react:react-native:+"  
	// From node_modules
	implementation project(':react-native-maps')
}
```

Now after this open **android\gradle\wrapper\gradle-wrapper.properties**. In it Change the Distribuition URL to `
https\://services.gradle.org/distributions/gradle-4.1-all.zip
`

After updating it'll look like this.
```
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip
```
😅 Now try and run the command `react-native run-android`. Now this will update gradle builds and updates the packages and it'll take some time to include the modules then initiates the metro bundler.

🙌 Finally, after the message **BUILD SUCCESSFUL**. You can see that **MainActivity** intent has been triggered👇.

![Build Succeeded](https://i.imgur.com/dhrWtqL.png)

But we still we need to look at the map right! 😁

Let's do that now. Open your **App.js** file and replace the existing content with below content 👇.

```jsx
import React, { Component } from  'react';
import { StyleSheet } from  'react-native';
import MapView from  'react-native-maps';

export default class App extends Component {
	render() {
		return <MapView style = {styles.map}
			initialRegion = {{
				latitude: 13.139238380834923,
				longitude: 80.25188422300266,
				latitudeDelta: 0.0922,
				longitudeDelta: 0.0421,
				}}/>;
	}
}

const styles = StyleSheet.create({
	map: {
		height: 100,
		flex: 1
		}
});
```

Once, you try and reload the app. You can see the something like this below.

>Double tap **R** to reload.

![MapView](https://i.imgur.com/wuwxS22.png)

😁👍. Cheers, You've successfully integrated react-native-maps into your react-native application. 🙌

>PS : That's where i live. 📍

If possible i'll also write a small article on how get an api key and enable google maps api in google cloud console. 

Hope you all enjoyed this.  Happy Coding 💻.