@javascriptcommon/react-native-carplay 2.3.11

package/src/interfaces/Maneuver.ts

@@ -0,0 +1,30 @@
+import { TravelEstimates } from './TravelEstimates';
+import { ColorValue, ImageSourcePropType, ProcessedColorValue } from 'react-native';
+
+/**
+ * Navigation instructions and distance from the previous maneuver.
+ */
+export interface Maneuver {
+  junctionImage?: ImageSourcePropType;
+  initialTravelEstimates?: TravelEstimates;
+  symbolImage?: ImageSourcePropType;
+  /**
+   * The size of the image in points. Please read the CarPlay App Programming Guide
+   * to get the recommended size.
+   */
+  symbolImageSize?: { width: number; height: number };
+  /**
+   * Allows the supplied symbol image to be tinted
+   * via a color, ie. 'red'. This functionality would usually
+   * be available via the `<Image>` tag but carplay requires
+   * an image asset to this tinting is done on the native side.
+   * If a string is supplied, it will be passed to `processColor`.
+   * You may also use `processColor` yourself.
+   */
+  tintSymbolImage?: null | number | ColorValue | ProcessedColorValue;
+  instructionVariants: string[];
+
+  // not yet implemented
+  dashboardInstructionVariants?: string[];
+  notificationInstructionVariants?: string[];
+}

package/src/interfaces/MapButton.ts

@@ -0,0 +1,27 @@
+import { ImageSourcePropType } from 'react-native';
+
+/**
+ * A button representing an action that a map template displays on the CarPlay screen.
+ */
+export interface MapButton {
+  /**
+   * Button ID
+   */
+  id: string;
+  /**
+   * The image to display on the button.
+   */
+  image?: ImageSourcePropType;
+  /**
+   * The image to display when focus is on the button.
+   */
+  focusedImage?: ImageSourcePropType;
+  /**
+   * A Boolean value that enables and disables the map button.
+   */
+  disabled?: boolean;
+  /**
+   * A Boolean value that hides and shows the map button.
+   */
+  hidden?: boolean;
+}

package/src/interfaces/NavigationAlert.ts

@@ -0,0 +1,46 @@
+import { ImageSourcePropType } from 'react-native';
+
+export enum NavigationAlertActionStyle {
+  Default = 0,
+  Cancel = 1,
+  Destructive = 2,
+}
+
+export interface NavigationAlertAction {
+  /**
+   * The action button's title.
+   */
+  title: string;
+  /**
+   * The display style for the action button.
+   */
+  style?: NavigationAlertActionStyle;
+}
+
+/**
+ * An alert panel that displays map or navigation related information to the user.
+ */
+export interface NavigationAlert {
+  lightImage?: ImageSourcePropType;
+  darkImage?: ImageSourcePropType;
+  /**
+   * An array of title strings.
+   */
+  titleVariants: string[];
+  /**
+   * An array of subtitle strings.
+   */
+  subtitleVariants?: string[];
+  /**
+   * The primary action, and button, for the navigation alert.
+   */
+  primaryAction: NavigationAlertAction;
+  /**
+   * An optional, secondary action (and button) for the navigation alert.
+   */
+  secondaryAction?: NavigationAlertAction;
+  /**
+   * The amount of time, in seconds, that the alert is visible.
+   */
+  duration: number;
+}

package/src/interfaces/NavigationInfo.ts

@@ -0,0 +1,19 @@
+import { ImageResolvedAssetSource } from 'react-native';
+import { NavigationStep } from './NavigationStep';
+
+export type NavigationRoutingInfo = {
+  type: 'routingInfo';
+  loading?: boolean;
+  junctionImage?: ImageResolvedAssetSource;
+  nextStep?: NavigationStep;
+  distance: number;
+  distanceUnits: number;
+};
+
+export type NavigationMessageInfo = {
+  type: 'messageInfo';
+  title: string;
+  icon?: ImageResolvedAssetSource;
+};
+
+export type NavigationInfo = NavigationRoutingInfo | NavigationMessageInfo;

package/src/interfaces/NavigationStep.ts

@@ -0,0 +1,17 @@
+import { ImageResolvedAssetSource } from 'react-native';
+
+export type NavigationStep = {
+  lane: {
+    shape: number;
+    recommended: boolean;
+  };
+  cue?: string;
+  lanesImage: ImageResolvedAssetSource;
+  maneuver?: {
+    type: number;
+    icon: ImageResolvedAssetSource;
+    roundaboutExitAngle: number;
+    roundaboutExitNumber: number;
+  };
+  road?: string;
+};

package/src/interfaces/Pane.ts

@@ -0,0 +1,29 @@
+import { ImageSourcePropType } from 'react-native';
+import { Action } from './Action';
+import { ListItem } from './ListItem';
+
+/**
+ * Represents a list of rows used for displaying informational content and a set of Actions that users can perform based on such content.
+ * @namespace Android
+ */
+export interface Pane {
+  /**
+   * Sets whether the Pane is in a loading state.
+   * If set to true, the UI will display a loading indicator where the list content would be otherwise. The caller is expected to call invalidate and send the new template content to the host once the data is ready. If set to false, the UI shows the actual row contents.
+   */
+  loading?: boolean;
+  /**
+   * Sets an CarIcon to display alongside the rows in the pane.
+   * Image Sizing Guidance To minimize scaling artifacts across a wide range of car screens, apps should provide images targeting a 480 x 480 dp bounding box. If the image exceeds this maximum size in either one of the dimensions, it will be scaled down to be centered inside the bounding box while preserving its aspect ratio.
+   */
+  image?: ImageSourcePropType;
+  /**
+   * Actions to display alongside the rows in the pane.
+   * By default, no actions are displayed.
+   */
+  actions?: Action[];
+  /**
+   * Rows to display in the list.
+   */
+  items?: ListItem[];
+}

package/src/interfaces/PauseReason.ts

@@ -0,0 +1,7 @@
+export enum PauseReason {
+  Arrived = 1,
+  Loading = 2,
+  Locating = 3,
+  Rerouting = 4,
+  ProceedToRoute = 5,
+}

package/src/interfaces/Place.ts

@@ -0,0 +1,12 @@
+import { ImageSourcePropType } from 'react-native';
+
+/**
+ * A place to be displayed on the map.
+ * @namespace Android
+ */
+export interface Place {
+  latitude: number;
+  longitude: number;
+  // Marker icon on the map
+  icon: ImageSourcePropType;
+}

package/src/interfaces/TextConfiguration.ts

@@ -0,0 +1,5 @@
+export interface TextConfiguration {
+  startButtonTitle?: string;
+  additionalRoutesButtonTitle?: string;
+  overviewButtonTitle?: string;
+}

package/src/interfaces/TimeRemainingColor.ts

@@ -0,0 +1 @@
+export type TimeRemainingColor = 0 | 1 | 2 | 3;

package/src/interfaces/TravelEstimates.ts

@@ -0,0 +1,39 @@
+import { CarColor } from './CarColor';
+
+export type DistanceUnits = 'meters' | 'miles' | 'kilometers' | 'yards' | 'feet';
+
+export interface TravelEstimates {
+  /**
+   * Distance remaining
+   */
+  distanceRemaining: number;
+  /**
+   * Time remaining in seconds
+   */
+  timeRemaining: number;
+  /**
+   * unit of measurement for the
+   * distance, defaults to kilometer
+   * @namespace iOS
+   */
+  distanceUnits?: DistanceUnits;
+
+  /**
+   * Color of the distance remaining
+   * @namespace Android
+   */
+  distanceRemainingColor?: CarColor;
+  /**
+   * Color of the time remaining
+   * @namespace Android
+   */
+  timeRemainingColor?: CarColor;
+  /**
+   * Destination time
+   * @namespace Android
+   */
+  destinationTime?: {
+    timeSinceEpochMillis: number;
+    id: string;
+  };
+}

package/src/interfaces/VoiceControlState.ts

@@ -0,0 +1,8 @@
+import { ImageSourcePropType } from 'react-native';
+
+export interface VoiceControlState {
+  identifier: string;
+  image?: ImageSourcePropType;
+  repeats: boolean;
+  titleVariants: string[];
+}

package/src/navigation/NavigationSession.ts

@@ -0,0 +1,57 @@
+import { CarPlay } from '../CarPlay';
+import { Maneuver } from '../interfaces/Maneuver';
+import { PauseReason } from '../interfaces/PauseReason';
+import { TravelEstimates } from '../interfaces/TravelEstimates';
+import { MapTemplate } from '../templates/MapTemplate';
+import { Trip } from './Trip';
+import { Image, processColor } from 'react-native';
+
+export class NavigationSession {
+  public maneuvers: Maneuver[] = [];
+
+  constructor(public id: string, public trip: Trip, public mapTemplate: MapTemplate) {}
+
+  public updateManeuvers(maneuvers: Maneuver[]) {
+    this.maneuvers = maneuvers;
+    const windowScale = CarPlay.window?.scale ?? 1;
+    CarPlay.bridge.updateManeuversNavigationSession(
+      this.id,
+      maneuvers.map(maneuver => {
+        if (maneuver.symbolImage) {
+          const image = Image.resolveAssetSource(maneuver.symbolImage);
+          maneuver.symbolImage = image;
+          maneuver.symbolImageSize = maneuver.symbolImageSize ?? { width: 50, height: 50 };
+          const width = Math.floor((maneuver.symbolImageSize.width * windowScale) / image.scale);
+          const height = Math.floor((maneuver.symbolImageSize.height * windowScale) / image.scale);
+          maneuver.symbolImageSize = { width, height };
+        }
+        if (maneuver.junctionImage) {
+          maneuver.junctionImage = Image.resolveAssetSource(maneuver.junctionImage);
+        }
+        if (maneuver.tintSymbolImage && typeof maneuver.tintSymbolImage === 'string') {
+          maneuver.tintSymbolImage = processColor(maneuver.tintSymbolImage);
+        }
+        return maneuver;
+      }),
+    );
+  }
+
+  public updateTravelEstimates(maneuverIndex: number, travelEstimates: TravelEstimates) {
+    if (!travelEstimates.distanceUnits) {
+      travelEstimates.distanceUnits = 'kilometers';
+    }
+    CarPlay.bridge.updateTravelEstimatesNavigationSession(this.id, maneuverIndex, travelEstimates);
+  }
+
+  public cancel() {
+    CarPlay.bridge.cancelNavigationSession(this.id);
+  }
+
+  public finish() {
+    CarPlay.bridge.finishNavigationSession(this.id);
+  }
+
+  public pause(reason: PauseReason, description?: string) {
+    CarPlay.bridge.pauseNavigationSession(this.id, reason, description);
+  }
+}

package/src/navigation/Trip.ts

@@ -0,0 +1,36 @@
+import { CarPlay } from '../CarPlay';
+
+export interface RouteChoice {
+  additionalInformationVariants: string[];
+  selectionSummaryVariants: string[];
+  summaryVariants: string[];
+}
+
+export interface TripPoint {
+  latitude: number;
+  longitude: number;
+  name: string;
+}
+
+export interface TripConfig {
+  id?: string;
+  origin: TripPoint;
+  destination: TripPoint;
+  routeChoices: RouteChoice[];
+}
+
+export class Trip {
+  public id!: string;
+
+  constructor(public config: TripConfig) {
+    if (config.id) {
+      this.id = config.id;
+    }
+
+    if (!this.id) {
+      this.id = `trip-${Date.now()}-${Math.round(Math.random() * Number.MAX_SAFE_INTEGER)}`;
+    }
+
+    CarPlay.bridge.createTrip(this.id, config);
+  }
+}

package/src/templates/ActionSheetTemplate.ts

@@ -0,0 +1,21 @@
+import { AlertAction } from '../interfaces/AlertAction';
+import { Template, TemplateConfig } from './Template';
+
+export interface ActionSheetTemplateConfig extends TemplateConfig {
+  title: string;
+  message?: string;
+  actions: AlertAction[];
+  onActionButtonPressed?(e: { id: string; templateId: string }): void;
+}
+
+export class ActionSheetTemplate extends Template<ActionSheetTemplateConfig> {
+  public get type(): string {
+    return 'actionsheet';
+  }
+
+  get eventMap() {
+    return {
+      actionButtonPressed: 'onActionButtonPressed',
+    };
+  }
+}

package/src/templates/AlertTemplate.ts

@@ -0,0 +1,20 @@
+import { AlertAction } from '../interfaces/AlertAction';
+import { Template, TemplateConfig } from './Template';
+
+export interface AlertTemplateConfig extends TemplateConfig {
+  titleVariants: string[];
+  actions?: AlertAction[];
+  onActionButtonPressed?(e: { id: string; templateId: string }): void;
+}
+
+export class AlertTemplate extends Template<AlertTemplateConfig> {
+  public get type(): string {
+    return 'alert';
+  }
+
+  get eventMap() {
+    return {
+      actionButtonPressed: 'onActionButtonPressed',
+    };
+  }
+}

package/src/templates/ContactTemplate.ts

@@ -0,0 +1,45 @@
+import { ImageSourcePropType } from 'react-native';
+import { Template, TemplateConfig } from './Template';
+
+export interface ContactButtonEvent {
+  id: string;
+  templateId: string;
+}
+
+export interface ContactActionBase {
+  id: string;
+  type: 'call' | 'directions' | 'message';
+  disabled?: boolean;
+  title?: string;
+}
+
+export interface ContactActionMessage extends ContactActionBase {
+  type: 'message';
+  phoneOrEmail: string;
+}
+
+export type ContactAction = ContactActionBase | ContactActionMessage;
+
+export interface ContactTemplateConfig extends TemplateConfig {
+  name: string;
+  image: ImageSourcePropType;
+  subtitle?: string;
+  informativeText?: string;
+  actions?: ContactAction[];
+  /**
+   * Fired when bar button is pressed
+   * @param e Event
+   */
+  onButtonPressed?(e: ContactButtonEvent): void;
+}
+
+export class ContactTemplate extends Template<ContactTemplateConfig> {
+  public get type(): string {
+    return 'contact';
+  }
+  get eventMap() {
+    return {
+      buttonPressed: 'onButtonPressed',
+    };
+  }
+}

package/src/templates/GridTemplate.ts

@@ -0,0 +1,45 @@
+import { GridButton } from '../interfaces/GridButton';
+import { BaseEvent, Template, TemplateConfig } from './Template';
+
+export interface ButtonPressedEvent extends BaseEvent {
+  /**
+   * Button ID
+   */
+  id: string;
+  /**
+   * Button Index
+   */
+  index: number;
+  /**
+   * template ID
+   */
+  templateId: string;
+}
+
+export interface GridTemplateConfig extends TemplateConfig {
+  /**
+   * The title displayed in the navigation bar while the list template is visible.
+   */
+  title?: string;
+  /**
+   * The array of grid buttons displayed on the template.
+   */
+  buttons: GridButton[];
+  /**
+   * Fired when a button is pressed
+   */
+  onButtonPressed?(e: ButtonPressedEvent): void;
+}
+
+export class GridTemplate extends Template<GridTemplateConfig> {
+  public get type(): string {
+    return 'grid';
+  }
+
+  get eventMap() {
+    return {
+      gridButtonPressed: 'onButtonPressed',
+      backButtonPressed: 'onBackButtonPressed',
+    };
+  }
+}

package/src/templates/InformationTemplate.ts

@@ -0,0 +1,42 @@
+import { Template, TemplateConfig } from './Template';
+import { CarPlay } from '../CarPlay';
+
+export interface InformationItem {
+  title: string;
+  detail: string;
+}
+
+export interface InformationAction {
+  id: string;
+  title: string;
+}
+
+export interface InformationTemplateConfig extends TemplateConfig {
+  title: string;
+  leading?: boolean;
+  items: InformationItem[];
+  actions: InformationAction[];
+  onActionButtonPressed(e: { id: string; templateId: string }): void;
+}
+
+export class InformationTemplate extends Template<InformationTemplateConfig> {
+  public get type(): string {
+    return 'information';
+  }
+
+  get eventMap() {
+    return {
+      actionButtonPressed: 'onActionButtonPressed',
+    };
+  }
+
+  public updateInformationTemplateItems = (items: InformationItem[]) => {
+    this.config.items = items;
+    return CarPlay.bridge.updateInformationTemplateItems(this.id, this.parseConfig(items));
+  };
+
+  public updateInformationTemplateActions = (actions: InformationAction[]) => {
+    this.config.actions = actions;
+    return CarPlay.bridge.updateInformationTemplateActions(this.id, this.parseConfig(actions));
+  };
+}