For one of projects that I’m working on these days had to use a map view to cover of up the requirements. I found out that react-native-maps is good plugin recommended everywhere which is initially started by airbnb.
With the various issues and changing requirements I had to go from tile based map to a google map. It’s really nice that this plugin could handle both types.
React-native at the moment does not support leaflet based mapping since lefalet directly manipulates dom which is not supported by react-native from the basics. react-leaflet does not supported to react-native.
Installing react-native-maps with google was quite troublesome where took a half day of me to figure it out properly.
Here are stuff I did from the start to setup google maps, because installation guide didn’t work for out of the box
- react-native init {projectname} in command line (“0.42.0”)
- cd {projectname}
- npm install react-native-maps –save which will install react-native maps ( “^0.13.0”)
- Do not run any linking commands
- next step would be to react pod file with pod init
- copy the linked content to pod file, change the {projectname} as mentioned, run pod install
- yoga error then add the below line to pod filepod “Yoga”, :path => “#{react_native_path}/ReactCommon/yoga”
- Close xcode, and open {projectname}.xcworkspace file in xcode
- drag AirMaps and AirGoogleMaps to root of your project, and select create groups radio, don’t check copy items if needed
- Create a google api key with iOS bundle id added to the key , this sync up take few minutes (wrong key will show you a google singed empty map) once you run
- #import <GoogleMaps/GoogleMaps.h> and [GMSServices provideAPIKey:@”{your_key}”]; lines to AppDelegate.m file top then inside didFinishLaunchingWithOptions respectively
- Add below map view code, with out absolute positioning it will be white blank screen, with out key if you use google it will be goole logo with empty screen
Enjoy… react-native-maps google.
journeyman 