{"id":20886995,"url":"https://github.com/fleetbase/react-native-mapbox-navigation","last_synced_at":"2025-05-12T19:33:02.947Z","repository":{"id":195743727,"uuid":"693619617","full_name":"fleetbase/react-native-mapbox-navigation","owner":"fleetbase","description":"React Native Mapbox Navigation","archived":false,"fork":false,"pushed_at":"2023-09-22T09:57:09.000Z","size":1998,"stargazers_count":0,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-13T06:57:09.348Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fleetbase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-19T11:40:24.000Z","updated_at":"2023-09-19T11:43:58.000Z","dependencies_parsed_at":"2023-09-23T00:42:56.133Z","dependency_job_id":"fb1cacb1-d12e-4381-a2d0-bb75605e5ea0","html_url":"https://github.com/fleetbase/react-native-mapbox-navigation","commit_stats":null,"previous_names":["fleetbase/react-native-mapbox-navigation"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleetbase%2Freact-native-mapbox-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleetbase%2Freact-native-mapbox-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleetbase%2Freact-native-mapbox-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleetbase%2Freact-native-mapbox-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fleetbase","download_url":"https://codeload.github.com/fleetbase/react-native-mapbox-navigation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225148820,"owners_count":17428453,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T08:18:42.803Z","updated_at":"2024-11-18T08:18:44.522Z","avatar_url":"https://github.com/fleetbase.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Mapbox Navigation\n\n\u003cimg alt=\"React Native Mapbox Navigation\" src=\"./img/ios-nav.png?v=2\" width=\"300\" align=\"right\" /\u003e\n\nSmart Mapbox turn-by-turn routing based on real-time traffic for React Native. A navigation UI ready to drop into your React Native application.\n\n## Features\n\n- A full-fledged turn-by-turn navigation UI for iPhone, iPad, and CarPlay that’s ready to drop into your application\n- [Professionally designed map styles](https://www.mapbox.com/maps/) for daytime and nighttime driving\n- Worldwide driving, cycling, and walking directions powered by [open data](https://www.mapbox.com/about/open/) and user feedback\n- Traffic avoidance and proactive rerouting based on current conditions in [over 55 countries](https://docs.mapbox.com/help/how-mapbox-works/directions/#traffic-data)\n- Natural-sounding turn instructions powered by [Amazon Polly](https://aws.amazon.com/polly/) (no configuration needed)\n- Support for over two dozen languages\n\n## Installation Requirements\n\nBefore 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](https://account.mapbox.com/auth/signup/) and navigate to your [Account page](https://account.mapbox.com/). You'll need:\n\n- **A public access token**: From your account's [tokens page](https://account.mapbox.com/access-tokens/), you can either copy your _default public token_ or click the **Create a token** button to create a new public token.\n- **A secret access token with the `Downloads:Read` scope**.\n\n1. From your account's [tokens page](https://account.mapbox.com/access-tokens/), click the **Create a token** button.\n1. From the token creation page, give your token a name and make sure the box next to the `Downloads:Read` scope is checked.\n1. Click the **Create token** button at the bottom of the page to create your token.\n1. The token you've created is a _secret token_, which means you will only have one opportunity to copy it somewhere secure.\n\n## Installation\n\n```\nyarn add @fleetbase/react-native-mapbox-navigation\n```\n\nRead the iOS specific instructions below before running `pod install`.\n\n---\n\n### iOS Specific Instructions\n\nMake 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.\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  Create an Objective-C bridging header\n\u003c/summary\u003e\n\n1. From Xcode, go to: \u003cbr\u003e\n   File → New → File…\n1. Select Swift File\n1. Name your file Dummy or whatever you want\n1. In the Group dropdown, make sure to select the group folder for your app, not the project itself.\n\nAfter 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”.\n\n![bridging header](img/bridging-header.png)\n\nThis file is usually named YourProject-Bridging-Header.h. Don’t change this name manually, because Xcode configures the project with this exact filename.\n\n\u003c/details\u003e\n\nThere 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.\n\n\u003cdetails\u003e\n\u003csummary\u003e\nBuild Settings Screenshot 1\n\u003c/summary\u003e\n\n![build setting linking](img/build-setting-linking.png)\n\n\u003c/details\u003e\n\nYou 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 -\n\n\u003cdetails\u003e\n\u003csummary\u003e\nBuild Settings Screenshot 2\n\u003c/summary\u003e\n\n![build setting path](img/build-setting-path.png)\n\n\u003c/details\u003e\n\nPlace your public token in your Xcode project's `Info.plist` and add a `MBXAccessToken` key whose value is your public access token.\n\nNOTE: `MGLMapboxAccessToken` is deprecated, now you should use `MBXAccessToken` instead\n\nAdd 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.\n\n```\n\u003ckey\u003eUIBackgroundModes\u003c/key\u003e\n\u003carray\u003e\n  \u003cstring\u003eaudio\u003c/string\u003e\n  \u003cstring\u003elocation\u003c/string\u003e\n\u003c/array\u003e\n```\n\nPlace your secret token in a `.netrc` file in your OS home directory that contains this:\n\n```\nmachine api.mapbox.com\nlogin mapbox\npassword \u003cINSERT SECRET TOKEN\u003e\n```\n\nAdd the following to your ios podfile -\n\n```ruby\n  pre_install do |installer|\n    $RNMBNAV.pre_install(installer)\n    # any other pre install hooks here\n  end\n\n  post_install do |installer|\n    $RNMBNAV.post_install(installer)\n    # any other post install hooks here\n  end\n```\n\n\u003cdetails\u003e\n\u003csummary\u003epodfile example\u003c/summary\u003e\n\n```ruby\nrequire_relative '../node_modules/react-native/scripts/react_native_pods'\nrequire_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'\n\nplatform :ios, '10.0'\ninstall! 'cocoapods', :disable_input_output_paths =\u003e true\n\ntarget 'AwesomeProject' do\n  config = use_native_modules!\n\n  use_react_native!(:path =\u003e config[\"reactNativePath\"])\n\n  target 'AwesomeProjectTests' do\n    inherit! :complete\n    # Pods for testing\n  end\n\n  pre_install do |installer|\n    $RNMBNAV.pre_install(installer)\n  end\n\n  # Enables Flipper.\n  #\n  # Note that if you have use_frameworks! enabled, Flipper will not work and\n  # you should disable these next few lines.\n  use_flipper!\n  post_install do |installer|\n    flipper_post_install(installer)\n    $RNMBNAV.post_install(installer)\n  end\nend\n\ntarget 'AwesomeProject-tvOS' do\n  # Pods for AwesomeProject-tvOS\n\n  target 'AwesomeProject-tvOSTests' do\n    inherit! :search_paths\n    # Pods for testing\n  end\nend\n```\n\n\u003c/details\u003e\n\nNow you are ready to install the cocoapod:\n\n```\ncd ios \u0026\u0026 pod install\n```\n\nIf 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:\n\n`install! 'cocoapods', :disable_input_output_paths =\u003e true`\n\nIf 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 -\n\n\u003cdetails\u003e\n\u003csummary\u003e\nLines 85 thru 89\n\u003c/summary\u003e\n\n```sh\n#install_dsym \"${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/MapboxMobileEvents.framework.dSYM\"\n#install_bcsymbolmap \"${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/93C58D95-90B9-30C8-8F60-4BDE32FD7E8E.bcsymbolmap\"\n#install_bcsymbolmap \"${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/BB87D8DD-493F-37AA-BD21-2BC609B8311B.bcsymbolmap\"\n#install_bcsymbolmap \"${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/B184533A-B4A2-3D2F-AD72-A6C33D9914F4.bcsymbolmap\"\n#install_bcsymbolmap \"${PODS_ROOT}/@react-native-mapbox-gl-mapbox-static/dynamic/E2FE4B9E-73E5-34BF-B8B9-8FECEBE04D8D.bcsymbolmap\"\n```\n\n\u003c/details\u003e\n\nFor more information you can read the [docs provided by Mapbox](https://docs.mapbox.com/ios/navigation/overview/#configure-credentials).\n\n---\n\n### Android Specific Instructions\n\nPlace your secret token in your android app's top level `gradle.properties` file:\n\n```\nMAPBOX_DOWNLOADS_TOKEN=SECRET_TOKEN_HERE\n```\n\nOpen up your _project-level_ `build.gradle` file. Declare the Mapbox Downloads API's `releases/maven` endpoint in the `repositories` block.\n\n```gradle\nallprojects {\n    repositories {\n        maven {\n            url 'https://api.mapbox.com/downloads/v2/releases/maven'\n            authentication {\n                basic(BasicAuthentication)\n            }\n            credentials {\n                // Do not change the username below.\n                // This should always be `mapbox` (not your username).\n                username = \"mapbox\"\n                // Use the secret token you stored in gradle.properties as the password\n                password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: \"\"\n            }\n        }\n    }\n}\n```\n\nPlace your public token in your project's `android/app/src/main/AndroidManifest.xml`\n\n```xml\n\u003c!-- This should be a child of the application tag --\u003e\n\u003cmeta-data android:name=\"MAPBOX_ACCESS_TOKEN\"\n    android:value=\"PUBLIC_TOKEN_HERE\" /\u003e\n```\n\nFor more information you can read the [docs provided by Mapbox](https://docs.mapbox.com/android/navigation/overview/#configure-credentials).\n\n## Usage\n\n```jsx\nimport * as React from \"react\";\nimport { StyleSheet, View } from \"react-native\";\nimport MapboxNavigation from \"@fleetbase/react-native-mapbox-navigation\";\n\nexport const SomeComponent = () =\u003e {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cMapboxNavigation\n        origin={[-97.760288, 30.273566]}\n        destination={[-97.918842, 30.494466]}\n        shouldSimulateRoute\n        showsEndOfRouteFeedback\n        onLocationChange={(event) =\u003e {\n          const { latitude, longitude } = event.nativeEvent;\n        }}\n        onRouteProgressChange={(event) =\u003e {\n          const {\n            distanceTraveled,\n            durationRemaining,\n            fractionTraveled,\n            distanceRemaining,\n          } = event.nativeEvent;\n        }}\n        onError={(event) =\u003e {\n          const { message } = event.nativeEvent;\n        }}\n        onCancelNavigation={() =\u003e {\n          // User tapped the \"X\" cancel button in the nav UI\n          // or canceled via the OS system tray on android.\n          // Do whatever you need to here.\n        }}\n        onArrive={() =\u003e {\n          // Called when you arrive at the destination.\n        }}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n```\n\n### `MapboxNavigation` Props\n\n#### `origin` (**Required**)\n\nArray that contains the longitude and latitude for the starting point.\u003cbr\u003e\n`[$longitude, $latitude]`\n\n#### `destination` (**Required**)\n\nArray that contains the longitude and latitude for the destination point.\u003cbr\u003e\n`[$longitude, $latitude]`\n\n#### `shouldSimulateRoute`\n\nBoolean that controls route simulation. Set this as `true` to auto navigate which is useful for testing or demo purposes. Defaults to `false`.\n\n#### `showsEndOfRouteFeedback`\n\nBoolean 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.\n\n#### `mute`\n\nBoolean that toggles voice instructions. Defaults to `false`.\n\n#### `hideStatusView`\n\nBoolean 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`.\n\n#### `onLocationChange`\n\nFunction that is called frequently during route navigation. It receives `latitude` and `longitude` as parameters that represent the current location during navigation.\n\n#### `onRouteProgressChange`\n\nFunction that is called frequently during route navigation. It receives `distanceTraveled`, `durationRemaining`, `fractionTraveled`, and `distanceRemaining` as parameters.\n\n#### `onError`\n\nFunction that is called whenever an error occurs. It receives a `message` parameter that describes the error that occurred.\n\n#### `onCancelNavigation`\n\nFunction that is called whenever a user cancels navigation.\n\n#### `onArrive`\n\nFunction that is called when you arrive at the provided destination.\n\n## Contributing\n\nContributions are very welcome. Please check out the [contributing document](CONTRIBUTING.md).\n\n## License\n\nThe source code in this library is [MIT](LICENSE) 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffleetbase%2Freact-native-mapbox-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffleetbase%2Freact-native-mapbox-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffleetbase%2Freact-native-mapbox-navigation/lists"}