Installing React Native with Mapbox Navigation in iOS

Alameda Dev.
Mar 5, 2021 · 8 min read

For many years we researched a way to have the Google Direction ability in React Native. Right now this package exists thanks to https://www.homee.com/ team.

You can find the package at https://github.com/homeeondemand/react-native-mapbox-navigation

Unfortunately I had a lot of trouble installing this package, encountered many errors, and wanted to give a step by step tutorial integration.

Create a react-native app

Check everything is running

Unfortunately Flipper was producing many errors for me on iOS, like:

Open your ‘Podfile’ file and replace:

to

Remove ‘Podfile.lock’ and then run

Our app is running now

Install react-native-mapbox-navigation

Lets add the package react-native-mapbox-navigation to our project.

Have you secret and public Mapbox Token at hand. You can generate those here:

  • Your Public access token: From your account’s tokens page , you can either copy your default_public_token or click the Create a token button to create a new public token.
  • A secret access token with the Downloads:Read scope.
    1. From your account’s tokens page, click the Create a token button.
    2. From the token creation page, give your token a name and make sure the box next to the Downloads:Read scope is checked.
    3. Click the Create token button at the bottom of the page to create your token.
    4. The token you’ve created is a secret_token, which means you will only have one opportunity to copy it somewhere secure.

Now, following their documentation and BEFORE you do , let’s do some previous and necessary steps first.

  1. Create a ‘.netrc’ file on your computer home folder (not you project folder)

    And open the file with your editor

    Add the following to the file

2. Open your ‘.MapboxNavigation.xcworkspace’ project in Xcode
Now as we are using Mapbox Native SDK under the hood we need to have a Objective-C bridging header for swift, otherwise the package won’t work.

To do this:

  • From Xcode, select your ‘AppDelegate.m’ file and right click on it.
  • Select New File…
  • Select Swift File.
  • Name your file Dummy or whatever you want, I named it ‘MapboxDirection’.
  • In the Group dropdown, make sure to select the group folder for your app, not the project itself.
  • After you create the Swift file, you should be prompted to choose if you want to configure an Objective-C Bridging Header. Select “Create Bridging Header”.

Here is aGIF for these steps.

3. Place your public token in your project’s ‘Info.plist’ and and add a ‘MGLMapboxAccessToken’ key whose value is your public access token.

Now we can run pod install from the iOS folder

You will see all additional packages are installed.

Check everything is running

Let’s check if everything is running.

Ok, the integration guide tells something about this. We need to add some code to the top of the ‘Podfile’:

In the terminal execute:

Lets try to tun the app again:

Not sure what is happening so I opt for running the project in Xcode to see if there is any other clue of why it is failing.

On Xcode Product -> Build

Ok, let’s select a development team for this project, make sure you do it on all your targets.

Again, On Xcode Product -> Build

Ok, new error, I searched in the react-native-mapbox-navigation issues and found so many steps to do:

  1. Go to Project > Build Settings > Library search path
  2. Remove “$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)”

3. Set ‘Don’t Dead-strip Inits and Terms’ to ‘Yes’ for both Project and all Targets

4. Set ‘Always Embed Swift Standard Libraries’ to ‘Yes’ in the build settings Project and all Targets.

Next, On Xcode Product -> Build

Seems like this Build does success, so lets run the project in the simulator

It failed with this error:

For this we need to add ‘use_frameworks!’ to the ‘Podfile’. Unfortunately Flipper can’t be use with ‘use_framweorks` so I had to disable it

Exceute in the ios folder

Next, On Xcode Product -> Build

Another error, “Undefined symbols for architecture x86_64”

  • Select your pod project
  • In Targets Select MapboxNavigation
  • Select Build phase at the top
  • Select Link Binary With Libraries
  • Click the +
  • Search for “MapboxMobileEvents.framework”
  • Click Add
  • Clean
  • Rebuild

Next, On Xcode Product -> Build
This still got me the error, so I had to:

  • Clear Xcode Cache
  • Go into iOS folder
  • Clear CocoaPods Cache
  • Re-Install Pods

Next, On Xcode Product -> Build
The app finally ran

Integrate react-native-mapbox-navigation

Lets change our ‘App.js’ file to the base for react-native-mapbox-navigation

Run the app now.

The app stops and in Xcode we have this error:

We need to add audio in background mode for this to work
Add to your Info.plist

  • Required background modes
  • Item 0: audio

Run the app again.

And finally we have the app running!

Find the code for this tutorial at our GitLab account https://gitlab.com/alamedadev/mapboxnavigation

Do you want to test Mapbox Navigation?

Take a look for the main functionalities:

- Accurate turn-by-turn nav

Create a route, track the user’s progress to the destination and provide audio and visual guidance along the way.

- Traffic-aware routing

Traffic updates at a 5-minute granularity for 2.3 billion roads segments around the world.

- Offline routing

Keep the driver headed to their destination even when network connectivity is temporarily unavailable.

- Faster route detection

Check periodically for a faster route and generate alerts when one is available.

- Dynamic maps

Create on-brand map experiences with high performance rendering.

Hello We are Alameda Dev.!

We would love to help you, offer you a first conversation to talk about your ideas and help you focus on them.

Alameda Dev. Is a 100% remote team. Specialized in developing mobile applications, websites and advanced software in the React ecosystem.

You can read other interesting posts about technology: https://medium.com/alameda-dev

You can also enter the web: www.alamedadev.com

Follow us on:

Twitter: @AlamedaDev

Alameda Dev.

Specialized in Design and Development of Mobile Apps, Web with React Ecosystem

Alameda Dev.

We are a small agency 100% Remote. Specialized in Design and Development of Mobile Apps, Web and advanced software with React Ecosystem.

Alameda Dev.

Written by

¡Hola! We are a team 100% Remote. Specialized Development of Mobile Apps, Web and advanced software with React and ReactNative. www.alamedadev.com

Alameda Dev.

We are a small agency 100% Remote. Specialized in Design and Development of Mobile Apps, Web and advanced software with React Ecosystem.