A navigation UI ready to drop into your React Native application.
Before installing the SDK, you will need to gather the appropriate credentials. The SDK requires two pieces of sensitive information from your Mapbox account. If you don’t have a Mapbox account: sign up and navigate to your Account page. You’ll need:
Downloads:Read
scope is checked.npm install @homee/react-native-mapbox-navigation
Read the iOS specific instructions below before running pod install
.
Make sure your react native project has an Objective-C bridging header for swift. If you don’t have a bridging header you can follow these steps here below in the dropdown.
Create an Objective-C bridging header
Place your secret token in a .netrc
file in your home directory that contains this:
machine api.mapbox.com
login mapbox
password <INSERT SECRET TOKEN>
Place your public token in your project’s Info.plist
and and add a MGLMapboxAccessToken
key whose value is your public access token.
Now you are ready to install the cocoapod:
cd ios && pod install
If you are experiencing a “multiple commands produce” build error in your Xcode project then you will need to add this entry below to the top of your ios podfile:
install! 'cocoapods', :disable_input_output_paths => true
For more information you can read the docs provided by Mapbox.
Place your secret token in your android app’s top level gradle.properties
file:
MAPBOX_DOWNLOADS_TOKEN=SECRET_TOKEN_HERE
Open up your project-level build.gradle
file. Declare the Mapbox Downloads API’s releases/maven
endpoint in the repositories
block.
allprojects {
repositories {
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'] ?: ""
}
}
}
}
Gradle
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_ACCESS_TOKEN"
android:value="PUBLIC_TOKEN_HERE" />
XML
For more information you can read the docs provided by Mapbox.
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import MapboxNavigation from '@homee/react-native-mapbox-navigation';
export const SomeComponent = () => {
return (
<View style={styles.container}>
<MapboxNavigation
origin={[-97.760288, 30.273566]}
destination={[-97.918842, 30.494466]}
shouldSimulateRoute={true}
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,
},
});
React JSX
MapboxNavigation
PropsArray that contains the longitude and latitude for the starting point.
[$longitude, $latitude]
Array that contains the longitude and latitude for the destination point.
[$longitude, $latitude]
Boolean that controls route simulation. Set this as true
to auto navigate which is useful for testing or demo purposes. Defaults to false
.
Function that is called frequently during route navigation. It receives latitude
and longitude
as parameters that represent the current location during navigation.
Function that is called frequently during route navigation. It receives distanceTraveled
, durationRemaining
, fractionTraveled
, and distanceRemaining
as parameters.
Function that is called whenever an error occurs. It receives a message
parameter that describes the error that occurred.
Function that is called whenever a user cancels navigation.
Function that is called when you arrive at the provided destination.
Author: rossmartin
Source Code: https://github.com/homeeondemand/react-native-mapbox-navigation
#react-native