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

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

Answer 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