DEV Community

react-native-maps done right for Android🕵️

Afroze Kabeer Khan. M on June 30, 2018

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 co...
Collapse
 
mrcflorian profile image
mrcflorian

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!

Collapse
 
droidmakk profile image
Afroze Kabeer Khan. M

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

Collapse
 
wibav profile image
Desh Bourne

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.
Collapse
 
droidmakk profile image
Afroze Kabeer Khan. M

Can you share the gradle file

Collapse
 
wibav profile image
Desh Bourne

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

Thread Thread
 
wibav profile image
Desh Bourne

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

Collapse
 
khuongdv profile image
Đào Khương

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.

Collapse
 
droidmakk profile image
Afroze Kabeer Khan. M • 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?

Collapse
 
prashanth1261 profile image
prashanth1261

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.

Collapse
 
droidmakk profile image
Afroze Kabeer Khan. M

Make Sure that you've enabled the api in firebase

Collapse
 
muhammadrafeh profile image
Muhammad Rafeh Atique

How can i implement this search functionality from app below? plz help?

play.google.com/store/apps/details...