Code Monkey home page Code Monkey logo

react-native-mapbox-navigation's Introduction

React Native Mapbox Navigation

React Native Mapbox Navigation

Smart Mapbox turn-by-turn routing based on real-time traffic for React Native. A navigation UI ready to drop into your React Native application. Sample demo usage shown here for the HOMEE Pro iOS app in the screenshot ➡️

Features

  • A full-fledged turn-by-turn navigation UI for iPhone, iPad, and CarPlay that’s ready to drop into your application
  • Professionally designed map styles for daytime and nighttime driving
  • Worldwide driving, cycling, and walking directions powered by open data and user feedback
  • Traffic avoidance and proactive rerouting based on current conditions in over 55 countries
  • Natural-sounding turn instructions powered by Amazon Polly (no configuration needed)
  • Support for over two dozen languages

Installation Requirements

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:

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

Installation

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

Read the iOS specific instructions below before running pod install.


iOS Specific Instructions

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
  1. From Xcode, go to:
    File → New → File…
  2. Select Swift File
  3. Name your file Dummy or whatever you want
  4. 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”.

bridging header

This file is usually named YourProject-Bridging-Header.h. Don’t change this name manually, because Xcode configures the project with this exact filename.

There are a few build settings in Xcode that are necessary. Make sure to set Don't Dead-strip Inits and Terms to YES and Dead Code Stripping to YES for all projects/targets.

Build Settings Screenshot 1

build setting linking

You will also need to remove the entry "$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)" from Library Search Paths if it is present for your project target -

Build Settings Screenshot 2

build setting path

Place your public token in your Xcode project's Info.plist and add a MBXAccessToken key whose value is your public access token.

NOTE: MGLMapboxAccessToken is deprecated, now you should use MBXAccessToken instead

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>

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>

Add the following to your ios podfile -

  pre_install do |installer|
    $RNMBNAV.pre_install(installer)
    # any other pre install hooks here
  end

  post_install do |installer|
    $RNMBNAV.post_install(installer)
    # any other post install hooks here
  end
podfile example
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'
install! 'cocoapods', :disable_input_output_paths => true

target 'AwesomeProject' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  target 'AwesomeProjectTests' do
    inherit! :complete
    # Pods for testing
  end

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

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
    $RNMBNAV.post_install(installer)
  end
end

target 'AwesomeProject-tvOS' do
  # Pods for AwesomeProject-tvOS

  target 'AwesomeProject-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

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

If you are having an issue with your archive not showing up in organizer after archiving then you will need to open ios/Pods/Target Support Files/@react-native-mapbox-gl-mapbox-static/@react-native-mapbox-gl-mapbox-static-copy-dsyms.sh and comment out lines 85 thru 89 -

Lines 85 thru 89
#install_dsym "${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/MapboxMobileEvents.framework.dSYM"
#install_bcsymbolmap "${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/93C58D95-90B9-30C8-8F60-4BDE32FD7E8E.bcsymbolmap"
#install_bcsymbolmap "${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/BB87D8DD-493F-37AA-BD21-2BC609B8311B.bcsymbolmap"
#install_bcsymbolmap "${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/B184533A-B4A2-3D2F-AD72-A6C33D9914F4.bcsymbolmap"
#install_bcsymbolmap "${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/E2FE4B9E-73E5-34BF-B8B9-8FECEBE04D8D.bcsymbolmap"

For more information you can read the docs provided by Mapbox.


Android Specific Instructions

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'] ?: ""
            }
        }
    }
}

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" />

For more information you can read the docs provided by Mapbox.

Usage

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
        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,
  },
});

MapboxNavigation Props

origin (Required)

Array that contains the longitude and latitude for the starting point.
[$longitude, $latitude]

destination (Required)

Array that contains the longitude and latitude for the destination point.
[$longitude, $latitude]

shouldSimulateRoute

Boolean that controls route simulation. Set this as true to auto navigate which is useful for testing or demo purposes. Defaults to false.

showsEndOfRouteFeedback

Boolean that controls showing the end of route feedback UI when the route controller arrives at the final destination. Defaults to false. Currently this prop is only available for iOS as the Android Mapbox SDK does not support drop-in UI for this functionality. Will need to implement this manually in Android.

mute

Boolean that toggles voice instructions. Defaults to false.

hideStatusView

Boolean that controls showing the StatusView (iOS only). This is the transparent black bar with the "Simulating Navigation" text shown in the above screenshot. Defaults to false.

onLocationChange

Function that is called frequently during route navigation. It receives latitude and longitude as parameters that represent the current location during navigation.

onRouteProgressChange

Function that is called frequently during route navigation. It receives distanceTraveled, durationRemaining, fractionTraveled, and distanceRemaining as parameters.

onError

Function that is called whenever an error occurs. It receives a message parameter that describes the error that occurred.

onCancelNavigation

Function that is called whenever a user cancels navigation.

onArrive

Function that is called when you arrive at the provided destination.

Contributing

Contributions are very welcome. Please check out the contributing document.

License

The source code in this library is MIT licensed. The usage of this library will fall under Mapbox terms (this library downloads Mapbox SDKs and uses that closed source in conjunction with the open source code here).

react-native-mapbox-navigation's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-mapbox-navigation's Issues

Task :app:checkDebugDuplicateClasses FAILED

My requirements -

  1. Show trip location on a map (I am using mapbox here Package: @react-native-mapbox-gl/maps )
  2. After selecting the trip redirect user to the navigation screen to navigate them the route. ( Package : @homee/react-native-mapbox-navigation )

Problems:
After installing @homee/react-native-mapbox-navigation package I am getting error - Task :app:checkDebugDuplicateClasses FAILE

Task :app:processDebugMainManifest
[org.maplibre.gl:android-sdk:9.2.1] C:\Users\User.gradle\caches\transforms-2\files-2.1\cb126c41afa09cae71e62245cc1a9660\jetified-android-sdk-9.2.1\AndroidManifest.xml Warning:
Package name 'com.mapbox.mapboxsdk' used in: org.maplibre.gl:android-sdk:9.2.1, com.mapbox.mapboxsdk:mapbox-android-sdk:9.6.1.

> Task :homee_react-native-mapbox-navigation:compileDebugKotlin
w: F:\SUKKAS\codebaseNew\Sukkas_new\Sukkas\node_modules@homee\react-native-mapbox-navigation\android\src\main\java\com\homee\mapboxnavigation\MapboxNavigationView.kt: (196, 30): Unnecessary safe call on a non-null receiver of type MapboxNavigation
w: F:\SUKKAS\codebaseNew\Sukkas_new\Sukkas\node_modules@homee\react-native-mapbox-navigation\android\src\main\java\com\homee\mapboxnavigation\MapboxNavigationView.kt: (202, 30): Unnecessary safe call on a non-null receiver of type MapboxNavigation

image

I dont know what is going on here but as per my app requirements I have use both package.

Please help me. Please....

Expose RouteProgress Information in onProgressChange Event

Thank you for your library. We were wondering if you could expose some of values of the RouteProgress in the navigationViewController didUpdate method? We need at least the primitives: distanceTraveled, durationRemaining, fractionTraveled, and distanceRemaining. These are the iOS names for those values, and I'm unfamiliar with what they would be on the Android side.

These would be exposed as extra parameters to the onProgressChange callback, alongside latitude and longitude. Let me know if I can assist (at least with the iOS side).

Allow hiding of the Navigation Complete banner

Hello! Is it possible to add an option to hide the banner that shows up on route completion? We're looking to keep displaying the banner that's visible while the map is still navigating. In iOS there's a property to disable it that looks like showsReportFeedback = false

Screen Shot 2021-02-22 at 3 54 37 PM

[Android] Fail when mount and unmount the navigation

I receive a bunch of same error logs when mounting unmounting the navigator

Mapbox error You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
 ERROR  Mapbox error You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
 ERROR  Mapbox error You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
 ERROR  Mapbox error You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
 ERROR  Mapbox error You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
 ERROR  Mapbox error You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
 ERROR  Mapbox error You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
 ERROR  Mapbox error You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
 ERROR  Mapbox error You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}

Any reason?

Xcode - Archiving the project will not show in Organizer

If I build the project and running it on real device or simulator everything is fine. But when I do Product -> Archivei t will complete the archive with success but the archive is not in Organizer. If I remove the package from package.json and cd ios && pod update and try again to archive it eveything is fine. Any reason?

Loading style failed. Missing public access token?

I followed all instructions of the readme document.

It was neccesary to change the import of the example from:
import MapboxNavigation from 'react-native-mapbox-navigation';
To:
import MapboxNavigation from '@homee/react-native-mapbox-navigation';

After that, the app runs correctly without errors or warnings, but I only see an empty layout of the navigation:

Screenshot_20201209-092205_mahlemapboxnavigation

Errors after unmount component (Android only)

Hi!

I use react natigation to show the mapboxnavigation in a new screen, after press back button I have several errors in the console, I suppose the mapbox instance should be detroyed correctly before unmount the component.

[Sun Dec 13 2020 10:51:27.812]  ERROR    Mapbox error You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:27.850]  ERROR    Mapbox error You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:27.883]  ERROR    Mapbox error You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:27.907]  WARN     Mapbox warning Style is not fully loaded, not able to get source! {"level": "warning", "message": "Style is not fully loaded, not able to get source!", "tag": "mbgl-locationSymbol"}
[Sun Dec 13 2020 10:51:27.936]  ERROR    Mapbox error You're calling `getMetersPerPixelAtLatitude` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `getMetersPerPixelAtLatitude` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:27.967]  ERROR    Mapbox error You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:27.998]  ERROR    Mapbox error You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.370]  ERROR    Mapbox error You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.630]  ERROR    Mapbox error You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.900]  ERROR    Mapbox error You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.116]  ERROR    Mapbox error You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.146]  ERROR    Mapbox error You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.177]  ERROR    Mapbox error You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.204]  ERROR    Mapbox error You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.232]  ERROR    Mapbox error You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.263]  ERROR    Mapbox error You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.289]  ERROR    Mapbox error You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.316]  ERROR    Mapbox error You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}
[Sun Dec 13 2020 10:51:28.350]  ERROR    Mapbox error You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`? {"level": "error", "message": "You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?", "tag": "Mbgl-NativeMapView"}

How to Integrate with Carplay

I'm trying to create a Carplay navigation app and this seems to imply theres support for it. Does anyone know how to accomplish this? Haven't been able to find instructions

Custom directions API url

Hi guys,
we want to avoid of using Mapbox directions API, so we created our own directions API (with graphhopper and maphopper as proxy). Do you think that it would by possible to connect our api url to react-native-mapbox-navigation at the end? I tried to add our api url to baseUrl in MapboxNavigationView.kt for android, but RouteOptions builder creates different url format (we can create mapper for this url format in our maphopper). Do you think, that it would be possible to do same in swift? Also we want to customize vehicle type (foot, cycle...), at this point it is possible to navigate only with car as vehicle. With url prop for custom directions API url it would be possible to customize more options for directions routes (maybe?). Do you think, that it would be technically possible to create mapper for this url in react-native-mapbox-navigation?
Example url from maphopper:
http://localhost:3000/api/1/route?point=40.72,-74&vehicle=car&locale=en&key=[GH_ACCESSTOKEN]&points_encoded=false&point=40.733,-73.989&mapboxkey=[MB_ACCESS_TOKEN]

Xcode build failure

Hi all, I am getting following error during xcode build after installing this package

ld: warning: building for iOS, but linking in dylib file (/Users/nitinsharma/Library/Developer/Xcode/DerivedData/app-bpqejjqomhurrldtyubqevqtdqzc/Build/Products/Debug-iphoneos/MapboxAccounts.framework/MapboxAccounts) built for Mac Catalyst
Undefined symbols for architecture arm64:
  "_swift_getFunctionReplacement", referenced from:
      _swift_getFunctionReplacement50 in libswiftCompatibilityDynamicReplacements.a(DynamicReplaceable.cpp.o)
     (maybe you meant: _swift_getFunctionReplacement50)
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

I am using

react-native : v0.63.0
xcode : 12.4

mapbox related pods from my podfile.lock
  - Mapbox-iOS-SDK (6.3.0):
    - MapboxMobileEvents (~> 0.10.4)
  - MapboxAccounts (2.3.1)
  - MapboxCommon (9.2.0)
  - MapboxCoreNavigation (1.2.1):
    - MapboxAccounts (~> 2.3.0)
    - MapboxDirections (~> 1.2.0)
    - MapboxMobileEvents (~> 0.10.2)
    - MapboxNavigationNative (~> 30.0)
    - Turf (~> 1.0)
  - MapboxDirections (1.2.0):
    - Polyline (~> 5.0)
    - Turf (~> 1.0)
  - MapboxMobileEvents (0.10.7)
  - MapboxNavigation (1.2.1):
    - Mapbox-iOS-SDK (~> 6.0)
    - MapboxCoreNavigation (= 1.2.1)
    - MapboxMobileEvents (~> 0.10.2)
    - MapboxSpeech (~> 1.0)
    - Solar (~> 2.1)
  - MapboxNavigationNative (30.0.0):
    - MapboxCommon (= 9.2.0)
  - MapboxSpeech (1.0.0)

installation error

npm notice
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.1" from @homee/[email protected]
npm ERR! node_modules/@homee/react-native-mapbox-navigation
npm ERR! @homee/react-native-mapbox-navigation@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Licensing issue due to upstream mapbox dependency

Thanks for providing this interesting project!

From my understanding it should be mentioned in the licensing file that the usage of this project falls under the Mapbox terms. See the license file of the upstream dependency (com.mapbox.navigation:core) version 1.3.0:

This SDK uses Mapbox Navigator, a private binary, as a dependency. The Mapbox Navigator binary may be used with a Mapbox account and under the Mapbox TOS. If you do not wish to use this binary, make sure you swap out this dependency in libandroid-navigation/build.gradle.

Please note that it is not trivial to "swap out" this dependency. Additionally Mapbox sends home information from which they say is anonymous (probably to create their traffic data).

And this license becomes effective even if you do not use their services and use some self-hosted map tiles.

And in the latest version of this upstream dependencies it get's fully closed source:

Mapbox Navigation for Android version 2.0 (“Mapbox Navigation Android SDK“) or higher must be used according to the Mapbox Terms of Service

I highlight this as I was hoping you found a solution for the problem we faced when we (GraphHopper) forked their navigation SDK before they went closed source a few years ago. This fork is now available under the MapLibre umrella - see a blog post of maptiler - one of the initiator about the reasoning of this org.

Could not find compatible version for pod "@react-native-mapbox-gl-mapbox-static"

After following all the steps before doing pod install

I am getting below:

[!] CocoaPods could not find compatible versions for pod "@react-native-mapbox-gl-mapbox-static":
In Podfile:
react-native-mapbox-gl (from ../node_modules/@react-native-mapbox-gl/maps) was resolved to 8.1.0, which depends on
@react-native-mapbox-gl-mapbox-static (~> 5.9.0)

react-native-mapbox-navigation (from `../node_modules/@homee/react-native-mapbox-navigation`) was resolved to 1.0.2, which depends on
  @react-native-mapbox-gl-mapbox-static (= 6.3.0)

[!] An error occurred while processing the pre-install hook of the Podfile.

Hello and good day,

Working with my development team we ran into this issue when installing pods with the latest version of your package:

`[!] An error occurred while processing the pre-install hook of the Podfile.

undefined method `pre_install' for nil:NilClass

/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:162:in pre_install!' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:869:in run_podfile_pre_install_hook'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:857:in block in run_podfile_pre_install_hooks' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/user_interface.rb:145:in message'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:856:in run_podfile_pre_install_hooks' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:254:in block in download_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/user_interface.rb:64:in section' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:252:in download_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:161:in install!' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command/install.rb:52:in run'
/Library/Ruby/Gems/2.6.0/gems/claide-1.0.3/lib/claide/command.rb:334:in run' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:52:in run'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/bin/pod:55:in <top (required)>' /usr/local/bin/pod:23:in load'
/usr/local/bin/pod:23:in <main>'

As a temporary fix for anyone running into this issue we just rolled back to version 1.0.7, but it would be nice to know the right way to work with the latest version if there is any.

Thank you.

Android Build Issue

I am getting below error while building the app on android

Unable to resolve dependency for ':homee_react-native-mapbox-navigation@debug/compileClasspath': Could not resolve com.mapbox.navigation:core:1.3.0.

Doesn't render anything

I made a build for android but the screen was blank. Couldn't see the map

  return (
    <View style={styles.container}>
      <MapboxNavigation
        origin={[-97.760288, 30.273566]}
        destination={[-97.918842, 30.494466]}
        onLocationChange={event => {
          const { latitude, longitude } = event.nativeEvent
          console.log('UUUUUUUUUUUUUUUUUUUUUUUuu', event.nativeEvent)
        }}
        onMapReady={event => {
          console.log('UUUUUUUUUUUUUUUUUUUUUUUuu', event.nativeEvent)
        }}
        onRouteProgressChange={event => {
          const {
            distanceTraveled,
            durationRemaining,
            fractionTraveled,
            distanceRemaining
          } = event.nativeEvent
          console.log('LLLLLLLLLLLLLLLLLLLLLLLL', event.nativeEvent)
        }}
        onError={event => {
          const { message } = event.nativeEvent
          console.error(message)
        }}
        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>
  )

setup:

android/buid.gradle

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()

        maven { url 'https://maven.google.com' }

        maven { url 'https://www.jitpack.io' }

        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 = "hardcoded_secret_token" ?: ""
            }
        }
    }
}

main/AndroidManifest.xml

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

Only for real devices?

I was able to install the library for the android app following the steps. However while running on the emulator the map does not appear. So should it work on emulator or only on a real device? (I have not tested on a real device.)
Screenshot_1631058075

Add onArrive prop

TODO: Add a prop called onArrive that takes a function to get called when the "End Navigation" button is pressed (or when navigation finishes transparently).

Question on best practices for passing lat/long props...

Hello all, I was just wondering how everyone is using this library in their application and how they are handling the passing of the origin and destination props. Right now we are using react-native-geolocation-service with enableHighAccuracy set to true for the origin prop to get the users current location. What is everyone else using for this?

Also how is everyone passing in the lat/long array to this package? Passing in an object and converting it into an array? Directly passing in an array of the lat/long?

Thanks this would be a huge help!!

Destination coordinates mixed

I was trying to run some tests with different locations and finally I figure out that the latitude and longitude are mixed up

let originWaypoint = Waypoint(coordinate: CLLocationCoordinate2D(latitude: origin[1] as! CLLocationDegrees, longitude: origin[0] as! CLLocationDegrees)) let destinationWaypoint = Waypoint(coordinate: CLLocationCoordinate2D(latitude: destination[1] as! CLLocationDegrees, longitude: destination[0] as! CLLocationDegrees))

Any reason for this?

I should expect origin=[latitude, longitude] and destination=[latitude, longitude]

Allow custom bottom banner for Navigation

Hello! I was curious if it was possible to allow for custom banners on the MapBox screen. We were looking to change the style of the arrival time, distance, etc. and it doesn't seem there is any such property exposed. We found a (really gross) way to display our own bottom banner that involves position: 'absolute' but it would be much better if there was a prop instead.

Android installation

implementation 'com.mapbox.navigation.core:1.1.0'
implementation 'com.mapbox.navigation:ui:1.5.0'

not working in android

gredle offline error show

What is issue please give me a solution

React-native version 0.64.2

Arrived banner still showing with showsEndOfRouteFeedback={false}

I would like to know how can we remove the arrived banner showing the rating and comment? We are using a custom modal for that and our flow is something like start the journey from current location to pickup point then from pickup point to destination. When I arrive to pickup point we don't want to show the banner with rating and comments. Also the End Navigation have no callback and we cannot hide that. Another thing is that if we change the destination point coordinates it will not update it on navigator only if we relaunch the navigator.

Unable to install on IOS devices

Descriptions:

Installed following the instructions. build was successful, but this error popped up.

Xcode: Version 12.4 (12D4e)
iOS: 14.0.1

Error:

Details

Unable to install "test_mapbox"
Domain: com.apple.dt.MobileDeviceErrorDomain
Code: -402653103
--
Could not inspect the application package.
Domain: com.apple.dt.MobileDeviceErrorDomain
Code: -402653103
User Info: {
    DVTRadarComponentKey = 282703;
    MobileDeviceErrorCode = "(0xE8000051)";
    "com.apple.dtdevicekit.stacktrace" = (
	0   DTDeviceKitBase                     0x000000012d0e6c8f DTDKCreateNSErrorFromAMDErrorCode + 220
	1   DTDeviceKitBase                     0x000000012d125241 __90-[DTDKMobileDeviceToken installApplicationBundleAtPath:withOptions:andError:withCallback:]_block_invoke + 155
	2   DVTFoundation                       0x000000010a1fb64b DVTInvokeWithStrongOwnership + 71
	3   DTDeviceKitBase                     0x000000012d124f82 -[DTDKMobileDeviceToken installApplicationBundleAtPath:withOptions:andError:withCallback:] + 1440
	4   IDEiOSSupportCore                   0x000000012cf95a10 __118-[DVTiOSDevice(DVTiPhoneApplicationInstallation) processAppInstallSet:appUninstallSet:installOptions:completionBlock:]_block_invoke.292 + 3513
	5   DVTFoundation                       0x000000010a32a17e __DVT_CALLING_CLIENT_BLOCK__ + 7
	6   DVTFoundation                       0x000000010a32bda0 __DVTDispatchAsync_block_invoke + 1191
	7   libdispatch.dylib                   0x00007fff2023d5dd _dispatch_call_block_and_release + 12
	8   libdispatch.dylib                   0x00007fff2023e7c7 _dispatch_client_callout + 8
	9   libdispatch.dylib                   0x00007fff202445fe _dispatch_lane_serial_drain + 606
	10  libdispatch.dylib                   0x00007fff202450cb _dispatch_lane_invoke + 375
	11  libdispatch.dylib                   0x00007fff2024ec5d _dispatch_workloop_worker_thread + 819
	12  libsystem_pthread.dylib             0x00007fff203e6499 _pthread_wqthread + 314
	13  libsystem_pthread.dylib             0x00007fff203e5467 start_wqthread + 15
);
}
--


System Information

macOS Version 11.2.3 (Build 20D91)
Xcode 12.4 (17801) (Build 12D4e)
Timestamp: 2021-03-10T11:57:51-05:00

Updates:

This error doesn't when I built on simulator. Only happened on real devices.

[Android] App crashed when I click the x icon on the bottom banner or navigate away from the navigation screen

Hi everyone,

I am facing issue with react-native-mapbox-navigation crashed as described in the title.

Basically I have a navigation component like this:

const OrderNavigationComponent = ({ order }) => {
  const navigation = useNavigation();

  const geoPoint = useShallowEqualSelector(
    (state) => state.systemReducer.geoPoint
  );

  const handleQuitNavigation = () => {
    if (navigation.canGoBack()) {
      navigation.goBack();
    } else {
      navigation.navigate(RouteName.OrderNavigator, {
        screen: RouteName.OrderDetail,
        params: {
          order,
        },
      });
    }
  };

  const origin = [geoPoint.longitude, geoPoint.latitude];
  const destination =
    order.orderStatus === OrderStatus.ACCEPTED
      ? [order.partner.geoPoint.longitude, order.partner.geoPoint.latitude]
      : [order.customer.geoPoint.longitude, order.customer.geoPoint.latitude];

  return (
    <View style={styles.container}>
      <MapboxNavigation
        origin={origin}
        destination={destination}
        shouldSimulateRoute={true}
        showsEndOfRouteFeedback
        onLocationChange={(event) => {
          const { latitude, longitude } = event.nativeEvent;
        }}
        onRouteProgressChange={(event) => {
          const {
            distanceTraveled,
            durationRemaining,
            fractionTraveled,
            distanceRemaining,
          } = event.nativeEvent;
        }}
        onError={(event) => {
          const { message } = event.nativeEvent;
          if (__DEV__) {
            console.log("Navigation error out with error: ", error);
          }
          // handleQuitNavigation();
        }}
        onCancelNavigation={() => {
          console.log("Cancel");
          handleQuitNavigation();
        }}
        onArrive={() => {}}
      />
    </View>
  );
};

When I click the x icon, it will invoke the handleQuitNavigation() where it will navigate to Order screen. However, what I experience is that it just crashed without any error thrown.

Have anyone experience the same thing before, and may know how to overcome this?

React Native Mapbox - MapboxNavigation was not found in the UIManager

So I've been trying to integrate @homee/react-native-mapbox-navigation I've followed the install instructions found here https://github.com/homeeondemand/react-native-mapbox-navigation to the letter 3 times now. I continue to get the following error, this is from the simulator:

Simulators error

This is from the console:

Invariant Violation: requireNativeComponent: "MapboxNavigation" was not found in the UIManager.
 
 This error is located at:
     in MapboxNavigation (at react-native-mapbox-navigation/index.js:6)
     in MapboxNavigation (at ManifestScreen.tsx:37)
     in RCTView (at View.js:34)
     in View (at Themed.tsx:40)
     in View (at ManifestScreen.tsx:36)
     in RCTView (at View.js:34)
     in View (at Themed.tsx:40)
     in View (at ManifestScreen.tsx:25)
     in ManifestScreen (at SceneView.tsx:122)
     in StaticContainer
     in StaticContainer (at SceneView.tsx:115)
     in EnsureSingleNavigator (at SceneView.tsx:114)
     in SceneView (at useDescriptors.tsx:153)
     in RCTView (at View.js:34)
     in View (at CardContainer.tsx:245)
     in RCTView (at View.js:34)
     in View (at CardContainer.tsx:244)
     in RCTView (at View.js:34)
     in View (at CardSheet.tsx:33)
     in ForwardRef(CardSheet) (at Card.tsx:573)
     in RCTView (at View.js:34)
     in View (at createAnimatedComponent.js:165)
     in AnimatedComponent (at createAnimatedComponent.js:215)
     in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
     in PanGestureHandler (at GestureHandlerNative.tsx:13)
     in PanGestureHandler (at Card.tsx:549)
     in RCTView (at View.js:34)
     in View (at createAnimatedComponent.js:165)
     in AnimatedComponent (at createAnimatedComponent.js:215)
     in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
     in RCTView (at View.js:34)
     in View (at Card.tsx:538)
     in Card (at CardContainer.tsx:206)
     in CardContainer (at CardStack.tsx:619)
     in RCTView (at View.js:34)
     in View (at Screens.tsx:84)
     in MaybeScreen (at CardStack.tsx:612)
     in RCTView (at View.js:34)
     in View (at Screens.tsx:54)
     in MaybeScreenContainer (at CardStack.tsx:494)
     in CardStack (at StackView.tsx:462)
     in KeyboardManager (at StackView.tsx:458)
     in SafeAreaProviderCompat (at StackView.tsx:455)
     in RCTView (at View.js:34)
     in View (at StackView.tsx:454)
     in StackView (at createStackNavigator.tsx:87)
     in StackNavigator (at ManifestTabNavigator.tsx:60)
     in DirectionsNavigator (at SceneView.tsx:122)
     in StaticContainer
     in StaticContainer (at SceneView.tsx:115)
     in EnsureSingleNavigator (at SceneView.tsx:114)
     in SceneView (at useDescriptors.tsx:153)
     in RCTView (at View.js:34)
     in View (at BottomTabView.tsx:55)
     in SceneContent (at BottomTabView.tsx:172)
     in RCTView (at View.js:34)
     in View (at ResourceSavingScene.tsx:58)
     in RCTView (at View.js:34)
     in View (at ResourceSavingScene.tsx:41)
     in ResourceSavingScene (at BottomTabView.tsx:166)
     in RCTView (at View.js:34)
     in View (at src/index.native.js:123)
     in ScreenContainer (at BottomTabView.tsx:146)
     in RCTView (at View.js:34)
     in View (at BottomTabView.tsx:145)
     in SafeAreaProviderCompat (at BottomTabView.tsx:144)
     in BottomTabView (at createBottomTabNavigator.tsx:45)
     in BottomTabNavigator (at ManifestTabNavigator.tsx:19)
     in ManifestTabNavigator (at SceneView.tsx:122)
     in StaticContainer
     in StaticContainer (at SceneView.tsx:115)
     in EnsureSingleNavigator (at SceneView.tsx:114)
     in SceneView (at useDescriptors.tsx:153)
     in RCTView (at View.js:34)
     in View (at CardContainer.tsx:245)
     in RCTView (at View.js:34)
     in View (at CardContainer.tsx:244)
     in RCTView (at View.js:34)
     in View (at CardSheet.tsx:33)
     in ForwardRef(CardSheet) (at Card.tsx:573)
     in RCTView (at View.js:34)
     in View (at createAnimatedComponent.js:165)
     in AnimatedComponent (at createAnimatedComponent.js:215)
     in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
     in PanGestureHandler (at GestureHandlerNative.tsx:13)
     in PanGestureHandler (at Card.tsx:549)
     in RCTView (at View.js:34)
     in View (at createAnimatedComponent.js:165)
     in AnimatedComponent (at createAnimatedComponent.js:215)
     in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
     in RCTView (at View.js:34)
     in View (at Card.tsx:538)
     in Card (at CardContainer.tsx:206)
     in CardContainer (at CardStack.tsx:619)
     in RCTView (at View.js:34)
     in View (at Screens.tsx:84)
     in MaybeScreen (at CardStack.tsx:612)
     in RCTView (at View.js:34)
     in View (at Screens.tsx:54)
     in MaybeScreenContainer (at CardStack.tsx:494)
     in CardStack (at StackView.tsx:462)
     in KeyboardManager (at StackView.tsx:458)
     in SafeAreaProviderCompat (at StackView.tsx:455)
     in RCTView (at View.js:34)
     in View (at StackView.tsx:454)
     in StackView (at createStackNavigator.tsx:87)
     in StackNavigator (at navigation/index.tsx:45)
     in RootNavigator (at navigation/index.tsx:29)
     in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
     in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
     in ThemeProvider (at NavigationContainer.tsx:90)
     in ForwardRef(NavigationContainer) (at navigation/index.tsx:26)
     in Navigation (at App.tsx:18)
     in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
     in SafeAreaProvider (at App.tsx:17)
     in App (created by ExpoRoot)
     in ExpoRoot (at renderApplication.js:45)
     in RCTView (at View.js:34)
     in View (at AppContainer.js:106)
     in DevAppContainer (at AppContainer.js:121)
     in RCTView (at View.js:34)
     in View (at AppContainer.js:132)
     in AppContainer (at renderApplication.js:39)
 - node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
 - node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
 - node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
 - node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
 - node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
 - node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
 - node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
 - node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
 - node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
 - node_modules/regenerator-runtime/runtime.js:293:29 in invoke
 - node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
 - node_modules/regenerator-runtime/runtime.js:154:27 in invoke
 - node_modules/regenerator-runtime/runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
 - node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
 - node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
 - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
 - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
 - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue
 * [native code]:null in flushedQueue
 * [native code]:null in invokeCallbackAndReturnFlushedQueue
 
 Invariant Violation: requireNativeComponent: "MapboxNavigation" was not found in the UIManager.
 
 This error is located at:
     in MapboxNavigation (at react-native-mapbox-navigation/index.js:6)
     in MapboxNavigation (at ManifestScreen.tsx:37)
     in RCTView (at View.js:34)
     in View (at Themed.tsx:40)
     in View (at ManifestScreen.tsx:36)
     in RCTView (at View.js:34)
     in View (at Themed.tsx:40)
     in View (at ManifestScreen.tsx:25)
     in ManifestScreen (at SceneView.tsx:122)
     in StaticContainer
     in StaticContainer (at SceneView.tsx:115)
     in EnsureSingleNavigator (at SceneView.tsx:114)
     in SceneView (at useDescriptors.tsx:153)
     in RCTView (at View.js:34)
     in View (at CardContainer.tsx:245)
     in RCTView (at View.js:34)
     in View (at CardContainer.tsx:244)
     in RCTView (at View.js:34)
     in View (at CardSheet.tsx:33)
     in ForwardRef(CardSheet) (at Card.tsx:573)
     in RCTView (at View.js:34)
     in View (at createAnimatedComponent.js:165)
     in AnimatedComponent (at createAnimatedComponent.js:215)
     in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
     in PanGestureHandler (at GestureHandlerNative.tsx:13)
     in PanGestureHandler (at Card.tsx:549)
     in RCTView (at View.js:34)
     in View (at createAnimatedComponent.js:165)
     in AnimatedComponent (at createAnimatedComponent.js:215)
     in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
     in RCTView (at View.js:34)
     in View (at Card.tsx:538)
     in Card (at CardContainer.tsx:206)
     in CardContainer (at CardStack.tsx:619)
     in RCTView (at View.js:34)
     in View (at Screens.tsx:84)
     in MaybeScreen (at CardStack.tsx:612)
     in RCTView (at View.js:34)
     in View (at Screens.tsx:54)
     in MaybeScreenContainer (at CardStack.tsx:494)
     in CardStack (at StackView.tsx:462)
     in KeyboardManager (at StackView.tsx:458)
     in SafeAreaProviderCompat (at StackView.tsx:455)
     in RCTView (at View.js:34)
     in View (at StackView.tsx:454)
     in StackView (at createStackNavigator.tsx:87)
     in StackNavigator (at ManifestTabNavigator.tsx:60)
     in DirectionsNavigator (at SceneView.tsx:122)
     in StaticContainer
     in StaticContainer (at SceneView.tsx:115)
     in EnsureSingleNavigator (at SceneView.tsx:114)
     in SceneView (at useDescriptors.tsx:153)
     in RCTView (at View.js:34)
     in View (at BottomTabView.tsx:55)
     in SceneContent (at BottomTabView.tsx:172)
     in RCTView (at View.js:34)
     in View (at ResourceSavingScene.tsx:58)
     in RCTView (at View.js:34)
     in View (at ResourceSavingScene.tsx:41)
     in ResourceSavingScene (at BottomTabView.tsx:166)
     in RCTView (at View.js:34)
     in View (at src/index.native.js:123)
     in ScreenContainer (at BottomTabView.tsx:146)
     in RCTView (at View.js:34)
     in View (at BottomTabView.tsx:145)
     in SafeAreaProviderCompat (at BottomTabView.tsx:144)
     in BottomTabView (at createBottomTabNavigator.tsx:45)
     in BottomTabNavigator (at ManifestTabNavigator.tsx:19)
     in ManifestTabNavigator (at SceneView.tsx:122)
     in StaticContainer
     in StaticContainer (at SceneView.tsx:115)
     in EnsureSingleNavigator (at SceneView.tsx:114)
     in SceneView (at useDescriptors.tsx:153)
     in RCTView (at View.js:34)
     in View (at CardContainer.tsx:245)
     in RCTView (at View.js:34)
     in View (at CardContainer.tsx:244)
     in RCTView (at View.js:34)
     in View (at CardSheet.tsx:33)
     in ForwardRef(CardSheet) (at Card.tsx:573)
     in RCTView (at View.js:34)
     in View (at createAnimatedComponent.js:165)
     in AnimatedComponent (at createAnimatedComponent.js:215)
     in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
     in PanGestureHandler (at GestureHandlerNative.tsx:13)
     in PanGestureHandler (at Card.tsx:549)
     in RCTView (at View.js:34)
     in View (at createAnimatedComponent.js:165)
     in AnimatedComponent (at createAnimatedComponent.js:215)
     in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
     in RCTView (at View.js:34)
     in View (at Card.tsx:538)
     in Card (at CardContainer.tsx:206)
     in CardContainer (at CardStack.tsx:619)
     in RCTView (at View.js:34)
     in View (at Screens.tsx:84)
     in MaybeScreen (at CardStack.tsx:612)
     in RCTView (at View.js:34)
     in View (at Screens.tsx:54)
     in MaybeScreenContainer (at CardStack.tsx:494)
     in CardStack (at StackView.tsx:462)
     in KeyboardManager (at StackView.tsx:458)
     in SafeAreaProviderCompat (at StackView.tsx:455)
     in RCTView (at View.js:34)
     in View (at StackView.tsx:454)
     in StackView (at createStackNavigator.tsx:87)
     in StackNavigator (at navigation/index.tsx:45)
     in RootNavigator (at navigation/index.tsx:29)
     in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
     in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
     in ThemeProvider (at NavigationContainer.tsx:90)
     in ForwardRef(NavigationContainer) (at navigation/index.tsx:26)
     in Navigation (at App.tsx:18)
     in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
     in SafeAreaProvider (at App.tsx:17)
     in App (created by ExpoRoot)
     in ExpoRoot (at renderApplication.js:45)
     in RCTView (at View.js:34)
     in View (at AppContainer.js:106)
     in DevAppContainer (at AppContainer.js:121)
     in RCTView (at View.js:34)
     in View (at AppContainer.js:132)
     in AppContainer (at renderApplication.js:39)
 - node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
 - node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
 - node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
 - node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
 - node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
 - node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
 - node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15257:32 in logCapturedError
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15361:20 in logError
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16597:12 in update.callback
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7106:2 in callCallback
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7127:20 in commitUpdateQueue
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15801:25 in commitLifeCycles
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18744:22 in commitLayoutEffects
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18483:29 in commitRootImpl
 * [native code]:null in commitRootImpl
 - node_modules/scheduler/cjs/scheduler.development.js:653:23 in unstable_runWithPriority
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18317:17 in commitRoot
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot
 * [native code]:null in performSyncWorkOnRoot
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
 - node_modules/scheduler/cjs/scheduler.development.js:653:23 in unstable_runWithPriority
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17718:28 in batchedUpdates$1
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2767:27 in receiveTouches
 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
 * [native code]:null in callFunctionReturnFlushedQueue

This is code for the file where I am trying to use the mapbox package:

 import * as React from 'react';
 
 import { Text, View } from '../components/Themed';
 import styles from '../components/styles';
 import {Ionicons} from '@expo/vector-icons';
 import {Image} from 'react-native';
 
 import MapboxNavigation from '@homee/react-native-mapbox-navigation';
 
 export default function ManifestScreen() {
   return (
     <View style={styles.padlessContainer}>
         <MapboxNavigation
           origin={[-97.760288, 30.273566]}
           destination={[-97.918842, 30.494466]}
           shouldSimulateRoute={true}
           onLocationChange={(event: any) => {
             const { latitude, longitude } = event.nativeEvent;
           }}
           onRouteProgressChange={(event: any) => {
             const {
               distanceTraveled,
               durationRemaining,
               fractionTraveled,
               distanceRemaining,
             } = event.nativeEvent;
           }}
           onError={(event: any) => {
             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>
   );
 }

I checked and made sure I had the correct native extensions installed in my /ios/pods directory:

Pods directory

I also made sure I had all the needed packages installed in the node_modules:

Node modules directory

I also seen this issue, which seemed similar so I tried to autolink the missing package that was listed in the simulator errors:

https://stackoverflow.com/questions/60034686/react-native-rncsafeareaview-was-not-found-in-the-uimanager#answer-61329389

That didn't help either, I've been trouble shooting for 3-4 days trying to get this resolved, any help would be greatly appreciated!!!

Android: black items in map

Hi guys. Do you know why I'm seeing black item, even black pointer on android? It's working well on iOS but not on android

Screen Shot 2021-10-06 at 6 35 43 AM

Feature: make audio optional

Is there a configuration that allows audio to be optional or is possible to be added. In my certain situation we are finding that drivers quit navigation because they are annoyed by the sound.

MapboxMobileEvents - Library not loaded

My built was succeeded but when the app started on real device get the following

dyld: Library not loaded: @rpath/MapboxMobileEvents.framework/MapboxMobileEvents
  Referenced from: /private/var/containers/Bundle/Application/E108BAAA-D3FA-4D6D-99CE-B1A6AB844FD4/driverapp.app/Frameworks/Mapbox.framework/Mapbox
  Reason: image not found
dyld: launch, loading dependent libraries
DYLD_LIBRARY_PATH=/usr/lib/system/introspection
DYLD_INSERT_LIBRARIES=/Developer/usr/lib/libBacktraceRecording.dylib:/Developer/usr/lib/libMainThreadChecker.dylib:/Developer/Library/PrivateFrameworks/DTDDISupport.framework/libViewDebuggerSupport.dylib
(lldb) 

Any idea what this could be? I want to say that I've followed all the steps in ReadMe and also the issue https://github.com/homeeondemand/react-native-mapbox-navigation/issues/6

Wrong Language

Hi @rossmartin. Forgive you, I am so burdened with you.

Different languages appear in different places. Could it be possible to add language settings? Or at least can it be done in fixed English?

IMG_3145

IMG_3146

IMG_3144

iOS Unimplemented methods

While starting the navigator I get couple of logs for different delegate methods. Is this something that is required?

[delegation.TopBannerViewController] Unimplemented delegate method in TopBannerViewController: NavigationServiceDelegate.navigationService(_:willArriveAt:after:distance:). This message will only be logged once.

[delegation.BottomBannerViewController] Unimplemented delegate method in BottomBannerViewController: NavigationServiceDelegate.navigationService(_:willArriveAt:after:distance:). This message will only be logged once.

[delegation.TopBannerViewController] Unimplemented delegate method in TopBannerViewController: NavigationServiceDelegate.navigationService(_:didPassSpokenInstructionPoint:routeProgress:). This message will only be logged once.

[delegation.RouteMapViewController] Unimplemented delegate method in RouteMapViewController: NavigationServiceDelegate.navigationService(_:shouldRerouteFrom:). This message will only be logged once.

[delegation.TopBannerViewController] Unimplemented delegate method in TopBannerViewController: NavigationServiceDelegate.navigationService(_:shouldRerouteFrom:). This message will only be logged once.

[delegation.BottomBannerViewController] Unimplemented delegate method in BottomBannerViewController: NavigationServiceDelegate.navigationService(_:shouldRerouteFrom:). This message will only be logged once.

[delegation.MapboxNavigationView] Unimplemented delegate method in MapboxNavigationView: NavigationViewControllerDelegate.navigationViewController(_:shouldRerouteFrom:). This message will only be logged once.

Have a warning

Hi @rossmartin. Navigation is working. First of all, thank you for your effort.
However, it gives a warning, is there a solution?

Mapbox warning Falling back to MGLIdeographsRasterizedLocally because MGLIdeographicFontFamilies are specified. {"filePath": "-[MGLRendererConfiguration glyphsRasterizationOptionsWithLocalFontFamilyName:rasterizationMode:]", "level": "warning", "line": 111, "message": "Falling back to MGLIdeographsRasterizedLocally because MGLIdeographicFontFamilies are specified."}

I also get such an error.
Mapbox error [event]:General [code]:-1 [message]:Unable to calculate appropriate zoom level for bounds. Vertical or horizontal padding is greater than map's height or width. {"filePath": "virtual bool mbgl::MGLCoreLoggingObserver::onRecord(mbgl::EventSeverity, mbgl::Event, int64_t, const std::string &)", "level": "error", "line": 30, "message": "[event]:General [code]:-1 [message]:Unable to calculate appropriate zoom level for bounds. Vertical or horizontal padding is greater than map's height or width."}

Finally, is it possible to set the language?

Receiving Swift Compile Error: 'MapboxAccounts/MapboxAccounts.h' file not found

When I go to build the project after following the installation steps I receive a Swift Compile Error in xcode.

Xcode 12.3
RN 0.63.4

<module-includes>:1:9: note: in file included from <module-includes>:1:
#import "MapboxCoreNavigation-umbrella.h"
        ^
/../ios/Pods/Headers/Public/MapboxCoreNavigation/MapboxCoreNavigation-umbrella.h:13:9: note: in file included from /../ios/Pods/Headers/Public/MapboxCoreNavigation/MapboxCoreNavigation-umbrella.h:13:
#import "MapboxCoreNavigation.h"
        ^
/../ios/Pods/Headers/Public/MapboxCoreNavigation/MapboxCoreNavigation.h:9:9: note: in file included from /../ios/Pods/Headers/Public/MapboxCoreNavigation/MapboxCoreNavigation.h:9:
#import "MBXAccounts+CoreNavigationAdditions.h"
        ^
/../ios/Pods/Headers/Public/MapboxCoreNavigation/MBXAccounts+CoreNavigationAdditions.h:1:9: error: 'MapboxAccounts/MapboxAccounts.h' file not found
#import <MapboxAccounts/MapboxAccounts.h>
        ^
<unknown>:0: error: could not build Objective-C module 'MapboxCoreNavigation'

Any idea the cause of issue or if I'm missing a step?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.