Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save icemancast/9e76a1cbf664074bbc7b3bb59d3f5215 to your computer and use it in GitHub Desktop.
Save icemancast/9e76a1cbf664074bbc7b3bb59d3f5215 to your computer and use it in GitHub Desktop.

Howto install react-native-maps

This document is to help all the react native developers out there actually get the AirBnb Google Maps up and running with the latest react (at time of this writing 0.55).

Please also use this as a "non-cocoapod" option to installing the Google Maps framework.

  1. Install the latest package from the repo
yarn react-native-maps
  1. Download the Google Maps framework from Google:

https://developers.google.com/maps/documentation/ios-sdk/start

  • Scroll to Step 2
  • Select INSTALL MANUALLY
  • Follow instructions to download
  1. Installing Google Maps for iOS We suggest grabbing all the *.framework (leave the premium MB4 one out if you do not have a Google preimum account).
  • Drag the *.framework into your React Native Xcode project We created a top-level folder for Xcode project called Frameworks for 3rd party vendors
$(SRCROOT)/Frameworks/Google-Maps-iOS-Utils

Make sure your GoogleMapsBase.framework, GoogleMapsCore.framdwork, and GoogleMaps.framework are all listed in the Compiled Sources. ** You might need to drag them into Embedded Frameworks depending your Xcode project setup too.

  • Search Xcode Build Settings for "Header Paths" and add your new framwork folder from above:
$(SRCROOT)/Frameworks/Google-Maps-iOS-Utils
  1. Install AirMaps React Native Wrapper
  • Open
$(GITROOT)/node_modules/react-native-maps/lib/ios
  • Drag both folders into your Xcode project and ignore the Airmaps.xcproject
$(GITROOT)/node_modules/react-native-maps/lib/ios/AirGoogleMaps
$(GITROOT)/node_modules/react-native-maps/lib/ios/AirMaps
  1. Now link
react-native link

We run this command to link the Android side (which works fine as-is) and make sure once we can still successfully link npm updates.

Enjoy!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment