Android Auto with React Native

Android Auto was added in version 2.4.0 and is still in beta.

Welcome to Android Auto Development!

Start your development with the Android for Cars App Library Design Guidelines (opens in a new tab), an in-depth 120-page resource for creating apps for Android Auto.

For further development insights, visit the Android Auto Developer Documentation (opens in a new tab).

🚀 Quickstart: The Desktop Head Unit (DHU) enables you to test Android Auto apps without vehicle hardware. Learn how to set up the DHU for testing (opens in a new tab).

📑 Design & Permissions: Ensure you're familiar with the detailed design guidelines and that your app complies with all required permissions.

🖥 Testing with DHU: Utilize the DHU tool from the Android SDK to simulate an Android Auto environment on your desktop for development and testing purposes.

Important:

Before proceeding with testing or deployment, your app's manifest must include Android Auto's specific permissions and intent filters.

Installing

Create a new file under android/app/src/main/res/xml/automotive_app_desc.xml with the following content:

<?xml version="1.0" encoding="utf-8"?>
<automotiveApp>
  <uses name="template" />
</automotiveApp>

Under android/app/src/main/AndroidManifest.xml add the following:

<meta-data
  android:name="com.google.android.gms.car.application"
  android:resource="@xml/automotive_app_desc" />

We include permissions needed for all of the templates. You can remove the ones you don't need with tools:node="remove".

AndroidManifest.xml

<uses-permission android:name="androidx.car.app.ACCESS_SURFACE" tools:node="remove" />
<uses-permission android:name="androidx.car.app.MAP_TEMPLATES" tools:node="remove" />
<uses-permission android:name="androidx.car.app.NAVIGATION_TEMPLATES" tools:node="remove" />

Category matrix

In short, video, games and browsers are not allowed for publishing.

Three car app categories are supported:

• androidx.car.app.category.NAVIGATION
• androidx.car.app.category.POI
• androidx.car.app.category.IOT

Refer to the supported categories guide (opens in a new tab) for more details

Templates

ListTemplate

A template representing a list of items.

Visual Previews

Example Usage

new ListTemplate({
  sections: [
    {
      header: 'Header A',
      items: [
        {
          text: 'Item 1',
        },
      ],
    },
  ],
  title: 'List Template',
  async onItemSelect() {},
});

See more configuration options in the TypeScript Docs

Relevant Links

• ListTemplate (opens in a new tab): Explore the ListTemplate class, which defines the template for a list of items in Android Auto.
• ListTemplate.Builder (opens in a new tab): Utilize the Builder class for constructing a ListTemplate.
• Row (opens in a new tab): Learn about the Row class that represents a row in the list within a ListTemplate.
• ItemList (opens in a new tab): Delve into the ItemList interface that ListTemplate uses to model lists.

GridTemplate

A template representing a grid of items.

Visual Previews

Example Usage

new GridTemplate({
  sections: [
    {
      items: [
        {
          image: require('home.png'),
          text: 'Home',
        },
      ],
    },
  ],
  title: 'Grid Template',
  async onItemSelect() {},
});

MapTemplate

A template that displays a map with data such as Pane or ItemList on top of it.

Visual Previews

Example Usage

new MapTemplate({
  component: /* react native view */ MapView,
  guidanceBackgroundColor: '#eeff00',
  onAlertActionPressed() {},
  onStartedTrip() {},
});

See more configuration options in the TypeScript Docs

Relevant Links

• MapTemplate (opens in a new tab): Get details on implementing a map view within Android Auto.
• MapTemplate.Builder (opens in a new tab): Learn about the Builder class for constructing a MapTemplate.
• Pane (opens in a new tab): Explore the Pane class that represents a pane in the map within a MapTemplate.
• ItemList (opens in a new tab): Delve into the ItemList interface that MapTemplate uses to model lists.

NavigationTemplate

A template for turn-by-turn navigation.

Visual Previews

See more configuration options in the TypeScript Docs

Relevant Links

• NavigationTemplate (opens in a new tab): Learn how to display navigation instructions.

PlaceListMapTemplate

A template to show a list of places on a map.

Visual Previews

See more configuration options in the TypeScript Docs

Relevant Links

• PlaceListMapTemplate (opens in a new tab): Understand how to list places on a map interface.

PlaceListNavigationTemplate

A template for displaying a list of navigable places.

Visual Previews

See more configuration options in the TypeScript Docs

Relevant Links

• PlaceListNavigationTemplate (opens in a new tab): Explore how to show a list of destinations for navigation.

RoutePreviewTemplate

A template for previewing a route.

Visual Previews

See more configuration options in the TypeScript Docs

Relevant Links

• RoutePreviewTemplate (opens in a new tab): Delve into the details of route previews.

PaneTemplate

A template to display content in a pane layout.

Visual Previews

See more configuration options in the TypeScript Docs

Relevant Links

• PaneTemplate (opens in a new tab): Find out how to present information in a pane format.

SearchTemplate

A template for search functionality.

Visual Previews

See more configuration options in the TypeScript Docs

Relevant Links

• SearchTemplate (opens in a new tab): Access information on implementing search in your app.

TabTemplate

A template for tabbed navigation.

Visual Previews

See more configuration options in the TypeScript Docs

Relevant Links

• TabTemplate (opens in a new tab): Learn about tabbed layouts for content organization.

MessageTemplate

A template for displaying messages.

Visual Previews

See more configuration options in the TypeScript Docs

Relevant Links

• MessageTemplate (opens in a new tab): Explore how to display messages and alerts.