Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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

});
@raktec

This comment has been minimized.

Copy link

@raktec raktec commented Apr 17, 2018

i have fallow same above process but still have problem . can you send me sample code for android ?
email : raktec@gmail.com

@erick2014

This comment has been minimized.

Copy link

@erick2014 erick2014 commented Apr 17, 2018

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

@vstoyanov

This comment has been minimized.

Copy link

@vstoyanov vstoyanov commented May 14, 2018

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.

@alanpramuk9

This comment has been minimized.

Copy link

@alanpramuk9 alanpramuk9 commented May 23, 2018

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

@Bilal112

This comment has been minimized.

@vivimargaretha

This comment has been minimized.

Copy link

@vivimargaretha vivimargaretha commented Aug 24, 2018

Thank you so much, you save my life @nazrdogan

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Sep 21, 2018

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.

@romantictrust

This comment has been minimized.

Copy link

@romantictrust romantictrust commented Mar 22, 2019

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

@usman22-afaq

This comment has been minimized.

Copy link

@usman22-afaq usman22-afaq commented Jan 21, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment