{"id":28919485,"url":"https://github.com/googlemaps/react-native-navigation-sdk","last_synced_at":"2026-02-11T19:07:57.579Z","repository":{"id":250946211,"uuid":"733194062","full_name":"googlemaps/react-native-navigation-sdk","owner":"googlemaps","description":"React Native library (Beta) for bringing Google Navigation SDK to Android and iOS apps using React.","archived":false,"fork":false,"pushed_at":"2026-02-04T13:56:50.000Z","size":2656,"stargazers_count":97,"open_issues_count":62,"forks_count":27,"subscribers_count":33,"default_branch":"main","last_synced_at":"2026-02-05T00:57:25.362Z","etag":null,"topics":["google-maps-api","google-maps-platform","google-navigation","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@googlemaps/react-native-navigation-sdk","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googlemaps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-12-18T19:19:05.000Z","updated_at":"2026-01-30T13:53:03.000Z","dependencies_parsed_at":"2025-01-07T11:32:51.228Z","dependency_job_id":"ba310328-c66e-48fd-bf17-94ae0467ce0e","html_url":"https://github.com/googlemaps/react-native-navigation-sdk","commit_stats":null,"previous_names":["googlemaps/react-native-navigation-sdk"],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/googlemaps/react-native-navigation-sdk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-native-navigation-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-native-navigation-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-native-navigation-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-native-navigation-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googlemaps","download_url":"https://codeload.github.com/googlemaps/react-native-navigation-sdk/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-native-navigation-sdk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29341739,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T18:58:20.535Z","status":"ssl_error","status_checked_at":"2026-02-11T18:56:44.814Z","response_time":97,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["google-maps-api","google-maps-platform","google-navigation","react-native"],"created_at":"2025-06-22T03:41:41.824Z","updated_at":"2026-02-11T19:07:57.574Z","avatar_url":"https://github.com/googlemaps.png","language":"TypeScript","readme":"# Google Navigation for React Native (Beta)\n\n**European Economic Area (EEA) developers**\n\nIf your billing address is in the European Economic Area, effective on 8 July 2025, the [Google Maps Platform EEA Terms of Service](https://cloud.google.com/terms/maps-platform/eea) will apply to your use of the Services. Functionality varies by region. [Learn more](https://developers.google.com/maps/comms/eea/faq).\n\n## Description\n\nThis repository contains a React Native plugin that provides a [Google Navigation](https://developers.google.com/maps/documentation/navigation) component for building native Android and iOS apps using React.\n\n\u003e [!NOTE]\n\u003e This package is in Beta until it reaches version 1.0. According to [semantic versioning](https://semver.org/#spec-item-4), breaking changes may be introduced before 1.0.\n\n## Requirements\n\n| | Android | iOS |\n| ------------------------------- | ------- | --------- |\n| **Minimum mobile OS supported** | SDK 24+ | iOS 16.0+ |\n\n* A React Native project\n* A Google Cloud project\n * If you are a Mobility Services developer, you must contact Sales as described in [Mobility services documentation](https://developers.google.com/maps/documentation/transportation-logistics/mobility).\n * If you are not a Mobility Services developer, refer to [Setup Google Cloud Project](https://developers.google.com/maps/documentation/navigation/android-sdk/cloud-setup) for instructions.\n* An [API key](https://console.cloud.google.com/google/maps-apis/credentials) from the project above\n * The API key must be configured for both Android and iOS. Refer to [Android Using Api Keys](https://developers.google.com/maps/documentation/navigation/android-sdk/get-api-key) and [iOS Using Api Keys](https://developers.google.com/maps/documentation/navigation/ios-sdk/get-api-key) respectively for instructions.\n* If targeting Android, [Google Play Services](https://developers.google.com/android/guides/overview) installed and enabled\n* [Attributions and licensing text](https://developers.google.com/maps/documentation/navigation/android-sdk/set-up-project#include_the_required_attributions_in_your_app) added to your app\n\n\u003e [!IMPORTANT]\n\u003e [Apply API restrictions](https://developers.google.com/maps/api-security-best-practices#api-restriction) to the API key to limit usage to \"Navigation SDK, \"Maps SDK for Android\", and \"Maps SDK for iOS\" for enhanced security and cost management. This helps guard against unauthorized use of your API key.\n\n## React Native Compatibility\n\nThe current version of this package has been tested and verified to work with the following React Native versions: \n\n**0.83.1, 0.82.1, 0.81.5, 0.80.3, 0.79.6**\n\n\u003e [!IMPORTANT]\n\u003e This package requires React Native 0.79+ with the new architecture (Fabric \u0026 TurboModules) enabled. Make sure the new architecture is enabled in your project configuration as shown in the [Installation](#installation) section.\n\n\u003e [!NOTE]\n\u003e React Native 0.78.x and below are not supported due to Kotlin version incompatibility. If you need to use older React Native versions, please use version 0.13.x of this package with the old architecture.\n\n\u003e [!NOTE]\n\u003e For users upgrading from versions prior to 0.14.0, please refer to the [Migration Guide](./MIGRATING.md) for instructions on migrating to the new architecture and updated API.\n\n## Installation\n\nThis package is listed on NPM as [@googlemaps/react-native-navigation-sdk](https://www.npmjs.com/package/@googlemaps/react-native-navigation-sdk). Install it with:\n\n```shell\nnpm i @googlemaps/react-native-navigation-sdk\n```\n\nIn your TSX or JSX file, import the components you need:\n\n```tsx\nimport { NavigationView } from '@googlemaps/react-native-navigation-sdk';\n```\n\n### Android\n\n#### Enable new architecture\n\nThis package requires React Native's new architecture. Make sure new architecture is enabled in your `android/gradle.properties` file:\n\n```groovy\nnewArchEnabled=true\n```\n\n#### Enable Jetifier\n\nTo ensure compatibility with AndroidX, enable Jetifier in your `android/gradle.properties` file:\n\n```groovy\n# Automatically convert third-party libraries to use AndroidX\nandroid.enableJetifier=true\n```\n\n#### Enable Core Library Desugaring\n\nCore library desugaring **must be enabled** for your Android project, regardless of your minSdkVersion.\n\nTo enable desugaring, update your `android/app/build.gradle` file:\n\n```groovy\nandroid {\n ...\n compileOptions {\n coreLibraryDesugaringEnabled true\n ...\n }\n}\n\ndependencies {\n coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs_nio:2.0.4'\n}\n```\n\n#### Minimum SDK Requirements for Android\n\nThe `minSdkVersion` for your Android project must be set to 24 or higher in `android/app/build.gradle`:\n\n```groovy\nandroid {\n defaultConfig {\n minSdkVersion 24\n }\n}\n```\n\n#### Set Google Maps API Key\n\nTo securely store your API key, it is recommended to use the [Google Maps Secrets Gradle Plugin](https://developers.google.com/maps/documentation/android-sdk/secrets-gradle-plugin). This plugin helps manage API keys without exposing them in your app's source code.\n\nSee example configuration for secrets plugin at example applications [build.gradle](./example/android/app/build.gradle) file.\n\n### iOS\n\n#### Enable new architecture\n\nThis package requires React Native's new architecture. Make sure new architecture is enabled in your `ios/Podfile`:\n\n```ruby\nENV['RCT_NEW_ARCH_ENABLED'] = '1'\n```\n\n#### Set Google Maps API Key\n\nTo set up, specify your API key in the application delegate `ios/Runner/AppDelegate.m`:\n\n```objective-c\n#import \u003cGoogleMaps/GoogleMaps.h\u003e\n\n@implementation AppDelegate\n\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n [GMSServices provideAPIKey:@\"API_KEY\"];\n return [super application:application didFinishLaunchingWithOptions:launchOptions];\n}\n\n```\n\n## Usage\n\n### Initializing Navigation\nWrap application with the `NavigationProvider` component. This will provide the necessary context for navigation throughout your app.\n\n```tsx\nimport React from 'react';\nimport {\n NavigationProvider,\n TaskRemovedBehavior,\n} from '@googlemaps/react-native-navigation-sdk';\n\nconst App = () =\u003e {\n return (\n \u003cNavigationProvider\n termsAndConditionsDialogOptions={{\n title: 'Terms and Conditions',\n companyName: 'Your Company Name',\n showOnlyDisclaimer: false,\n uiParams: { // Optional UI customization\n backgroundColor: '#FFFFFF',\n titleColor: 'rgba(0,0,0,1)',\n },\n }}\n taskRemovedBehavior={TaskRemovedBehavior.CONTINUE_SERVICE}\n \u003e\n {/* Add your application components here */}\n \u003c/NavigationProvider\u003e\n );\n};\n\nexport default App;\n```\n\n#### Terms and Conditions Dialog Options\n\nThe `termsAndConditionsDialogOptions` prop configures the Terms and Conditions dialog that must be shown before navigation can be used:\n\n| Property | Type | Description |\n| -------------------- | ---------------------------- | ------------------------------------------------------------------------------ |\n| `title` | `string` | The title of the Terms and Conditions dialog |\n| `companyName` | `string` | Your company name displayed in the dialog |\n| `showOnlyDisclaimer` | `boolean` | If `true`, shows only the driver awareness disclaimer |\n| `uiParams` | `TermsAndConditionsUIParams` | Optional UI customization (colors in hex format like `#RRGGBB` or `#AARRGGBB`) |\n\n#### Task Removed Behavior\n\nThe `taskRemovedBehavior` prop defines how the navigation should behave when a task is removed from the recent apps list on Android. It can either:\n\n- `CONTINUE_SERVICE`: Continue running in the background. (default)\n- `QUIT_SERVICE`: Shut down immediately.\n\nThis prop has only an effect on Android.\n\n### Using NavigationController\n\nYou can use the `useNavigation` hook to access the `NavigationController` and control navigation within your components. The `useNavigation` hook also provides methods to add and remove listeners.\n\n#### Showing Terms and Conditions Dialog\n\nBefore initializing navigation, you should show the Terms and Conditions dialog to the user. This is required for using the Navigation SDK. The dialog uses the options configured in `NavigationProvider`.\n\n```tsx\nconst { navigationController } = useNavigation();\n\nconst showTermsDialog = async () =\u003e {\n // Uses options from NavigationProvider by default\n const accepted = await navigationController.showTermsAndConditionsDialog();\n return accepted;\n};\n\n// You can also override specific options:\nconst showTermsDialogWithOverride = async () =\u003e {\n const accepted = await navigationController.showTermsAndConditionsDialog({\n showOnlyDisclaimer: true, // Override specific options\n });\n return accepted;\n};\n```\n\n#### Initializing Navigation\n\n```tsx\nimport {\n useNavigation,\n NavigationSessionStatus,\n} from '@googlemaps/react-native-navigation-sdk';\n\nconst { navigationController } = useNavigation();\n\nconst initializeNavigation = useCallback(async () =\u003e {\n // First show Terms and Conditions dialog (uses options from NavigationProvider)\n const termsAccepted = await navigationController.showTermsAndConditionsDialog();\n\n if (!termsAccepted) {\n console.log('User declined terms');\n return;\n }\n\n // Initialize the navigation session and check the status\n const status = await navigationController.init();\n \n switch (status) {\n case NavigationSessionStatus.OK:\n console.log('Navigation initialized successfully');\n break;\n case NavigationSessionStatus.NOT_AUTHORIZED:\n console.error('API key not authorized');\n break;\n case NavigationSessionStatus.TERMS_NOT_ACCEPTED:\n console.error('Terms not accepted');\n break;\n case NavigationSessionStatus.LOCATION_PERMISSION_MISSING:\n console.error('Location permission required');\n break;\n case NavigationSessionStatus.NETWORK_ERROR:\n console.error('Network error');\n break;\n default:\n console.error('Unknown error:', status);\n }\n}, [navigationController]);\n```\n\n\u003e [!NOTE]\n\u003e Navigation can be controlled separately from the navigation views allowing navigation to be started and stopped independently.\n\n\n#### Starting Navigation\nTo start navigation, set a destination and start guidance:\n\n```tsx\ntry {\n const waypoint = {\n title: 'Destination',\n position: {\n lat: 37.4220679,\n lng: -122.0859545,\n },\n };\n\n const routingOptions = {\n travelMode: TravelMode.DRIVING,\n avoidFerries: false,\n avoidTolls: false,\n };\n\n const displayOptions: DisplayOptions = {\n showDestinationMarkers: true,\n showStopSigns: true,\n showTrafficLights: true,\n };\n\n await navigationController.setDestinations([waypoint], { routingOptions, displayOptions });\n await navigationController.startGuidance();\n} catch (error) {\n console.error('Error starting navigation', error);\n}\n\n```\n\n\u003e [!NOTE]\n\u003e Route calculation is only available after the Navigation SDK has successfully acquired the user's location. If the location is not yet available when trying to set a destination, the SDK will return a RouteStatus.LOCATION_DISABLED status.\n\u003e\n\u003e To avoid this, ensure that the SDK has provided a valid user location before calling the setDestinations function. You can do this by subscribing to the onLocationChanged navigation callback and waiting for the first valid location update.\n\n#### Using Route Tokens\n\nYou can use a pre-computed route from the [Routes API](https://developers.google.com/maps/documentation/routes) by providing a route token. This is useful when you want to ensure the navigation follows a specific route that was calculated server-side.\n\nTo use a route token:\n\n1. Pass the token using `routeTokenOptions` instead of `routingOptions`\n2. **Important:** The waypoints passed to `setDestinations` must match the waypoints used when generating the route token\n\n```tsx\nconst waypoint = {\n title: 'Destination',\n position: { lat: 37.7749, lng: -122.4194 },\n};\n\nconst routeTokenOptions = {\n routeToken: 'your-route-token-from-routes-api',\n travelMode: TravelMode.DRIVING, // Must match the travel mode used to generate the token\n};\n\nawait navigationController.setDestinations([waypoint], { routeTokenOptions });\nawait navigationController.startGuidance();\n```\n\n\u003e [!IMPORTANT]\n\u003e `routingOptions` and `routeTokenOptions` are mutually exclusive. Providing both will throw an error.\n\n\n#### Adding navigation listeners\n\n```tsx\nconst { \n navigationController, \n removeAllListeners,\n setOnArrival,\n setOnRouteChanged,\n setOnNavigationReady,\n} = useNavigation();\n\nuseEffect(() =\u003e {\n setOnArrival((event: ArrivalEvent) =\u003e {\n if (event.isFinalDestination) {\n console.log('Final destination reached');\n navigationController.stopGuidance();\n } else {\n console.log('Continuing to the next destination');\n navigationController.continueToNextDestination();\n navigationController.startGuidance();\n }\n });\n setOnRouteChanged(() =\u003e console.log('Route changed'));\n setOnNavigationReady(() =\u003e console.log('Navigation ready'));\n\n // On cleanup, removeAllListeners() clears all at once.\n // Alternatively, clear individual listeners: setOnArrival(null)\n return () =\u003e removeAllListeners();\n}, [\n navigationController,\n setOnArrival,\n setOnRouteChanged,\n setOnNavigationReady,\n removeAllListeners,\n]);\n```\n\nSee [Navigation Listener Setters](#navigation-listener-setters) for a complete list of available listener setters.\n\n### Add a navigation view\n\nYou can now add a `NavigationView` component to your application..\n\nThe view can be controlled with the `ViewController` (Navigation and MapView) that are retrieved from the `onMapViewControllerCreated` and `onNavigationViewControllerCreated` (respectively).\n\nThe `NavigationView` compoonent should be used within a View with a bounded size. Using it\nin an unbounded widget will cause the application to behave unexpectedly.\n\n```tsx\n// Permissions must have been granted by this point.\n\n\u003cNavigationView\n mapId=\"your-map-id-here\" // Optional: Your map ID configured in Google Cloud Console\n androidStylingOptions={{\n primaryDayModeThemeColor: '#34eba8',\n headerDistanceValueTextColor: '#76b5c5',\n headerInstructionsFirstRowTextSize: '20f',\n }}\n iOSStylingOptions={{\n navigationHeaderPrimaryBackgroundColor: '#34eba8',\n navigationHeaderDistanceValueTextColor: '#76b5c5',\n }}\n onMapReady={() =\u003e console.log('Map is ready')}\n onRecenterButtonClick={() =\u003e console.log('Recenter button clicked')}\n onMapViewControllerCreated={setMapViewController}\n onNavigationViewControllerCreated={setNavigationViewController}\n/\u003e\n```\n\n### Add a map view\n\nYou can also add a bare `MapView` that works as a normal map view without navigation functionality. `MapView` only need a `MapViewController` to be controlled.\n\n```tsx\n\u003cMapView\n mapId=\"your-map-id-here\" // Optional: Your map ID configured in Google Cloud Console\n onMapReady={() =\u003e console.log('Map is ready')}\n onMapClick={(latLng) =\u003e console.log('Map clicked at', latLng)}\n onMapViewControllerCreated={setMapViewController}\n/\u003e\n```\n\n### Control light and dark modes\n\nUse the `mapColorScheme` prop on both `NavigationView` and `MapView` to force the map tiles into light, dark, or system-following mode.\n\nFor the navigation UI, pass the `navigationNightMode` prop to `NavigationView` to configure the initial lighting mode for navigation session.\n\n\u003e [!NOTE]\n\u003e When navigation UI is enabled, `mapColorScheme` does not affect the view styling. To control the style of the navigation UI, use the `navigationNightMode` prop on `NavigationView` instead.\n\n### Requesting and handling permissions\n\nThe Google Navigation SDK React Native library offers functionalities that necessitate specific permissions from the mobile operating system. These include, but are not limited to, location services, background execution, and receiving background location updates.\n\n\u003e [!NOTE]\n\u003e The management of these permissions falls outside the scope of the Navigation SDKs for Android and iOS. As a developer integrating these SDKs into your applications, you are responsible for requesting and obtaining the necessary permissions from the users of your app.\n\nYou can see example of handling permissions in the [App.tsx](./example/src/App.tsx) file of the sample application:\n\n```tsx\nimport {request, PERMISSIONS, RESULTS} from 'react-native-permissions';\n\n// ...\n\n// Request permission for accessing the device's location.\nconst requestPermissions = async () =\u003e {\n const result = await request(\n Platform.OS === \"android\" ?\n PERMISSIONS.ANDROID.ACCESS_COARSE_LOCATION :\n PERMISSIONS.IOS.LOCATION_ALWAYS,\n );\n\n if (result === RESULTS.GRANTED) {\n setArePermissionsApproved(true);\n } else {\n Snackbar.show({\n text: 'Permissions are needed to proceed with the app. Please re-open and accept.',\n duration: Snackbar.LENGTH_SHORT,\n });\n }\n};\n```\n\n### Changing the NavigationView size\n\nBy default, `NavigationView` uses all the available space provided to it. To adjust the size of the NavigationView, use the `style` prop.\n\n```tsx\n \u003cNavigationView\n style={{width: 200, height: 50%}}\n ...\n /\u003e\n```\n\n### Sample application\n\nSee the [example](./example) directory for a complete navigation sample app.\n\n## Support for Android Auto and Apple CarPlay\nThis plugin is compatible with both Android Auto and Apple CarPlay infotainment systems. For more details, please refer to the respective platform documentation:\n\n- [Android Auto documentation](./ANDROIDAUTO.md)\n- [CarPlay documentation](./CARPLAY.md)\n\n## API Reference\n\n### View Props\n\nBoth `NavigationView` and `MapView` support the following props. Props marked with **Nav** are only available on `NavigationView`.\n\n#### Configuration Props\n\n| Prop | Type | Default | Nav | Description |\n| ------------------------------- | ------------------------------- | --------------- | :---: | ----------------------------------------------------------- |\n| `style` | `ViewStyle` | `{ flex: 1 }` | | Style applied to the view container |\n| `mapId` | `string` | - | | Cloud-based map styling ID from Google Cloud Console |\n| `mapColorScheme` | `MapColorScheme` | `FOLLOW_SYSTEM` | | Color scheme for map tiles (FOLLOW_SYSTEM, LIGHT, DARK) |\n| `mapStyle` | `string` | - | | Custom map styling via JSON |\n| `mapPadding` | `Padding` | - | | Padding applied to the map in pixels |\n| `initialCameraPosition` | `CameraPosition` | - | | Initial camera position when map loads |\n| `minZoomLevel` | `number` | - | | Minimum allowed zoom level |\n| `maxZoomLevel` | `number` | - | | Maximum allowed zoom level |\n| `navigationNightMode` | `NavigationNightMode` | `AUTO` | ✓ | Night mode for navigation UI (AUTO, FORCE_DAY, FORCE_NIGHT) |\n| `navigationUIEnabledPreference` | `NavigationUIEnabledPreference` | `AUTOMATIC` | ✓ | Initial navigation UI visibility (AUTOMATIC, DISABLED) |\n| `androidStylingOptions` | `AndroidStylingOptions` | - | ✓ | Android-specific navigation UI styling |\n| `iOSStylingOptions` | `iOSStylingOptions` | - | ✓ | iOS-specific navigation UI styling |\n\n#### UI Control Props\n\n| Prop | Type | Default | Nav | Description |\n| ----------------------------- | --------- | ------- | :---: | ----------------------------------------------------- |\n| `compassEnabled` | `boolean` | `true` | | Show compass when map is rotated |\n| `mapToolbarEnabled` | `boolean` | `true` | | Show map toolbar (Google Maps button) |\n| `myLocationButtonEnabled` | `boolean` | `true` | | Show the my location button |\n| `myLocationEnabled` | `boolean` | `false` | | Show the my location indicator (requires permissions) |\n| `indoorEnabled` | `boolean` | `true` | | Enable indoor maps |\n| `trafficEnabled` | `boolean` | `false` | | Show traffic data on the map |\n| `buildingsEnabled` | `boolean` | `true` | | Show 3D buildings |\n| `zoomControlsEnabled` | `boolean` | `false` | | Show zoom controls (Android only) |\n| `headerEnabled` | `boolean` | `true` | ✓ | Show navigation header with turn-by-turn instructions |\n| `footerEnabled` | `boolean` | `true` | ✓ | Show navigation footer |\n| `tripProgressBarEnabled` | `boolean` | `true` | ✓ | Show trip progress bar |\n| `speedometerEnabled` | `boolean` | `false` | ✓ | Show speedometer |\n| `speedLimitIconEnabled` | `boolean` | `true` | ✓ | Show speed limit icon |\n| `recenterButtonEnabled` | `boolean` | `true` | ✓ | Show recenter button |\n| `reportIncidentButtonEnabled` | `boolean` | `true` | ✓ | Show report incident button |\n| `trafficPromptsEnabled` | `boolean` | `true` | ✓ | Enable traffic disruption callouts and alerts |\n| `trafficIncidentCardsEnabled` | `boolean` | `true` | ✓ | Enable traffic incident detail cards on tap |\n\n#### Gesture Props\n\n| Prop | Type | Default | Description |\n| ----------------------------------------- | --------- | ------- | -------------------------------------------- |\n| `rotateGesturesEnabled` | `boolean` | `true` | Enable rotate gestures |\n| `scrollGesturesEnabled` | `boolean` | `true` | Enable scroll/pan gestures |\n| `scrollGesturesDuringRotateOrZoomEnabled` | `boolean` | `true` | Enable scroll gestures during rotate or zoom |\n| `tiltGesturesEnabled` | `boolean` | `true` | Enable tilt gestures |\n| `zoomGesturesEnabled` | `boolean` | `true` | Enable zoom gestures |\n\n#### Callback Props\n\n| Prop | Type | Nav | Description |\n| ----------------------------------- | ------------------------------------------------ | :---: | ------------------------------------------------ |\n| `onMapReady` | `() =\u003e void` | | Called when the map is ready to use |\n| `onMapClick` | `(latLng: LatLng) =\u003e void` | | Called when the map is clicked |\n| `onMarkerClick` | `(marker: Marker) =\u003e void` | | Called when a marker is clicked |\n| `onPolylineClick` | `(polyline: Polyline) =\u003e void` | | Called when a polyline is clicked |\n| `onPolygonClick` | `(polygon: Polygon) =\u003e void` | | Called when a polygon is clicked |\n| `onCircleClick` | `(circle: Circle) =\u003e void` | | Called when a circle is clicked |\n| `onGroundOverlayClick` | `(overlay: GroundOverlay) =\u003e void` | | Called when a ground overlay is clicked |\n| `onMarkerInfoWindowTapped` | `(marker: Marker) =\u003e void` | | Called when a marker info window is tapped |\n| `onMapViewControllerCreated` | `(controller: MapViewController) =\u003e void` | | Called with the map controller instance |\n| `onNavigationViewControllerCreated` | `(controller: NavigationViewController) =\u003e void` | ✓ | Called with the navigation controller instance |\n| `onRecenterButtonClick` | `() =\u003e void` | ✓ | Called when recenter button is clicked |\n| `onPromptVisibilityChanged` | `(visible: boolean) =\u003e void` | ✓ | Called when navigation prompt visibility changes |\n\n### MapViewController Methods\n\nThe `MapViewController` is provided via the `onMapViewControllerCreated` callback and allows programmatic control of the map.\n\n| Method | Returns | Description |\n| ------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------ |\n| `clearMapView()` | `void` | Clear all markers, polylines, polygons, and circles from the map |\n| `addMarker(options: MarkerOptions)` | `Promise\u003cMarker\u003e` | Add or update a marker. If `options.id` matches an existing marker, it is updated |\n| `addPolyline(options: PolylineOptions)` | `Promise\u003cPolyline\u003e` | Add or update a polyline. If `options.id` matches an existing polyline, it is updated |\n| `addPolygon(options: PolygonOptions)` | `Promise\u003cPolygon\u003e` | Add or update a polygon. If `options.id` matches an existing polygon, it is updated |\n| `addCircle(options: CircleOptions)` | `Promise\u003cCircle\u003e` | Add or update a circle. If `options.id` matches an existing circle, it is updated |\n| `addGroundOverlay(options: GroundOverlayOptions)` | `Promise\u003cGroundOverlay\u003e` | Add or update a ground overlay. If `options.id` matches an existing overlay, it is updated |\n| `removeMarker(id: string)` | `void` | Remove a marker by its ID |\n| `removePolyline(id: string)` | `void` | Remove a polyline by its ID |\n| `removePolygon(id: string)` | `void` | Remove a polygon by its ID |\n| `removeCircle(id: string)` | `void` | Remove a circle by its ID |\n| `removeGroundOverlay(id: string)` | `void` | Remove a ground overlay by its ID |\n| `moveCamera(position: CameraPosition)` | `void` | Move camera to a new position |\n| `setZoomLevel(level: number)` | `void` | Set the map zoom level |\n| `setPadding(padding: Padding)` | `void` | Set padding on the map |\n| `getCameraPosition()` | `Promise\u003cCameraPosition\u003e` | Get the current camera position |\n| `getMyLocation()` | `Promise\u003cLocation\u003e` | Get the current user location |\n| `getUiSettings()` | `Promise\u003cUISettings\u003e` | Get the current UI settings state |\n| `isMyLocationEnabled()` | `Promise\u003cboolean\u003e` | Check if my location is enabled |\n\n### NavigationViewController Methods\n\nThe `NavigationViewController` is provided via the `onNavigationViewControllerCreated` callback and allows control of navigation-specific features.\n\n| Method | Returns | Description |\n| --------------------------------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| `showRouteOverview()` | `void` | Show an overview of the remaining route |\n| `setNavigationUIEnabled(enabled: boolean)` | `Promise\u003cvoid\u003e` | Enable or disable the navigation UI |\n| `setFollowingPerspective(perspective: CameraPerspective)` | `Promise\u003cvoid\u003e` | Set camera perspective (TILTED, TOP_DOWN_NORTH_UP, TOP_DOWN_HEADING_UP) |\n\n### NavigationController (useNavigation hook)\n\nThe `useNavigation()` hook provides access to the `NavigationController` and listener setters for navigation events.\n\n```tsx\nimport { useNavigation } from '@googlemaps/react-native-navigation-sdk';\n\nconst { \n navigationController, \n removeAllListeners,\n setOnArrival,\n setOnRouteChanged,\n // ... other listener setters\n} = useNavigation();\n```\n\n#### useNavigation Return Values\n\n| Property | Type | Description |\n| ---------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |\n| `navigationController` | `NavigationController` | Controller for navigation operations |\n| `removeAllListeners` | `() =\u003e void` | Remove all registered navigation listeners |\n| `setOn[EventName]` | `(listener \\| null \\| undefined) =\u003e void` | Listener setters for each event (e.g., `setOnArrival`, `setOnRouteChanged`). See [full list](#navigation-listener-setters) |\n\n\u003e [!TIP]\n\u003e To remove a specific listener, pass `null` or `undefined` to its setter: `setOnArrival(null)`\n\n#### NavigationController Methods\n\n| Method | Returns | Description |\n| ----------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------ |\n| `areTermsAccepted()` | `Promise\u003cboolean\u003e` | Check if terms and conditions have been accepted |\n| `showTermsAndConditionsDialog(optionsOverride?)` | `Promise\u003cboolean\u003e` | Show Terms and Conditions dialog (uses NavigationProvider options with optional overrides) |\n| `resetTermsAccepted()` | `Promise\u003cvoid\u003e` | Reset the Terms and Conditions acceptance state |\n| `init()` | `Promise\u003cNavigationSessionStatus\u003e` | Initialize the navigation session (returns status) |\n| `cleanup()` | `Promise\u003cvoid\u003e` | Clean up the navigation controller |\n| `getNavSDKVersion()` | `Promise\u003cstring\u003e` | Get the Navigation SDK version |\n| `setDestinations(destinations: Waypoint[], routingOptions?, displayOptions?)` | `Promise\u003cRouteStatus\u003e` | Set navigation destinations |\n| `setDestination(waypoint: Waypoint, routingOptions?, displayOptions?)` | `Promise\u003cRouteStatus\u003e` | Set a single navigation destination |\n| `clearDestinations()` | `Promise\u003cvoid\u003e` | Clear all destinations |\n| `continueToNextDestination()` | `Promise\u003cvoid\u003e` | Navigate to the next destination in the list |\n| `startGuidance()` | `Promise\u003cvoid\u003e` | Start turn-by-turn navigation guidance |\n| `stopGuidance()` | `Promise\u003cvoid\u003e` | Stop navigation guidance |\n| `getCurrentTimeAndDistance()` | `Promise\u003cTimeAndDistance \\| null\u003e` | Get time and distance to current destination |\n| `getCurrentRouteSegment()` | `Promise\u003cRouteSegment \\| null\u003e` | Get the current route segment |\n| `getRouteSegments()` | `Promise\u003cRouteSegment[]\u003e` | Get all route segments |\n| `getTraveledPath()` | `Promise\u003cLatLng[]\u003e` | Get the path traveled so far |\n| `setAudioGuidanceType(type: AudioGuidanceType)` | `Promise\u003cvoid\u003e` | Set audio guidance type (SILENT, ALERTS_ONLY, VOICE_ALERTS_AND_GUIDANCE) |\n| `setSpeedAlertOptions(options: SpeedAlertOptions)` | `Promise\u003cvoid\u003e` | Configure speed alert thresholds |\n| `setAbnormalTerminatingReportingEnabled(enabled: boolean)` | `void` | Enable/disable abnormal termination reporting |\n| `startUpdatingLocation()` | `Promise\u003cvoid\u003e` | Start receiving location updates |\n| `stopUpdatingLocation()` | `void` | Stop receiving location updates |\n| `setBackgroundLocationUpdatesEnabled(enabled: boolean)` | `void` | Enable/disable background location updates (iOS only) |\n| `setTurnByTurnLoggingEnabled(enabled: boolean)` | `void` | Enable/disable turn-by-turn logging |\n| `simulator` | `Simulator` | Access the navigation simulator for testing |\n\n#### Simulator Methods\n\nThe `Simulator` object is available via `navigationController.simulator` and provides methods for testing navigation without actual GPS movement.\n\n```tsx\nconst { navigationController } = useNavigation();\n\n// Simulate driving along the current route at 5x speed\nnavigationController.simulator.simulateLocationsAlongExistingRoute({ speedMultiplier: 5 });\n\n// Or set a specific location\nnavigationController.simulator.simulateLocation({ lat: 37.7749, lng: -122.4194 });\n```\n\n| Method | Returns | Description |\n| --------------------------------------------------------------------------- | ------- | ------------------------------------------------------- |\n| `simulateLocationsAlongExistingRoute(options: { speedMultiplier: number })` | `void` | Simulate driving along the current route at given speed |\n| `simulateLocation(location: LatLng)` | `void` | Set user location to a specific coordinate |\n| `pauseLocationSimulation()` | `void` | Pause the current location simulation |\n| `resumeLocationSimulation()` | `void` | Resume a paused location simulation |\n| `stopLocationSimulation()` | `void` | Stop the current location simulation |\n\n#### Navigation Listener Setters\n\nSet listeners using the individual setter functions returned by `useNavigation()`. Each setter accepts a callback, or `null`/`undefined` to clear the listener:\n\n```tsx\nconst { setOnArrival, setOnRouteChanged, removeAllListeners } = useNavigation();\n\nuseEffect(() =\u003e {\n setOnArrival((event) =\u003e {\n console.log('Arrived at', event.waypoint);\n if (event.isFinalDestination) {\n navigationController.stopGuidance();\n }\n });\n setOnRouteChanged(() =\u003e console.log('Route changed'));\n \n // Use removeAllListeners() to clear all listeners at once on cleanup\n // Alternatively, clear individual listeners: setOnArrival(null)\n return () =\u003e removeAllListeners();\n}, [setOnArrival, setOnRouteChanged, removeAllListeners]);\n\n// To remove a single listener:\nsetOnArrival(null);\n```\n\n| Listener Setter | Event Data | Description |\n| ------------------------------------- | ----------------------------------------------------- | ----------------------------------------------- |\n| `setOnStartGuidance` | `void` | Called when guidance starts |\n| `setOnArrival` | `{ waypoint: Waypoint, isFinalDestination: boolean }` | Called when arriving at a destination |\n| `setOnLocationChanged` | `{ location: Location }` | Called when location changes (road-snapped) |\n| `setOnRawLocationChanged` | `{ location: Location }` | Called when raw GPS location changes |\n| `setOnNavigationReady` | `void` | Called when navigation is ready |\n| `setOnNavigationInitError` | `{ errorCode: NavigationInitErrorCode }` | Called when navigation initialization fails |\n| `setOnRouteStatusResult` | `RouteStatus` | Called with route calculation status |\n| `setOnRouteChanged` | `void` | Called when the route changes |\n| `setOnReroutingRequestedByOffRoute` | `void` | Called when rerouting is triggered by off-route |\n| `setOnTrafficUpdated` | `void` | Called when traffic data is updated |\n| `setOnRemainingTimeOrDistanceChanged` | `void` | Called when remaining time or distance changes |\n| `setOnTurnByTurn` | `{ navInfo: NavInfo }` | Called with turn-by-turn navigation info |\n\n### MapViewAutoController (useNavigationAuto hook)\n\nFor Android Auto and CarPlay support, the `useNavigationAuto()` hook provides a `MapViewAutoController` and auto-specific listener setters:\n\n```tsx\nimport { useNavigationAuto } from '@googlemaps/react-native-navigation-sdk';\n\nconst { \n mapViewAutoController, \n removeAllListeners,\n setOnAutoScreenAvailabilityChanged,\n setOnCustomNavigationAutoEvent,\n} = useNavigationAuto();\n```\n\n#### useNavigationAuto Return Values\n\n| Property | Type | Description |\n| ------------------------------------ | ----------------------------------------------------------------------------- | ------------------------------------------- |\n| `mapViewAutoController` | `MapViewAutoController` | Controller for auto screen map operations |\n| `removeAllListeners` | `() =\u003e void` | Remove all registered auto listeners |\n| `setOnAutoScreenAvailabilityChanged` | `(listener: ((available: boolean) =\u003e void) \\| null \\| undefined) =\u003e void` | Set/clear auto screen availability listener |\n| `setOnCustomNavigationAutoEvent` | `(listener: ((event: CustomAutoEvent) =\u003e void) \\| null \\| undefined) =\u003e void` | Set/clear custom auto event listener |\n\nThe `MapViewAutoController` extends `MapViewController` with additional methods:\n\n| Method | Returns | Description |\n| ------------------------------- | ------------------ | -------------------------------------------------------- |\n| *All MapViewController methods* | - | All map control methods from MapViewController |\n| `cleanup()` | `void` | Clean up the auto screen resources |\n| `isAutoScreenAvailable()` | `Promise\u003cboolean\u003e` | Check if auto screen (Android Auto/CarPlay) is available |\n\nSee [Android Auto](./ANDROIDAUTO.md) and [CarPlay](./CARPLAY.md) documentation for platform-specific setup.\n\n## Known issues\n\n### Compatibility with other libraries\n\nThis package uses the Google Maps [Navigation SDK](https://mapsplatform.google.com/maps-products/navigation-sdk/) for Android and iOS, which includes a dependency on the `Google Maps SDK`. If your project includes other React Native libraries with `Google Maps SDK` dependencies, you may encounter build errors due to version conflicts. To avoid this, it's recommended to avoid using multiple packages with Google Maps dependencies.\n\n\u003e [!NOTE]\n\u003e This package provides a `MapView` component, which can be used as a classic Google Maps view without navigation. See [Add a map view](#add-a-map-view) for details.\n\n## Contributing\n\nSee the [Contributing guide](./CONTRIBUTING.md).\n\n## Terms of Service\n\nThis library uses Google Maps Platform services. Use of Google Maps Platform services through this library is subject to the [Google Maps Platform Terms of Service](https://cloud.google.com/maps-platform/terms).\n\nThis library is not a Google Maps Platform Core Service. Therefore, the Google Maps Platform Terms of Service (e.g. Technical Support Services, Service Level Agreements, and Deprecation Policy) do not apply to the code in this library.\n\n## Support\n\nThis package is offered via an open source license. It is not governed by the Google Maps Platform Support [Technical Support Services Guidelines](https://cloud.google.com/maps-platform/terms/tssg), the [SLA](https://cloud.google.com/maps-platform/terms/sla), or the [Deprecation Policy](https://cloud.google.com/maps-platform/terms) (however, any Google Maps Platform services used by the library remain subject to the Google Maps Platform Terms of Service).\n\nThis package adheres to [semantic versioning](https://semver.org/) to indicate when backwards-incompatible changes are introduced. Accordingly, while the library is in version 0.x, backwards-incompatible changes may be introduced at any time.\n\nIf you find a bug, or have a feature request, please [file an issue](https://github.com/googlemaps/react-native-navigation-sdk/issues) on GitHub. If you would like to get answers to technical questions from other Google Maps Platform developers, ask through one of our [developer community channels](https://developers.google.com/maps/developer-community). If you'd like to contribute, please check the [Contributing guide](https://github.com/googlemaps/react-native-navigation-sdk/blob/main/CONTRIBUTING.md).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglemaps%2Freact-native-navigation-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglemaps%2Freact-native-navigation-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglemaps%2Freact-native-navigation-sdk/lists"}