react-native-android-auto

A react native module (+ a react renderer) to control android auto app UI from JavaScript and with React code. (and of cource independently of MainActivity!)

Getting started

$ npm install react-native-android-auto --save

Mostly automatic installation

In order to display the app launcher in the car display:

You need to add the following lines to your app's AndroidManifest.xml under <application>:

<meta-dataandroid:name="com.google.android.gms.car.application"android:resource="@xml/automotive_app_desc" />
<serviceandroid:name="com.shopify.rnandroidauto.CarService"android:exported="true">
<intent-filter>
<actionandroid:name="com.google.android.car.action.CAR_APP" />
</intent-filter>
</service>

And create a new file: android/app/src/main/res/xml/automotive_app_desc.xml with the following contents:

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

Usage

import{Screen,ScreenManager}from"react-native-android-auto";

In order to start your app's android auto screen, you need to register a root component it via AppRegistery:

importReactfrom"react";import{AppRegistry}from"react-native";import{render}from"./src/car/android-auto/module/AndroidAutoReconciler";// RootApp -> The componentAppRegistry.registerRunnable("androidAuto",()=>{render(React.createElement(RootApp));});

The root component must eventually render a ScreenManager with at least one Screen. Just note that the ScreenManager doesn't need to be an immediate child of root component.

exportfunctionRootApp(){return(<ScreenManager><Screenname="root"render={Main}/><Screenname="deliveryList"render={DeliveryListScreen}/><Screenname="deliveryDetails"render={DeliveryDetails}/></ScreenManager>);}

A Screen with name="root" is required to start the app, otherwise the app will be stuck in an infinite loading state.

The react renderer comes with a bunch of native elements specific to Android Auto.

Example screen code

import{useCarNavigation}from'react-native-android-auto';exportfunctionMain(){constshop=useShop();constnavigation=useCarNavigation();const{ loading, data }=useQuery(deliveryListsQuery);return(<list-templatetitle={shop.name??"Shopify Local Delivery"}isLoading={loading||!data}><item-listheader="Delivery Lists">{data.deliveryListEdges.slice(0,5).map(({ node })=>(<rowkey={node.id}title={node.description}texts={[node.name]}onPress={()=>{navigation.push("deliveryList",{deliveryList: node,});}}/>))}</item-list></list-template>);}

JSX Tags

Templates

A Screen's given render component's immediate child must be a template element. Currently, pane-template, list-template, and place-list-map-template are supported.

pane-template

Prop	Type	Description
title	string	The title of the screen shown at the top left
headerAction	HeaderAction
actionStrip	ActionStrip
children	ReactNode[]	only accepts instances of <row /> and <action /> as child

list-template

Prop	Type	Description
title	string	The title of the screen shown at the top left
headerAction	HeaderAction
actionStrip	ActionStrip
isLoading	boolean	Whether to ignore displaying children and show a spinner instead
children	ReactNode[]	only accepts instances of <item-list /> as child

place-list-map-template

Prop	Type	Description
title	string	The title of the screen shown at the top left
headerAction	HeaderAction
actionStrip	ActionStrip
isLoading	boolean	Whether to ignore displaying children and show a spinner instead
children	ReactNode[]	only accepts instances of <row /> as child

Other tags

row

Prop	Type	Description
title	string	Title of the row
texts?	string[]	You can specify multiple lines of texts to be displayed under the row title
onPress?	(event: {}) => any	A callback function invoked when user touches the row on the car display
metadata?	Metadata

action

Prop	Type	Description
title	string	Title of the row
texts?	string[]	You can specify multiple lines of texts to be displayed under the row title
onPress?	(event: {}) => any	A callback function invoked when user touches the row on the car display
backgroundColor?	CarColor

item-list

Prop	Type	Description
header	string	Title of the row
children	ReactNode[]	only accepts instances of <row /> as child

Want to contribute?

Check out our Contributing Guide

License

MIT © Shopify, see LICENSE.md for details.