Skip to content

googlemaps/react-native-navigation-sdk

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7d238d1 · Dec 27, 2023

History

1 Commit
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023
Dec 27, 2023

Repository files navigation

Google Maps Navigation (Preview)

Description

This repository contains a React Native library that provides a Google Maps Navigation component.

The library is currenty in experimental state with a limited set of features available. Turn-by-turn, Ground overlays, and Street view are some of the main features that are not included but will come in the GA release.

Requirements

Android iOS
Support SDK 23+ iOS 14.0+

Installation

  1. This repository is currently private. In order to install the library, you must authenticate with SSH first. See Connecting to GitHub with SSH for instructions on how to provide SSH keys.

  2. To install the library run the following command from your project root:

npm install --save https://github.com/googlemaps/react-native-navigation-sdk#{version_tag}

  1. Follow the instructions below to add your API key to the appropiate files in your application project.
  • Enable Google Maps SDK and Google Maps Navigation SDK for each platform.

    • Go to Google Developers Console.
    • Select the project where you want to enable Google Maps Navigation.
    • Navigate to the "Google Maps Platform" through the main menu.
    • Under the Google Maps Platform menu, go to "APIs & Services".
    • For Android, enable "Maps SDK for Android" by selecting "ENABLE".
    • For iOS, enable "Maps SDK for iOS" by selecting "ENABLE".
  • Generate an API key at https://console.cloud.google.com/google/maps-apis/credentials.

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.

For more details, see Google Navigation SDK Documentation.

Android

  1. Set the minSdkVersion in android/app/build.gradle:
android {
    defaultConfig {
        minSdkVersion 23
    }
}
  1. 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.

iOS

  1. Set the iOS version in your application PodFile.

    platform: ios, '14.0'

  2. Make sure to run pod install from your application ios module.

  3. To set up, store your API key in the application plist file (example, the key is defined under the API_KEY value). Then you need to update your AppDelegate file so the key can be read.

Usage

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.

Add a navigation view

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

Requesting and handling permissions

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.

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.

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

Contributing

See the Contributing guide.

Terms of Service

This package uses Google Maps Platform services, and any use of Google Maps Platform is subject to the Terms of Service.

For clarity, this package, and each underlying component, is not a Google Maps Platform Core Service.

Support

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.