Has anyone been able to use react-native-maps with Google maps?

Question

I currently have a react-native project that uses react-native-maps and Viro. Viro requires a rn version of rn 0.59.9 so I'm not using the latest version in this project.

It's currently set up to use the native apple maps when using an iPhone simulator which works fine and I also have Viro working as well. The next step is to start adding directions from the current user's location to different places around them and I planned on using Google Maps to do this.

Unfortunately I'm having a lot of issues trying to do this and having no luck working through the installation documentation.

My package.json currently looks like this:

{
  "name": "LoveWinchester",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "postinstall": "jetifier -r"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-native-gesture-handler": "~1.4.0",
    "react-native-maps": "0.26.1",
    "react-native-reanimated": "^1.4.0",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3",
    "react-viro": "2.17.0",
    "rn-bottom-drawer": "^1.4.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/runtime": "^7.7.2",
    "babel-jest": "^24.9.0",
    "jest": "^24.9.0",
    "jetifier": "^1.6.4",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

And my Podfile looks like below:

target 'LoveWinchester' do
platform :ios, '9.3'
  pod 'ViroReact', :path => '../node_modules/react-viro/ios/'
  pod 'ViroKit_static_lib', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/static_lib'
  pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'

  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

  pod 'RNScreens', :path => '../node_modules/react-native-screens'

  pod 'react-native-maps', :path => '../node_modules/react-native-maps'

end

Any help would be really appreciated!!

score 1 · Answer 1 · answered Jan 18 '20 at 05:37

1

Added the pod GoogleMaps

pod 'GoogleMaps'

after that goto iOS folder & install it

cd ios
pod install

Now, you will probably get an error react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS.

In order to solve this, go to iOS folder & open your .xcworkspace file because now you need to add AirGoogleMaps to the project.

Go into your node_modules in your project and navigate to the AirGoogleMaps folder.

/node_modules/react-native-maps/lib/ios/AirGoogeMaps

Drag the AirGoogleMaps folder into your project. After dropping that folder into your project there will be a pop-up window in which you will specify to Create groups. (Not create folder references)

Then go inside xcode > build settings > Preprocessor Macros > & add HAVE_GOOGLE_MAPS=1 Preprocessor Macro to Build Settings
In order to use Google Maps, you will need to create a Google Maps API key.

After that go to AppDelegate.m & add below lines to your code

#import <GoogleMaps/GoogleMaps.h>

[GMSServices provideAPIKey:@"YOUR_API_KEY"]

Finally, change your MapView component

import MapView, {PROVIDER_GOOGLE} from "react-native-maps";

<MapView provider={PROVIDER_GOOGLE} />

That's it. Hope this will helps you. Feel free for doubts.

For more informations check this

answered Jan 18 '20 at 05:37

SDushan

4,341
2
16
34

Thank you so much for such a comprehensive response!! I thought this would be it but unfortunately after following your instructions and running `react-native run-ios --simuator="iPhone 7 Plus"` I received an error: **Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65**. You can see a screenshot with more details here https://imgur.com/a/o71PCpl. I've got this same error a lot trying myself previously. – Madamot Jan 18 '20 at 10:20
1

@Madamot check this - https://stackoverflow.com/questions/55235825/error-failed-to-build-ios-project-we-ran-xcodebuild-command-but-it-exited-wit/55235914 – SDushan Jan 18 '20 at 11:08
Unfortunately after following the steps in the link the same error seems to occur - imgur.com/a/Hypw8bb. I get warnings on top of the error saying something about the IPHONEOS_DEPLOYMENT_TARGET for React and RNScreens being 7.0 but the supported versions being 8.0 to 13.2.99. I'm not sure if this causes the error or not? @SDushan – Madamot Jan 19 '20 at 17:06
@Madamot this problem is in your build system settings. check this - https://stackoverflow.com/questions/54704207/the-ios-simulator-deployment-targets-is-set-to-7-0-but-the-range-of-supported-d – SDushan Jan 21 '20 at 09:05
I find it dubious to drag and drop more files into an Xcode project. How is that tracked? What do you do when that library changes? You would have to drag and drop every time you reinstall npm packages – fullStackChris Sep 01 '22 at 08:12

Has anyone been able to use react-native-maps with Google maps?

1 Answers1