React Native MapView Tutorial - IOS

The current version of React Native 0.29.2 has a few issues with the usage of react-native-maps, however we will code through this together in IOS!

In this guide we will be using react-native-maps which can be found here =>

run `npm install react-native-maps — save`

run `rnpm link` to link the modules you just installed.

If rnpm link doesn’t work, run `npm install rnpm -g`

run `rnpm link` once that finishes installing.

Now before you add in <MapView/> We need to make a few tweaks to get this all working. Navigate to the AIRMap.h file and change what you have on line 12 to #import “RCTComponent.h”

Navigate to AIRMapCallout.h and change what you have on line 7 to To #import “RCTView.h”.

Run `react-native run-ios` and it will say “Build Succeeded”

Add import MapView from ‘react-native-maps’ to the top:

Let’s also add in a simple MapView location to your render function:

Refresh your app and you should get a blank screen. What!?

You need to add in some style to get it to show, weird right?

Also don’t forget to add in style={} to your MapView Component. Refresh and you should now see beautiful Downtown Denver!

Let’s now try adding in a marker!

Simply add in some coordinates in side MapView.Marker and you are good to go!

Thanks for reading!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.