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-mapsFor 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)
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!
Thx a lot for pointing it out. Will update the article 👍😃
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.
Can you share the gradle file
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'
}
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'
}
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
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.
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?
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.
Make Sure that you've enabled the api in firebase
How can i implement this search functionality from app below? plz help?
play.google.com/store/apps/details...