React Native — Mapbox Navigation

After some research and playing around with maps, the question was whether should I use Google maps or Mapbox Maps. At first, it looks like a simple decision but it’s a bit more complicated when it comes to decisions that depend on client or business requirements. There are some pros and cons to both of them.

Let's get started:

ACCOUNT

First things first, you need to open a Mapbox account, because you need to get the credentials that Mapbox offers to be able to use this SDK.

These are two keys:

A 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.

Read and download downloads via API

1. Click the Create token button at the bottom of the page to create your token.
2. The token you’ve created is a secret token, which means you will only have one opportunity to copy it somewhere secure.

INSTALLATION

npm install @homee/react-native-mapbox-navigation

IOS

The following is required for every following setup
ios/Podfile:

pre_install do |installer|
    $RNMBNAV.pre_install(installer)
  end

post_install do |installer|
    $RNMBNAV.post_install(installer)
  end

and you go to the ios folder in the pod file:
cs ios
pod install

Add the UIBackgroundModes key to Info.plist with audio and location if it is not already present. This will allow your app to deliver audible instructions while it is in the background or the device is locked.

<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
  <string>location</string>
</array>

also, you can have some response from apple about using this one :)

Last place your secret token in a .netrc file in your OS home directory that contains this:

machine api.mapbox.com
login mapbox
password <INSERT SECRET TOKEN>

THAT'S IT ABOUT IOS.

ANDROID

Add your secret token your gradle.properties file:

MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN

Place your public token in your project’s android/app/src/main/AndroidManifest.xml

<!-- This should be a child of the application tag -->
<meta-data android:name="MAPBOX_DOWNLOADS_TOKEN"
    android:value="PUBLIC_TOKEN_HERE" />

after then you have to add a maven object with properties inside, as you can see it reads your MAPBOX_DOWNLOADS_TOKEN as a password

// android/build.gradle

allprojects {
    repositories {
        // ...other repos
        maven {
            url 'https://api.mapbox.com/downloads/v2/releases/maven'
            authentication {
                basic(BasicAuthentication)
            }
            credentials {
                // Do not change the username below.
                // This should always be `mapbox` (not your username).
                username = 'mapbox'
                // Use the secret token you stored in gradle.properties as the password
                password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
            }
        }
        // ...even more repos?
    }

REACT NATIVE

import * as React from "react";
import { StyleSheet, View } from "react-native";
import MapboxNavigation from "@homee/react-native-mapbox-navigation";

export const MapBoxComponent = () => {
  return (
    <View style={styles.container}>
      <MapboxNavigation
        origin={[-97.760288, 30.273566]}
        destination={[-97.918842, 30.494466]}
        shouldSimulateRoute
        showsEndOfRouteFeedback
        onLocationChange={(event) => {
          const { latitude, longitude } = event.nativeEvent;
        }}
        onRouteProgressChange={(event) => {
          const {
            distanceTraveled,
            durationRemaining,
            fractionTraveled,
            distanceRemaining,
          } = event.nativeEvent;
        }}
        onError={(event) => {
          const { message } = event.nativeEvent;
        }}
        onCancelNavigation={() => {
          // User tapped the "X" cancel button in the nav UI
          // or canceled via the OS system tray on android.
          // Do whatever you need to here.
        }}
        onArrive={() => {
          // Called when you arrive at the destination.
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

If you have any problems during implementation, let me know in the comments.

Pricing

Questions

1. What are the minimum OS requirements for the Navigation SDK?
   Navigation SDK v2.0
   On Android, it supports Android 5.0 Lollipop (API Level 21) and above, and on iOS, it supports iOS 11.0 and above.
   Navigation SDK v1.0
   On Android, it supports Android 4.4 KitKat (API Level 19) and above, and on iOS, it supports iOS 10.0 and above.
2. How long will it take my team to get started with the SDK?
   - The Mapbox SDK has been designed so a developer can download, install, and create a basic running application in about 1 to 2 hours. This would include the ability to display the map, request an address location, and begin a routing session to this location.
   - From this point, it is then up to the developer and their specific business goals to determine the amount of customization and specific features that are required in order to bring their application to market.
   - To get started, please refer to these pages for the iOS and Android SDK solutions.
3. Can I use SDK to navigate offline?
   Yes, the SDK can be used to navigate offline. An offline routing engine included allows users to navigate when there is little to no connectivity. The full information about offline navigation can be here for Android and iOS.
4. How often are roads updated on the map?
   The map is updated every 24 hours based on the data derived from the +300 million miles of driving data collected each day. Mapbox APIs stream data updates for maps, search and routing to the Navigation SDK. The automatic updates and live correction pipeline mark newly opened or closed roads or changes in routing conditions as they happen.