Can't integrate react-native-maps for react-native app

Question

I'm new to react-native and when I tried to integrate the react-native-maps with my react native app it's giving the following error.

FAILURE: Build failed with an exception.

* Where:
Settings file 'D:\React-Projects\Native\ReactNativeMaps\android\settings.gradle' line: 3

* What went wrong:
Could not compile settings file 'D:\React-Projects\Native\ReactNativeMaps\android\settings.gradle'.
> startup failed:
  settings file 'D:\React-Projects\Native\ReactNativeMaps\android\settings.gradle': 3: unexpected char: '\' @ line 3, column 111.
       node_modules\react-native-maps\lib\andro
                               ^

1 error

This is my build.gradle dependencies array.

dependencies {
    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:12.0.0'
    implementation 'com.google.android.gms:play-services-maps:12.0.0'
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

And this is my settings.gradle file content.

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

include ':app'

In case someone need to see the full error,

$ react-native run-android
Starting JS server...
Building and installing the app on the device (cd android && gradlew.bat installDebug)...

FAILURE: Build failed with an exception.

* Where:
Settings file 'D:\React-Projects\Native\ReactNativeMaps\android\settings.gradle' line: 3

* What went wrong:
Could not compile settings file 'D:\React-Projects\Native\ReactNativeMaps\android\settings.gradle'.
> startup failed:
  settings file 'D:\React-Projects\Native\ReactNativeMaps\android\settings.gradle': 3: unexpected char: '\' @ line 3, column 111.
     node_modules\react-native-maps\lib\andro
                                   ^

  1 error


* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1s
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

Command failed: gradlew.bat installDebug

Error: Command failed: gradlew.bat installDebug
    at checkExecSyncError (child_process.js:616:11)
    at Object.execFileSync (child_process.js:634:13)
    at runOnAllDevices (D:\React-Projects\Native\ReactNativeMaps\node_modules\react-native\local-cli\runAndroid\runAndroid.js:299:19)
    at buildAndRun (D:\React-Projects\Native\ReactNativeMaps\node_modules\react-native\local-cli\runAndroid\runAndroid.js:135:12)
    at isPackagerRunning.then.result (D:\React-Projects\Native\ReactNativeMaps\node_modules\react-native\local-cli\runAndroid\runAndroid.js:65:12)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I've installed the react-native-map also via following commands and link it also.

npm install --save react-native-maps
react-native link react-native-maps

And this is the package.json file.

{
  "name": "ReactNativeMaps",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.4",
    "react-native-maps": "^0.23.0"
  },
  "devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

What went wrong? Did I miss something?

Answer 1

I found the problem. The reason that the build is the API_KEY. I replace the api-key with new api key and its working now. As well as change the line

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

also

Answer 2

In your package.json change the react-native-maps as follows:

"react-native-maps": "https://github.com/react-community/react-native-maps.git"

In settings.gradle make sure your line 3 is:

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

Check if this works.