Skip to content
CarPlay with React Native
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github init on github Mar 26, 2019
docs docs Mar 26, 2019
example update example package version Apr 2, 2019
ios Wrapping up Apr 1, 2019
src Wrapping up Apr 1, 2019
.buckconfig init on github Mar 26, 2019
.editorconfig
.gitattributes
.gitignore init on github Mar 26, 2019
.prettierignore
.prettierrc init on github Mar 26, 2019
README.md Update README.md Apr 2, 2019
package.json v1.2.0 Apr 1, 2019
react-native-carplay.podspec Create react-native-carplay.podspec Mar 26, 2019
tsconfig.json v1.0.3 Mar 26, 2019
tslint.json
yarn.lock

README.md

CarPlay with React Native

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

Animated Demo

List Template

Grid Template

Search Template

Installing

  1. Install the library
yarn add react-native-carplay --save
  1. Link using normal or cocoapods method
react-native link react-native-carplay
# in ios/Podfile:

pod 'react-native-carplay', path: '../node_modules/react-native-carplay'
  1. Edit your AppDelegate
// AppDelegate.h

// [step 1] add this line to the top
#import <CarPlay/CarPlay.h>

// [step 2] add the "CPApplicationDelegate" to the end, before ">":
@interface AppDelegate : UIResponder <UIApplicationDelegate, CPApplicationDelegate>
// AppDelegate.m

// [step 1] add this line to the top
#import <RNCarPlay.h>

// ...

// [step 2] add the following two methods before @end

- (void)application:(UIApplication *)application didConnectCarInterfaceController:(CPInterfaceController *)interfaceController toWindow:(CPWindow *)window {
  [RNCarPlay connectWithInterfaceController:interfaceController window:window];
}

- (void)application:(nonnull UIApplication *)application didDisconnectCarInterfaceController:(nonnull CPInterfaceController *)interfaceController fromWindow:(nonnull CPWindow *)window {
  [RNCarPlay disconnect];
}

@end

Usage

See full example

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

const template = new GridTemplate();

CarPlay.setRootTemplate(template);

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

MapTemplate

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

function CarPlayView() {
  return (
    <View>
      <Image style={{ width: 100, height: 100 }} />
      <Text>My thing</Text>
      <GoogleMap />
    </View>
  );
}

const map = new MapTemplate({
  guidanceBackgroundColor: '#aeafaf',
  component: CarPlayView,
  mapButtons: [{
    id: 'test',
    image: require('assets/images/test.png'),
    focusedImage: require('assets/images/test-focused.png'),
  }]
});

CarPlay.setRootTemplate(map);

ListTemplate

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

CarPlay.setRootTemplate(songs, false);

Progress

UI Elements

  • CPListTemplate
  • CPGridTemplate
  • CPSearchTemplate
  • CPMapTemplate
  • CPVoiceControlTemplate
  • CPAlertTemplate
  • CPActionSheetTemplate

Route Guidance

  • CPNavigationSession
  • CPTrip
  • CPManeuver

Other

  • CPAlertAction
  • CPSessionConfiguration

Methods

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

Getters

  • topTemplate
  • rootTemplate

Events

  • didConnect
  • didDisconnect
  • didSelectListItem
  • selectedResult
  • gridButtonPressed
  • updatedSearchText
  • searchButtonPressed
  • barButtonPressed
You can’t perform that action at this time.