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!)

!Android Auto Preview

Getting started

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

$3

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

!Launcher

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

``xml
android:name="com.google.android.gms.car.application"
android:resource="@xml/automotive_app_desc" />

android:name="com.shopify.rnandroidauto.CarService"
android:exported="true">




`

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

`xml





`

Usage

`javascript
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:

`ts
import React from "react";
import { AppRegistry } from "react-native";

import { render } from "./src/car/android-auto/module/AndroidAutoReconciler";

// RootApp -> The component

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

`tsx
export function RootApp() {
return (





);
}
`

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

`tsx
import {useCarNavigation} from 'react-native-android-auto';

export function Main() {
const shop = useShop();
const navigation = useCarNavigation();
const { loading, data } = useQuery(deliveryListsQuery);

return (
title={shop.name ?? "Shopify Local Delivery"}
isLoading={loading || !data}
>

{data.deliveryListEdges.slice(0, 5).map(({ node }) => (
key={node.id}
title={node.description}
texts={[node.name]}
onPress={() => {
navigation.push("deliveryList", {
deliveryList: node,
});
}}
/>
))}


);
}
`

!Example screen

JSX Tags

$3

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 and 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 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 as child |

$3

#### 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 ` as child |

Want to contribute?

Check out our Contributing Guide

License

MIT © Shopify, see LICENSE.md for details.