@javascriptcommon/react-native-carplay 2.3.11

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@javascriptcommon/react-native-carplay",
+  "version": "2.3.11",
+  "description": "CarPlay for React Native",
+  "main": "lib/index.js",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "lib",
+    "ios",
+    "react-native-carplay.podspec"
+  ],
+  "podspecPath": "./react-native-carplay.podspec",
+  "scripts": {
+    "prepack": "yarn run build",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "typecheck": "tsc --noEmit",
+    "build": "tsc",
+    "fix-all-files": "eslint . --ext .ts,.tsx,.js,.jsx --fix"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/birkir/react-native-carplay.git"
+  },
+  "keywords": [
+    "react",
+    "native",
+    "carplay",
+    "navigation",
+    "car",
+    "auto"
+  ],
+  "author": "Birkir Gudjonsson <birkir.gudjonsson@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/birkir/react-native-carplay/issues"
+  },
+  "homepage": "https://github.com/birkir/react-native-carplay#readme",
+  "peerDependencies": {
+    "react": "^17.0.2 || ^18.0.0",
+    "react-native": "^0.60.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@react-native-community/eslint-config": "3.2.0",
+    "@tsconfig/react-native": "3.0.2",
+    "@types/node": "17.0.25",
+    "@types/react": "18.0.6",
+    "@types/react-native": "0.67.5",
+    "babel-jest": "^29.2.1",
+    "cross-env": "7.0.3",
+    "docusaurus-plugin-typedoc": "0.19.2",
+    "eslint": "^8.19.0",
+    "jest": "29.5.0",
+    "microbundle": "0.14.2",
+    "prettier": "2.6.2",
+    "rimraf": "3.0.2",
+    "typedoc": "0.24.7",
+    "typedoc-github-wiki-theme": "1.1.0",
+    "typedoc-plugin-markdown": "3.15.3",
+    "typescript": "5.0.4"
+  }
+}

package/react-native-carplay.podspec

@@ -0,0 +1,21 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = 'react-native-carplay'
+  s.version      = package['version']
+  s.summary      = package['description']
+
+  s.homepage     = package['repository']['url']
+
+  s.license      = package['license']
+  s.authors      = package['author']
+  s.ios.deployment_target = '12.0'
+
+  s.source       = { :git => "https://github.com/Spicy-Sparks/react-native-carplay.git" }
+
+  s.source_files  = "ios/*.{h,m}"
+
+  s.dependency 'React-Core'
+end

package/src/CarPlay.ts

@@ -0,0 +1,286 @@
+import { ImageSourcePropType, NativeEventEmitter, NativeModule, NativeModules, Platform } from 'react-native';
+import { ActionSheetTemplate } from './templates/ActionSheetTemplate';
+import { AlertTemplate } from './templates/AlertTemplate';
+import { ContactTemplate } from './templates/ContactTemplate';
+import { GridTemplate } from './templates/GridTemplate';
+import { InformationTemplate } from './templates/InformationTemplate';
+import { ListTemplate } from './templates/ListTemplate';
+import { NavigationTemplate } from './templates/android/NavigationTemplate';
+import { PlaceListMapTemplate } from './templates/android/PlaceListMapTemplate';
+import { PlaceListNavigationTemplate } from './templates/android/PlaceListNavigationTemplate';
+import { RoutePreviewNavigationTemplate } from './templates/android/RoutePreviewNavigationTemplate';
+import { MapTemplate } from './templates/MapTemplate';
+import { PointOfInterestTemplate } from './templates/PointOfInterestTemplate';
+import { SearchTemplate } from './templates/SearchTemplate';
+import { TabBarTemplate } from './templates/TabBarTemplate';
+import { VoiceControlTemplate } from './templates/VoiceControlTemplate';
+import { NowPlayingTemplate } from './templates/NowPlayingTemplate';
+import { Maneuver } from './interfaces/Maneuver';
+import { TravelEstimates } from './interfaces/TravelEstimates';
+import { PauseReason } from './interfaces/PauseReason';
+import { TripConfig } from './navigation/Trip';
+import { TimeRemainingColor } from './interfaces/TimeRemainingColor';
+import { TextConfiguration } from './interfaces/TextConfiguration';
+import { Action } from './interfaces/Action';
+import { MessageTemplate } from './templates/android/MessageTemplate';
+import { PaneTemplate } from './templates/android/PaneTemplate';
+
+export interface InternalCarPlay extends NativeModule {
+  checkForConnection(): void;
+  setRootTemplate(templateId: string, animated: boolean): void;
+  pushTemplate(templateId: string, animated: boolean): void;
+  popToTemplate(templateId: string, animated: boolean): void;
+  popToRootTemplate(animated: boolean): void;
+  popTemplate(animated: boolean): void;
+  presentTemplate(templateId: string, animated: boolean): void;
+  dismissTemplate(animated: boolean): void;
+  enableNowPlaying(enabled: boolean): void;
+  updateManeuversNavigationSession(id: string, x: Maneuver[]): void;
+  updateTravelEstimatesNavigationSession(
+    id: string,
+    index: number,
+    estimates: TravelEstimates,
+  ): void;
+  cancelNavigationSession(id: string): void;
+  finishNavigationSession(id: string): void;
+  pauseNavigationSession(id: string, reason: PauseReason, description?: string): void;
+  createTrip(id: string, config: TripConfig): void;
+  updateInformationTemplateItems(id: string, config: unknown): void;
+  updateInformationTemplateActions(id: string, config: unknown): void;
+  createTemplate(id: string, config: unknown, callback?: unknown): void;
+  updateTemplate(id: string, config: unknown): void;
+  invalidate(id: string): void;
+  startNavigationSession(
+    id: string,
+    tripId: string,
+  ): Promise<{
+    tripId: string;
+    navigationSessionId: string;
+  }>;
+  updateTravelEstimatesForTrip(
+    id: string,
+    tripId: string,
+    travelEstimates: TravelEstimates,
+    timeRemainingColor: TimeRemainingColor,
+  ): void;
+  updateMapTemplateConfig(id: string, config: unknown): void;
+  updateMapTemplateMapButtons(id: string, config: unknown): void;
+  hideTripPreviews(id: string): void;
+  showTripPreviews(id: string, previews: string[], config: TextConfiguration): void;
+  showRouteChoicesPreviewForTrip(id: string, tripId: string, config: TextConfiguration): void;
+  presentNavigationAlert(id: string, config: unknown, animated: boolean): void;
+  dismissNavigationAlert(id: string, animated: boolean): void;
+  showPanningInterface(id: string, animated: boolean): void;
+  dismissPanningInterface(id: string, animated: boolean): void;
+  getMaximumListSectionCount(id: string): Promise<number>;
+  getMaximumListItemCount(id: string): Promise<number>;
+  getMaximumRowItemsCount(id: string): Promise<number>;
+  reactToSelectedResult(status: boolean): void;
+  updateListTemplateSections(id: string, config: unknown): void;
+  updateListTemplateItem(id: string, config: unknown): void;
+  updateListTemplateRowItems(id: string, config: unknown): void;
+  reactToUpdatedSearchText(items: unknown): void;
+  updateTabBarTemplates(id: string, config: unknown): void;
+  activateVoiceControlState(id: string, identifier: string): void;
+  // Android
+  reload(): void;
+  toast(message: string, duration: number): void;
+  alert(config: {
+    id: number;
+    title: string;
+    duration: number;
+    subtitle?: string;
+    icon?: ImageSourcePropType;
+    actions?: Action[];
+  }): void;
+}
+
+const { RNCarPlay } = NativeModules as { RNCarPlay: InternalCarPlay };
+
+export type PushableTemplates =
+  | MapTemplate
+  | SearchTemplate
+  | GridTemplate
+  | PointOfInterestTemplate
+  | ListTemplate
+  | MessageTemplate
+  | PaneTemplate
+  | InformationTemplate
+  | ContactTemplate
+  | NowPlayingTemplate
+  | NavigationTemplate
+  | PlaceListMapTemplate
+  | PlaceListNavigationTemplate
+  | RoutePreviewNavigationTemplate;
+
+export type PresentableTemplates = AlertTemplate | ActionSheetTemplate | VoiceControlTemplate;
+
+export type WindowInformation = {
+  width: number;
+  height: number;
+  scale: number;
+};
+
+export type OnConnectCallback = (window: WindowInformation) => void;
+export type OnDisconnectCallback = () => void;
+
+/**
+ * A controller that manages all user interface elements appearing on your map displayed on the CarPlay screen.
+ */
+export class CarPlayInterface {
+  /**
+   * React Native bridge to the CarPlay interface
+   */
+  public bridge = RNCarPlay;
+
+  /**
+   * Boolean to denote if carplay is currently connected.
+   */
+  public connected = false;
+  public window: WindowInformation | undefined;
+
+  /**
+   * CarPlay Event Emitter
+   */
+  public emitter = new NativeEventEmitter(RNCarPlay);
+
+  private onConnectCallbacks = new Set<OnConnectCallback>();
+  private onDisconnectCallbacks = new Set<OnDisconnectCallback>();
+
+  constructor() {
+    this.emitter.addListener('didConnect', (window: WindowInformation) => {
+      console.log('we are connected yes!');
+      this.connected = true;
+      this.window = window;
+      this.onConnectCallbacks.forEach(callback => {
+        callback(window);
+      });
+    });
+    this.emitter.addListener('didDisconnect', () => {
+      this.connected = false;
+      this.window = undefined;
+      this.onDisconnectCallbacks.forEach(callback => {
+        callback();
+      });
+    });
+    if (Platform.OS === 'android') {
+      this.emitter.addListener('didPressMenuItem', e => {
+        if (e?.title === 'Reload Android Auto') {
+          this.bridge.reload();
+        }
+      });
+    }
+
+    // check if already connected this will fire any 'didConnect' events
+    // if a connected is already present.
+    this.bridge.checkForConnection();
+  }
+
+  /**
+   * Fired when CarPlay is connected to the device.
+   */
+  public registerOnConnect = (callback: OnConnectCallback) => {
+    this.onConnectCallbacks.add(callback);
+  };
+
+  public unregisterOnConnect = (callback: OnConnectCallback) => {
+    this.onConnectCallbacks.delete(callback);
+  };
+
+  /**
+   * Fired when CarPlay is disconnected from the device.
+   */
+  public registerOnDisconnect = (callback: OnDisconnectCallback) => {
+    this.onDisconnectCallbacks.add(callback);
+  };
+
+  public unregisterOnDisconnect = (callback: OnDisconnectCallback) => {
+    this.onDisconnectCallbacks.delete(callback);
+  };
+
+  /**
+   * Sets the root template, starting a new stack for the template navigation hierarchy.
+   * @param rootTemplate The root template. Replaces the current rootTemplate, if one exists.
+   * @param animated Set TRUE to animate the presentation of the root template; ignored if there isn't a current rootTemplate.
+   */
+  public setRootTemplate(rootTemplate: PushableTemplates | TabBarTemplate, animated = true) {
+    return this.bridge.setRootTemplate(rootTemplate.id, animated);
+  }
+
+  /**
+   * Pushes a template onto the navigation stack and updates the display.
+   * @param templateToPush The template to push onto the navigation stack.
+   * @param animated Set TRUE to animate the presentation of the template.
+   */
+  public pushTemplate(templateToPush: PushableTemplates, animated = true) {
+    return this.bridge.pushTemplate(templateToPush.id, animated);
+  }
+
+  /**
+   * Pops templates until the specified template is at the top of the navigation stack.
+   * @param targetTemplate The template that you want at the top of the stack. The template must be on the navigation stack before calling this method.
+   * @param animated A Boolean value that indicates whether the system animates the display of transitioning templates.
+   */
+  public popToTemplate(targetTemplate: PushableTemplates, animated = true) {
+    return this.bridge.popToTemplate(targetTemplate.id, animated);
+  }
+
+  /**
+   * Pops all templates on the stack—except the root template—and updates the display.
+   * @param animated A Boolean value that indicates whether the system animates the display of transitioning templates.
+   */
+  public popToRootTemplate(animated = true) {
+    return this.bridge.popToRootTemplate(animated);
+  }
+
+  /**
+   * Pops the top template from the navigation stack and updates the display.
+   * @param animated A Boolean value that indicates whether the system animates the display of transitioning templates.
+   */
+  public popTemplate(animated = true) {
+    return this.bridge.popTemplate(animated);
+  }
+
+  /**
+   * presents a presentable template, alert / action / voice
+   * @param templateToPresent The presentable template to present
+   * @param animated A Boolean value that indicates whether the system animates the display of transitioning templates.
+   */
+  public presentTemplate(templateToPresent: PresentableTemplates, animated = true) {
+    return this.bridge.presentTemplate(templateToPresent.id, animated);
+  }
+
+  /**
+   * Dismisses the current presented template
+   * * @param animated A Boolean value that indicates whether the system animates the display of transitioning templates.
+   */
+  public dismissTemplate(animated = true) {
+    return this.bridge.dismissTemplate(animated);
+  }
+
+  /**
+   * The current root template in the template navigation hierarchy.
+   * @todo Not implemented yet
+   */
+  public get rootTemplate(): Promise<string> {
+    return Promise.resolve('');
+  }
+
+  /**
+   * The top-most template in the navigation hierarchy stack.
+   * @todo Not implemented yet
+   */
+  public get topTemplate(): Promise<string> {
+    return Promise.resolve('');
+  }
+
+  /**
+   * Control now playing template state
+   * @param enable A Boolean value that indicates whether the system use now playing template.
+   */
+  public enableNowPlaying(enable = true) {
+    return this.bridge.enableNowPlaying(enable);
+  }
+}
+
+export const CarPlay = new CarPlayInterface();

package/src/index.ts

@@ -0,0 +1,50 @@
+// Templates
+export * from './templates/Template';
+export * from './templates/ActionSheetTemplate';
+export * from './templates/AlertTemplate';
+export * from './templates/ContactTemplate';
+export * from './templates/GridTemplate';
+export * from './templates/InformationTemplate';
+export * from './templates/ListTemplate';
+export * from './templates/MapTemplate';
+export * from './templates/NowPlayingTemplate';
+export * from './templates/PointOfInterestTemplate';
+export * from './templates/SearchTemplate';
+export * from './templates/TabBarTemplate';
+export * from './templates/VoiceControlTemplate';
+
+// Android-only Templates
+export * from './templates/android/MessageTemplate';
+export * from './templates/android/NavigationTemplate';
+export * from './templates/android/PaneTemplate';
+export * from './templates/android/PlaceListMapTemplate';
+export * from './templates/android/PlaceListNavigationTemplate';
+export * from './templates/android/RoutePreviewNavigationTemplate';
+
+// Others
+export * from './CarPlay';
+export * from './navigation/Trip';
+export * from './navigation/NavigationSession';
+
+// Types
+export * from './interfaces/Action';
+export * from './interfaces/AlertAction';
+export * from './interfaces/BarButton';
+export * from './interfaces/CarColor';
+export * from './interfaces/GridButton';
+export * from './interfaces/Header';
+export * from './interfaces/ListItem';
+export * from './interfaces/ListItemUpdate';
+export * from './interfaces/ListSection';
+export * from './interfaces/Maneuver';
+export * from './interfaces/MapButton';
+export * from './interfaces/NavigationAlert';
+export * from './interfaces/NavigationInfo';
+export * from './interfaces/NavigationStep';
+export * from './interfaces/Pane';
+export * from './interfaces/PauseReason';
+export * from './interfaces/Place';
+export * from './interfaces/TextConfiguration';
+export * from './interfaces/TimeRemainingColor';
+export * from './interfaces/TravelEstimates';
+export * from './interfaces/VoiceControlState';

package/src/interfaces/Action.ts

@@ -0,0 +1,15 @@
+import { ColorValue } from 'react-native';
+
+export type ActionType = 'appIcon' | 'back' | 'pan' | 'custom';
+
+export interface Action<T extends ActionType = ActionType> {
+  id?: string;
+  title?: string;
+  icon?: string;
+  backgroundColor?: ColorValue;
+  visibility?: 'default' | 'persistent' | 'primary';
+  enabled?: boolean;
+  type?: T;
+}
+
+export type HeaderAction = Action<'appIcon' | 'back'>;

package/src/interfaces/AlertAction.ts

@@ -0,0 +1,5 @@
+export interface AlertAction {
+  id: string;
+  title: string;
+  style?: 'default' | 'cancel' | 'destructive';
+}

package/src/interfaces/BarButton.ts

@@ -0,0 +1,41 @@
+import { ImageSourcePropType } from 'react-native';
+
+interface BarButtonBase {
+  /**
+   * Button ID
+   */
+  id: string;
+  /**
+   * A Boolean value that enables and disables the bar button.
+   */
+  disabled?: boolean;
+}
+
+export interface BarButtonText extends BarButtonBase {
+  /**
+   * A text style bar button.
+   */
+  type: 'text';
+  /**
+   * The title displayed on the button.
+   */
+  title: string;
+}
+
+export interface BarButtonImage extends BarButtonBase {
+  /**
+   * An image style bar button.
+   */
+  type: 'image';
+  /**
+   * The image displayed on the button.
+   *
+   * If you provide an animated image, the button displays only the first image in the animation sequence.
+   */
+  image: ImageSourcePropType;
+}
+
+/**
+ * A button in a navigation bar.
+ */
+export type BarButton = BarButtonImage | BarButtonText;

package/src/interfaces/CarColor.ts

@@ -0,0 +1 @@
+export type CarColor = 'blue' | 'green' | 'primary' | 'red' | 'secondary' | 'yellow' | 'default';

package/src/interfaces/GridButton.ts

@@ -0,0 +1,25 @@
+import { ImageSourcePropType } from 'react-native';
+
+/**
+ * A menu item button displayed on a grid template.
+ */
+export interface GridButton {
+  /**
+   * Button ID
+   */
+  id: string;
+  /**
+   * An array of title variants for the button.
+   *
+   * When the system displays the button, it selects the title that best fits the available screen space, so arrange the titles from most to least preferred when creating a grid button. Also, localize each title for display to the user, and be sure to include at least one title in the array.
+   */
+  titleVariants: string[];
+  /**
+   * The image displayed on the button.
+   *
+   * When creating a grid button, don't provide an animated image. If you do, the button uses the first image in the animation sequence.
+   */
+  image: ImageSourcePropType;
+
+  disabled?: boolean;
+}

package/src/interfaces/Header.ts

@@ -0,0 +1,16 @@
+import { Action, HeaderAction } from './Action';
+
+export interface Header {
+  title: string;
+
+  /**
+   * By default, a header will not have a start action.
+   * Requirements Only one of APP_ICON or BACK is supported as a start header Action.
+   */
+  startAction?: Action<'appIcon' | 'back'>;
+  /**
+   * By default, a template will not have end header actions.
+   * Requirements Up to 2 actions (which are APP_ICON, BACK or TYPE_CUSTOM with an icon) at the end of the header.
+   */
+  endActions?: [HeaderAction] | [HeaderAction, HeaderAction];
+}

package/src/interfaces/ListItem.ts

@@ -0,0 +1,84 @@
+import { ImageSourcePropType } from 'react-native';
+import { Action } from './Action';
+
+/**
+ * A list item that appears in a list template.
+ */
+export interface ListItem {
+  /**
+   * References the item by id
+   */
+  id?: string;
+  /**
+   * The primary text displayed in the list item cell.
+   */
+  text: string;
+  /**
+   * Extra text displayed below the primary text in the list item cell.
+   */
+  detailText?: string;
+  /**
+   * Image from file system displayed on the leading edge of the list item cell.
+   */
+  image?: ImageSourcePropType;
+  /**
+   * The image name displayed on the leading edge of the list item cell.
+   */
+  imageName?: string;
+  /**
+   * Url for image displayed on the leading edge of the list item cell.
+   */
+  imgUrl?: string;
+  /**
+   * Is Artist flag.
+   */
+  isArtist?: boolean
+  /**
+   * The sub items arranged in a row.
+   * @namespace iOS
+   */
+  rowItems?: ListItem[];
+  /**
+   * A Boolean value indicating whether the list item cell shows a disclosure indicator on the trailing edge of the list item cell.
+   * @namespace iOS
+   */
+  showsDisclosureIndicator?: boolean;
+  /**
+   * Is Playing flag.
+   * @namespace iOS
+   */
+  isPlaying?: boolean;
+  /**
+   ** Value between 0.0 and 1.0 for progress bar of the list item cell.
+   * @namespace iOS
+   */
+  playbackProgress?: number;
+  /**
+   * The image from file system displayed on the trailing edge of the list item cell.
+   * @namespace iOS
+   */
+  accessoryImage?: ImageSourcePropType;
+  /**
+   * Sets the initial enabled state for Row.
+   * @default true
+   * @namespace Android
+   */
+  enabled?: boolean;
+  /**
+   * Shows an icon at the end of the row that indicates that the row is browsable.
+   * Browsable rows can be used, for example, to represent the parent row in a hierarchy of lists with child lists.
+   * If a row is browsable, then no Action or Toggle can be added to it.
+   * @namespace Android
+   */
+  browsable?: boolean;
+  /**
+   * If a row has a toggle set, then no Action or numeric decoration can be set.
+   * @namespace Android
+   */
+  toggle?: number;
+  /**
+   * Adds an additional action to the end of the row.
+   * @namespace Android
+   */
+  action?: Action<'custom'>;
+}

package/src/interfaces/ListItemUpdate.ts

@@ -0,0 +1,14 @@
+import { ListItem } from './ListItem';
+/**
+ * A list item update payload.
+ */
+export interface ListItemUpdate extends ListItem {
+  /**
+   * The section of item.
+   */
+  sectionIndex: number;
+  /**
+   * The index of item.
+   */
+  itemIndex: number;
+}

package/src/interfaces/ListSection.ts

@@ -0,0 +1,21 @@
+import { ListItem } from './ListItem';
+
+/**
+ * A section of list items that appear in a list template.
+ */
+export interface ListSection {
+  /**
+   * The section header text.
+   */
+  header?: string;
+  /**
+   * The section index title.
+   *
+   * The system displays only the first character of the section index title.
+   */
+  sectionIndexTitle?: string;
+  /**
+   * The list of items for the section.
+   */
+  items?: ListItem[];
+}