Options
All
  • Public
  • Public/Protected
  • All
Menu

react-native-carplay

CarPlay with React Native

What if you could create CarPlay with React Native. Well, now you can.

List Template

Grid Template

Search Template

Usage

Create one of the following templates

import { CarPlay, GridTemplate } from 'react-native-carplay';

const template = new GridTemplate({ /* .. */ });

CarPlay.setRootTemplate(template, false);

setRootTemplate

Sets the root template of CarPlay.

This must be called before running any other CarPlay commands. Can be called multiple times.

CarPlay.setRootTemplate(template, /* animated */ false);

pushTemplate

Pushes a new template to the navigation stack.

Note you cannot push the same template twice.

(where template is one of GridTemplate, ListTemplate or SearchTemplate)

CarPlay.pushTemplate(template, /* animated */ true);

popTemplate

Pop currently presented template from the stack.

CarPlay.popTemplate(/* animated */ false);

popToTemplate

Pop currently presented template from the stack to a specific template. The template must be in the stack.

CarPlay.popToTemplate(template, /* animated */ false);

popToRoot

Pop the stack to root template.

CarPlay.popToRoot(/* animated */ false);

Example

import { CarPlay, ListTemplate } from 'react-native-carplay';

// Register a new template in memory
const artists = new ListTemplate({
  title: 'List of artists',
  leadingNavigationBarButtons: [{
    id: 'play',
    type: 'text',
    title: 'Play',
  }],
  sections: [{
    items: [{
      text: 'AC/DC'
      detailText: 'Rock',
      image: require('./artists/ac-dc.png'),
      showsDisclosureIndicator: true,
    }],
  }],
  onItemSelect(item) {
    const artist = new ListTemplate({
      title: 'AC/DC',
      sections: [...],
    });

    CarPlay.pushTemplate(artist, true);
  }
});

// Somewhere in your app
class App extends Component {
  componentDidMount() {
    CarPlay.setRootTemplate(songs, false);
  }
}

Progress

UI Elements

  • CPListTemplate
  • CPGridTemplate
  • CPSearchTemplate
  • CPMapTemplate

Route Guidance

  • CPNavigationSession
  • CPTrip
  • CPManeuver

Other

  • CPSessionConfiguration
  • CPAlertTemplate
  • CPAlertAction

Methods

  • setRootTemplate
  • pushTemplate
  • popTemplate
  • popToTemplate
  • updateListTemplateSections
  • reactToUpdatedSearchText
  • reactToSelectedResult

Events

  • didConnect
  • didDisconnect
  • didSelectListItem
  • selectedResult
  • gridButtonPressed
  • updatedSearchText
  • searchButtonPressed
  • barButtonPressed

Generated using TypeDoc