example

React Native Mapbox GL Demo

Demo Application for React Native Mapbox GL using the maplibre implementation.

Note: this app is using non-trivial babel/metro configs, so we can consume the maps library from parent directory directly. Regular apps don't need this complicated setup.

What is Mapbox?

Mapbox is the location data platform for mobile and web applications.

Sign up for Mapbox

Not a Mapbox user yet? Sign up for an account here. Once you’re signed in, all you need to start building is a Mapbox access token. Use this same short code with all of our interactive mapping libraries, Python and JavaScript SDKs, and directly against our REST APIs. You can create and manage your access tokens on your Mapbox Account page.

Installation

• Make sure you are in the example directory

cd example

• Create a file called accesstoken in the root of the example project and just paste in your Mapbox access token. (The accesstoken file is processed in postinstall, so you need to run yarn install after adding/changing accesstoken.)

• Install our dependencies using yarn install.

Start React Native Packager (or not, it starts automatically 🤷‍♀️)

Open up another tab in your Terminal and run

yarn start

Note: if modules were added to base lib you might need to run yarn start --reset-cache because we're using babel to rewrite imports

Run Android Emulator

• Start Android emulator
• Run yarn android from example directory

Common Issues

If the build fails make sure gradle has permission to build from cli

cd android
chmod +x gradlew

Run iOS Simulator

You can run this with the react-native cli or Xcode

• Run yarn ios from example directory

Common Issues

If you are using nvm, make sure you copy ios/.xcode.env as ios/.xcode.env.local and modify as described inside the file.

If you run into

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/RNMapboxGLExample.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Just run the example from Xcode, it seems to be an issue with RN.