gistfile1.markdown

Install npm module

npm install react-native-maps --save

Top-Level build.gradle

add google() and change classpath com.android.tools.build:gradle:3.0.1

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

buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        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()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

android/gradle/wrapper/gradle-wrapper.properties

Change distributionUrl

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

include react-native-maps

rootProject.name = 'MapsExample'
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

include ':app'

/android/app/build.gradle

Update compileSdkVersion and add multiDexEnabled true if you need

Dependencies must be use same version

android {
  compileSdkVersion 25
  buildToolsVersion "25.0.1"

 defaultConfig {
     applicationId "app_id"
     minSdkVersion 16
     multiDexEnabled true
     targetSdkVersion 22
     versionCode 1
     versionName "1.0"
     ndk {
         abiFilters "armeabi-v7a", "x86"
     }
}

dependencies {
compile (project(':react-native-camera')){
    exclude group: 'com.google.android.gms'
compile 'com.android.support:exifinterface:25.+'
compile ('com.google.android.gms:play-services-vision:12.0.1') {
    force = true
}}
compile project(':react-native-vector-icons')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:24.0.0"
compile "com.facebook.react:react-native:+"  // From node_modules
compile (project(':react-native-maps')){
  exclude group: 'com.google.android.gms'
}
 compile ("com.google.android.gms:play-services-base:12.0.1") {
    force = true;
}
compile ("com.google.android.gms:play-services-maps:12.0.1") {
    force = true;
}

}

/android/app/src/main/AndroidManifest.xml

Add com.google.android.geo.API_KEY key

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mapsexample">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
       <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="AIzaSyC1F5BFOEvWeBv67pvGWzjMCFItmi851yg"/>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

/android/app/src/main/java/com/mapsexample/MainApplication.java

Add import com.facebook.react.shell.MainReactPackage and new MapsPackage()

package com.mapsexample;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.airbnb.android.react.maps.MapsPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new MapsPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}j

App.js

Use like this.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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


export default class App extends Component {

  state = {
    region: {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    },
  };
  render() {
    return (
      <MapView
        style={styles.map}
        region={this.state.region}
      />
    );
  }
}

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  }

});

i have fallow same above process but still have problem . can you send me sample code for android ?
email : [email protected]

hey thx for the guide, it worked for me, well at least compiled, but I dont see anything in the map, btw you forgot to import this package:
import com.airbnb.android.react.maps.MapsPackage
in the main MainApplication.java

I have a question. Should not the build work out of the box? I or nazrdogan could maybe create a PR with the build fixed?
Is there a reason for using an old/incompatible version of gradle? My guess would be that people are just running it from within AS using some custom build environment and this is how it got stale.

Thank you, thank you. Worked perfectly for me. Great documentation!

![screenshot from 2018-06-27 12-40-58](https://user-images.githubusercontent.com/23139110/41959788-6c11d2a8-7a07-11e8-948b-547c44bcb

(https://user-images.githubusercontent.com/23139110/41959838-87f6460c-7a07-11e8-8dd7-f02696009f26.png)

Thank you so much, you save my life @nazrdogan

this solution worked for me for this react-native-maps/react-native-maps#2188. Only just by making changes in build.gradle which was mentioned in first step solved my probem.

Guys, still having this problems.

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

hey i am follow all these steps but i also get an error "Invariant Violation: requireNativeComponent: "AIRMap" was not found in the UIManager."
react-native": "0.63.4",
"react-native-maps": "0.27.1"
run on android davice