Description

Note

This package is in Beta until it reaches version 1.0. According tosemantic versioning, breaking changes may be introduced before 1.0.

Requirements

Important

Apply API restrictions 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.

React Native Compatibility

Important

This package does not yet support React Native's new architecture. Make sure the new architecture is disabled in your project configuration as shown in theInstallation section.

Installation

npm i @googlemaps/react-native-navigation-sdk

import{NavigationView}from'@googlemaps/react-native-navigation-sdk';

Android

Disable new architecture

newArchEnabled=false

Enable Jetifier

#Automatically convert third-party libraries to useAndroidXandroid.enableJetifier=true

Enable Core Library Desugaring

android {...    compileOptions {        coreLibraryDesugaringEnabledtrue...    }}dependencies {    coreLibraryDesugaring'com.android.tools:desugar_jdk_libs_nio:2.0.4'}

Minimum SDK Requirements for Android

android {    defaultConfig {        minSdkVersion24    }}

Set Google Maps API Key

iOS

Disable new architecture

ENV['RCT_NEW_ARCH_ENABLED']='0'

Set Google Maps API Key

#import<GoogleMaps/GoogleMaps.h>@implementationAppDelegate- (BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary *)launchOptions{  [GMSServicesprovideAPIKey:@"API_KEY"];return [superapplication:applicationdidFinishLaunchingWithOptions:launchOptions];}

Usage

Initializing Navigation

importReactfrom'react';import{NavigationProvider,TaskRemovedBehavior,typeTermsAndConditionsDialogOptions,}from'@googlemaps/react-native-navigation-sdk';consttermsAndConditionsDialogOptions:TermsAndConditionsDialogOptions={title:'Terms and Conditions Title',companyName:'Your Company Name',showOnlyDisclaimer:true,};constApp=()=>{return(<NavigationProvidertermsAndConditionsDialogOptions={termsAndConditionsDialogOptions}taskRemovedBehavior={TaskRemovedBehavior.CONTINUE_SERVICE}>{/* Add your application components here */}</NavigationProvider>);};exportdefaultApp;

Task Removed Behavior

Using NavigationController

Initializing Navigation

...const{ navigationController}=useNavigation();constinitializeNavigation=useCallback(async()=>{try{awaitnavigationController.init();console.log('Navigation initialized');}catch(error){console.error('Error initializing navigation',error);}},[navigationController]);

Note

Navigation can be controlled separately from the navigation views allowing navigation to be started and stopped independently.

Starting Navigation

try{constwaypoint={title:'Destination',position:{lat:37.4220679,lng:-122.0859545,},};constroutingOptions={travelMode:TravelMode.DRIVING,avoidFerries:false,avoidTolls:false,};constdisplayOptions:DisplayOptions={showDestinationMarkers:true,showStopSigns:true,showTrafficLights:true,};awaitnavigationController.setDestinations([waypoint],routingOptions,displayOptions);awaitnavigationController.startGuidance();}catch(error){console.error('Error starting navigation',error);}

Note

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.

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.

Adding navigation listeners

const{ navigationController, addListeners, removeListeners}=useNavigation();constonArrival=useCallback((event:ArrivalEvent)=>{if(event.isFinalDestination){console.log('Final destination reached');navigationController.stopGuidance();}else{console.log('Continuing to the next destination');navigationController.continueToNextDestination();navigationController.startGuidance();}},[navigationController]);constnavigationCallbacks=useMemo(()=>({    onArrival,// Add other callbacks here}),[onArrival]);useEffect(()=>{addListeners(navigationCallbacks);return()=>{removeListeners(navigationCallbacks);};},[navigationCallbacks,addListeners,removeListeners]);

Add a navigation view

// Permissions must have been granted by this point.<NavigationViewmapId="your-map-id-here"// Optional: Your map ID configured in Google Cloud ConsoleandroidStylingOptions={{primaryDayModeThemeColor:'#34eba8',headerDistanceValueTextColor:'#76b5c5',headerInstructionsFirstRowTextSize:'20f',}}iOSStylingOptions={{navigationHeaderPrimaryBackgroundColor:'#34eba8',navigationHeaderDistanceValueTextColor:'#76b5c5',}}navigationViewCallbacks={navigationViewCallbacks}mapViewCallbacks={mapViewCallbacks}onMapViewControllerCreated={setMapViewController}onNavigationViewControllerCreated={setNavigationViewController}termsAndConditionsDialogOptions={termsAndConditionsDialogOptions}/>

Add a map view

<MapViewmapId="your-map-id-here"// Optional: Your map ID configured in Google Cloud ConsolemapViewCallbacks={mapViewCallbacks}onMapViewControllerCreated={setMapViewController}/>

Control light and dark modes

Note

When navigation UI is enabled,mapColorScheme does not affect the view styling. To control the style of the navigation UI, use thenavigationNightMode prop onNavigationView instead.

Requesting and handling permissions

Note

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.

import{request,PERMISSIONS,RESULTS}from'react-native-permissions';// ...// Request permission for accessing the device's location.constrequestPermissions=async()=>{constresult=awaitrequest(Platform.OS==="android" ?PERMISSIONS.ANDROID.ACCESS_COARSE_LOCATION :PERMISSIONS.IOS.LOCATION_ALWAYS,);if(result===RESULTS.GRANTED){setArePermissionsApproved(true);}else{Snackbar.show({text:'Permissions are needed to proceed with the app. Please re-open and accept.',duration:Snackbar.LENGTH_SHORT,});}};

Changing the NavigationView size

<NavigationViewstyle={{width:200,height:50%}}.../>

Sample application

Support for Android Auto and Apple CarPlay

Known issues

Compatibility with other libraries

Note

This package provides aMapView component, which can be used as a classic Google Maps view without navigation. SeeAdd a map view for details.

Contributing

Terms of Service

Support