Notes on getting react-native running with react-native-mapbox-gl

[sethvincent]

Storing these notes here to refer back to, and I'll add android instructions later.

The important things I learned:

• latest react-native isn't supported by latest react-native-mapbox-gl, so we have to use an older version of react-native for now
• don't use cocoapods, because somehow it crunches the xcode project and the react-native cli tool's expectations of how things are set up
• make sure to close the simulator, clean the build, and delete & reinstall node_modules when things aren't working

Installing react-native and react-native-mapbox-gl

Initial set up

Install react-native-cli

npm i -g react-native-cli

Create the project using a specific version of react-native

react-native init Surveyor --version react-native@0.39.2

Change directory into the project

cd Surveyor

Install react-native-mapbox-gl

npm i --save react-native-mapbox-gl

Android

Follow the react-native getting started guide for android:

http://facebook.github.io/react-native/docs/getting-started.html

Follow the react-native-mapbox-gl instructions for android:

Note: don't use react-native link.

https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/install.md

When you add the getPackages method, make sure to add it to MainApplication.java, not MainActivity.java.

Run the project in a simulator

Create and run a virtual device in android studio: https://developer.android.com/studio/run/managing-avds.html

react-native run-android

iOS

Follow the manual install instructions for iOS

https://github.com/mapbox/react-native-mapbox-gl/blob/master/ios/install.md

Run the project in a simulator

react-native run-ios

Android

Follow the react-native getting started guide for android:

http://facebook.github.io/react-native/docs/getting-started.html