react-native-maps done right for Android🕵️

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