This repository contains a React Native plugin that provides a Google Navigation component for building native Android and iOS apps using React.

• A React Native project

• A Google Cloud project with a Mobility solution enabled, such as On-Demand Rides and Deliveries or Last Mile Fleet Solution. This requires you to Contact Sales as described in the Mobility services documentation.
• In that Google Cloud project, these four products also need to be enabled depending on the target(s) of your React Native app:
  • Maps SDK for Android
  • Navigation SDK for Android
  • Maps SDK for iOS
  • Navigation SDK for iOS

• An API key from the project above
• If targeting Android, Google Play Services installed and enabled
• Attributions and licensing text added to your app

This package is listed on NPM as @googlemaps/react-native-navigation-sdk. Install it with:

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

In your TSX or JSX file, import the components you need:

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

1. Set the minSdkVersion in android/app/build.gradle:

android {
    defaultConfig {
        minSdkVersion 23
    }
}

To securely store your API key, it is recommended to use the Google Maps Secrets Gradle Plugin. This plugin helps manage API keys without exposing them in your app's source code.

See example configuration for secrets plugin at example applications build.gradle file.

To set up, specify your API key in the application delegate ios/Runner/AppDelegate.m:

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [GMSServices provideAPIKey:@"API_KEY"];
  [GMSServices setMetalRendererEnabled:YES];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

You can now add a NavigationView component to your application..

The view can be controlled with the ViewController (Navigation and MapView) that are retrieved from the onMapViewControllerCreated and onNavigationViewControllerCreated (respectively).

The NavigationView compoonent should be used within a View with a bounded size. Using it in an unbounded widget will cause the application to behave unexpectedly.

    // Permissions must have been granted by this point.

    <NavigationView
        width={navViewWidth}
        height={navViewHeight}
        androidStylingOptions={{
            primaryDayModeThemeColor: '#34eba8',
            headerDistanceValueTextColor: '#76b5c5',
            headerInstructionsFirstRowTextSize: '20f',
        }}
        iOSStylingOptions={{
            navigationHeaderPrimaryBackgroundColor: '#34eba8',
            navigationHeaderDistanceValueTextColor: '#76b5c5',
        }}
        navigationViewCallbacks={navigationViewCallbacks}
        mapViewCallbacks={mapViewCallbacks}
        onMapViewControllerCreated={setMapViewController}
        onNavigationViewControllerCreated={setNavigationViewController}
        termsAndConditionsDialogOptions={termsAndConditionsDialogOptions}
    />

See the example directory for a complete navigation sample app.

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

You can see example of handling permissions in the app.tsx file of the sample application:

import {request, PERMISSIONS, RESULTS} from 'react-native-permissions';

// ...

// Request permission for accessing the device's location.
const requestPermissions = async () => {
    const result = await request(
        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,
        });
    }
};

See the Contributing guide.

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

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

This package is offered via an open source license. It is not governed by the Google Maps Platform Support Technical Support Services Guidelines, the SLA, or the Deprecation Policy (however, any Google Maps Platform services used by the library remain subject to the Google Maps Platform Terms of Service).

This package adheres to semantic versioning 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.

If you find a bug, or have a feature request, please file an issue 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. If you'd like to contribute, please check the Contributing guide.