CarPlay with React Native

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

Installing

1. Install the library

yarn add react-native-carplay --save

2. 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'

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