Afroze Kabeer Khan. M

Posted on Jun 30, 2018

react-native-maps done right for Android🕵️

#reactnative #android #googlemaps #reactnativemaps

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 😂👇

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.

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 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.

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.

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.



`<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.

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



//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.

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.

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~~ compile project(':react-native-maps')



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.

🐞 Issue Link is here.

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

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



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

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



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👇.

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 👇.



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.

😁👍. 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 💻.

Top comments (11)

mrcflorian • Mar 16 '19

Thanks for the article. I followed the tutorial and was finally able to build the maps in my app. Unfortunately, there are many things that have changed since the article was published, but I was able to find this React Native Maps article that helped me fix a couple of other issues, not mentioned here. Cheers!

Afroze Kabeer Khan. M • Mar 16 '19

Thx a lot for pointing it out. Will update the article 👍😃

Desh Bourne • Apr 9 '19

can help me please?

Android SDK Build Tools 26.0.2 will be used.
To suppress this warning, remove "buildToolsVersion '25.0.1'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

FAILURE: Build failed with an exception.

What went wrong: A problem occurred configuring project ':app'. > Could not get unknown property 'mergeResourcesProvider' for object of type com.android.build.gradle.internal.api.ApplicationVariantImpl.

Afroze Kabeer Khan. M • Apr 10 '19

Can you share the gradle file

Desh Bourne • Apr 10 '19

Android/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
supportLibVersion = "28.0.0"
}
repositories {
google()
jcenter()
}
dependencies {
//OLD
//classpath 'com.android.tools.build:gradle:3.3.1'
classpath 'com.android.tools.build:gradle:3.0.1'

    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}

}

allprojects {
repositories {
mavenLocal()
google()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "maven.google.com"
url "$rootDir/../node_modules/react-native/android"
}
}
}

ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 20
compileSdkVersion = 28
targetSdkVersion = 28
}

Android/gradle/gradle-wrapper.properties

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

Android/app/build.gradle

dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation "com.facebook.react:react-native:+" // From node_modules
implementation(project(':react-native-maps')) {
exclude group: 'com.google.android.gms', module: 'play-services-base'
exclude group: 'com.google.android.gms', module: 'play-services-maps'
}
implementation 'com.google.android.gms:play-services-base:16.1.0'
implementation 'com.google.android.gms:play-services-maps:16.1.0'
}

Desh Bourne • Apr 11 '19

i solved my problem using this npm install — save “react-native-maps@jerolimov/react-native-maps#fix-rn59rc-compile-issues”

from: github.com/react-native-community/...

the problem is with React native 0.59+ that compile with compileSdkVersion 28 and maps use 26

Đào Khương • Jul 31 '18

Thanks for the article, Afroze.

I followed and it did show a map on the emulator. But when I tried to set 'showsMyLocationButton' and 'showsUserLocation' to true, it did not work. Even the docs says those props are true by default.

Afroze Kabeer Khan. M • Jul 31 '18 • Edited

First of all, I'm happy that you tried and got the output. Will look into your issue! 🙌. Is that possible to share your code?

prashanth1261 • Nov 12 '18

Hello Afroze,
Thank you so much i have gone through the steps. I am getting the blank page of google maps with "Google" logo on it. Do you know what's the error?
Thank you in advance.