@iternio/react-native-auto-play 0.0.1

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@iternio/react-native-auto-play",
+  "version": "0.0.1",
+  "description": "Android Auto and Apple CarPlay for react-native",
+  "main": "lib/index",
+  "module": "lib/index",
+  "types": "lib/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "react-native.config.js",
+    "lib",
+    "nitrogen",
+    "android/build.gradle",
+    "android/gradle.properties",
+    "android/fix-prefab.gradle",
+    "android/CMakeLists.txt",
+    "android/src",
+    "ios/**/*.h",
+    "ios/**/*.m",
+    "ios/**/*.mm",
+    "ios/**/*.cpp",
+    "ios/**/*.swift",
+    "app.plugin.js",
+    "nitro.json",
+    "*.podspec",
+    "README.md"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf android/build node_modules/**/android/build lib",
+    "lint": "biome check src",
+    "lint-ci": "biome ci src --reporter=summary",
+    "typescript": "tsc",
+    "generate:fonts": "node ./assets/symbolFont/bundleAsset.js",
+    "specs": "nitrogen --logLevel=\"debug\"",
+    "prepare": "tsc && nitrogen && npm run generate:fonts"
+  },
+  "keywords": [
+    "react-native",
+    "nitro"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Iternio-Planning-AB/react-native-auto-play.git"
+  },
+  "author": "Manuel Auer <g4rb4g3@gmail.com> (https://github.com/g4rb4g3)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Iternio-Planning-AB/react-native-auto-play/issues"
+  },
+  "homepage": "https://github.com/Iternio-Planning-AB/react-native-auto-play#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.12",
+    "@types/react": "^19.1.03",
+    "nitrogen": "^0.31.6",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-nitro-modules": "*"
+  },
+  "dependencies": {
+    "react-native-uuid": "^2.0.3"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,16 @@
+// https://github.com/react-native-community/cli/blob/main/docs/dependencies.md
+
+module.exports = {
+  dependency: {
+    platforms: {
+      /**
+       * @type {import('@react-native-community/cli-types').IOSDependencyParams}
+       */
+      ios: {},
+      /**
+       * @type {import('@react-native-community/cli-types').AndroidDependencyParams}
+       */
+      android: {},
+    },
+  },
+}

package/src/AutoPlayHeadlessJsTask.ts

@@ -0,0 +1,19 @@
+import { AppRegistry, Platform, type Task, type TaskProvider } from 'react-native';
+import { HybridAutoPlay } from '.';
+
+const taskProvider: TaskProvider = (): Task => () =>
+  new Promise((resolve) => {
+    const remove = HybridAutoPlay.addListener('didDisconnect', () => {
+      resolve();
+      remove();
+    });
+  });
+
+const registerHeadlessTask = () => {
+  if (Platform.OS !== 'android') {
+    return;
+  }
+  AppRegistry.registerHeadlessTask('AndroidAutoHeadlessJsTask', taskProvider);
+};
+
+export default { registerHeadlessTask };

package/src/components/MapTemplateContext.tsx

@@ -0,0 +1,15 @@
+import type React from 'react';
+import { createContext } from 'react';
+import type { MapTemplate } from '..';
+
+export const MapTemplateContext = createContext<MapTemplate | null>(null);
+
+export function MapTemplateProvider({
+  children,
+  mapTemplate,
+}: {
+  children: React.ReactNode;
+  mapTemplate: MapTemplate;
+}) {
+  return <MapTemplateContext.Provider value={mapTemplate}>{children}</MapTemplateContext.Provider>;
+}

package/src/components/SafeAreaInsetsContext.tsx

@@ -0,0 +1,32 @@
+import type React from 'react';
+import { createContext, useEffect, useState } from 'react';
+import { HybridAutoPlay, type SafeAreaInsets } from '..';
+
+const DEFAULT: SafeAreaInsets = { top: 0, bottom: 0, left: 0, right: 0 };
+
+export const SafeAreaInsetsContext = createContext<SafeAreaInsets>(DEFAULT);
+
+export function SafeAreaInsetsProvider({
+  children,
+  moduleName,
+}: {
+  children: React.ReactNode;
+  moduleName: string;
+}) {
+  const [insets, setInsets] = useState<SafeAreaInsets>(DEFAULT);
+
+  useEffect(() => {
+    const removeSafeAreaInsetsListener = HybridAutoPlay.addSafeAreaInsetsListener(
+      moduleName,
+      (safeAreaInsets) => {
+        setInsets(safeAreaInsets);
+      }
+    );
+
+    return () => {
+      removeSafeAreaInsetsListener();
+    };
+  }, [moduleName]);
+
+  return <SafeAreaInsetsContext.Provider value={insets}>{children}</SafeAreaInsetsContext.Provider>;
+}

package/src/components/SafeAreaView.tsx

@@ -0,0 +1,24 @@
+import { StyleSheet, View, type ViewProps } from 'react-native';
+import { useSafeAreaInsets } from '../hooks/useSafeAreaInsets';
+
+export const SafeAreaView = (props: ViewProps) => {
+  const { style, ...rest } = props;
+  const safeAreaInsets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        style,
+        {
+          ...StyleSheet.absoluteFillObject,
+          paddingTop: safeAreaInsets.top,
+          paddingBottom: safeAreaInsets.bottom,
+          paddingRight: safeAreaInsets.right,
+          paddingLeft: safeAreaInsets.left,
+          pointerEvents: 'box-none',
+        },
+      ]}
+      {...rest}
+    />
+  );
+};

package/src/hooks/useAndroidAutoTelemetry.ts

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { type Permission, PermissionsAndroid } from 'react-native';
+import { HybridAndroidAutoTelemetry, HybridAutoPlay } from '..';
+
+import type { AndroidAutoPermissions, Telemetry } from '../types/Telemetry';
+
+interface Props {
+  /**
+   * Can be used to delay asking for permissions if set to false. True by default.
+   * Can be used to request other permissions first, so the permission request dialogs do not overlap.
+   * @default true
+   */
+  requestTelemetryPermissions?: boolean;
+  /**
+   * The permissions to check.
+   */
+  requiredPermissions: Array<AndroidAutoPermissions>;
+}
+
+/**
+ * Hook to check if the telemetry permissions are granted. If the permissions are not granted, it will request them from the user.
+ *
+ * @namespace Android
+ * @param requestTelemetryPermissions If true, the telemetry permissions will be requested from the user. Can be set to false initially, in case other permissions need to be requested first, so the permission request dialogs do not overlap.
+ * @param requiredPermissions The permissions to check.
+ */
+export const useAndroidAutoTelemetry = ({
+  requestTelemetryPermissions = true,
+  requiredPermissions,
+}: Props) => {
+  const [permissionsGranted, setPermissionsGranted] = useState(false);
+  const [telemetry, setTelemetry] = useState<Telemetry | undefined>(undefined);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [isConnected, setIsConnected] = useState(false);
+
+  useEffect(() => {
+    const removeDidConnect = HybridAutoPlay.addListener('didConnect', () => setIsConnected(true));
+    const removeDidDisconnect = HybridAutoPlay.addListener('didDisconnect', () =>
+      setIsConnected(false)
+    );
+
+    setIsConnected(HybridAutoPlay.isConnected());
+
+    return () => {
+      removeDidConnect();
+      removeDidDisconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    const checkPermissions = async () => {
+      const state = await Promise.all(
+        requiredPermissions.map((permission) =>
+          PermissionsAndroid.check(permission as Permission).catch(() => false)
+        )
+      );
+
+      setPermissionsGranted(state.every((granted) => granted));
+    };
+
+    checkPermissions();
+  }, [requiredPermissions]);
+
+  useEffect(() => {
+    if (!isConnected || !permissionsGranted) {
+      return;
+    }
+
+    const remove = HybridAndroidAutoTelemetry?.registerTelemetryListener((tlm, errorMessage) => {
+      setError(errorMessage);
+      setTelemetry(tlm);
+    });
+
+    return () => {
+      remove?.();
+    };
+  }, [isConnected, permissionsGranted]);
+
+  useEffect(() => {
+    if (requestTelemetryPermissions && requiredPermissions.length > 0) {
+      // PermissionsAndroid is not aware of automotive permissions
+      PermissionsAndroid.requestMultiple(requiredPermissions as Array<Permission>)
+        .then((value) => {
+          const isGranted = requiredPermissions.every(
+            (permission) => value[permission as Permission] === 'granted'
+          );
+          if (!isGranted) {
+            console.warn('*** Android Auto telemetry permissions not granted');
+            return;
+          }
+          setPermissionsGranted(true);
+        })
+        .catch((e) => console.error('*** Android Auto telemetry permissions error', e));
+    }
+    return;
+  }, [requestTelemetryPermissions, requiredPermissions]);
+
+  return {
+    /**
+     * True if the telemetry permissions are granted, false otherwise.
+     */
+    permissionsGranted,
+    /**
+     * The telemetry data.
+     */
+    telemetry,
+    /**
+     * The error message if the telemetry listener failed to start.
+     */
+    error,
+  };
+};

package/src/hooks/useMapTemplate.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { MapTemplateContext } from '../components/MapTemplateContext';
+
+/**
+ * provides access to the map template
+ * obviously this works only on the map template component and its children
+ */
+export const useMapTemplate = () => {
+  return useContext(MapTemplateContext);
+};

package/src/hooks/useSafeAreaInsets.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { SafeAreaInsetsContext } from '../components/SafeAreaInsetsContext';
+
+export const useSafeAreaInsets = () => {
+  return useContext(SafeAreaInsetsContext);
+};

package/src/index.ts

@@ -0,0 +1,53 @@
+import { Platform } from 'react-native';
+import { NitroModules } from 'react-native-nitro-modules';
+import AutoPlayHeadlessJsTask from './AutoPlayHeadlessJsTask';
+import type { AndroidAutoTelemetry as NitroAndroidAutoTelemetry } from './specs/AndroidAutoTelemetry.nitro';
+import type { AutoPlay as NitroAutoPlay } from './specs/AutoPlay.nitro';
+
+AutoPlayHeadlessJsTask.registerHeadlessTask();
+
+export const HybridAutoPlay = NitroModules.createHybridObject<NitroAutoPlay>('AutoPlay');
+
+export const HybridAndroidAutoTelemetry =
+  Platform.OS === 'android'
+    ? NitroModules.createHybridObject<NitroAndroidAutoTelemetry>('AndroidAutoTelemetry')
+    : null;
+
+/**
+ * These are the static module names for the app running on the mobile device, head unit screen and the CarPlay dashboard.
+ * Clusters generate uuids on native side that are passed in the RootComponentInitialProps
+ */
+export enum AutoPlayModules {
+  App = 'main',
+  AutoPlayRoot = 'AutoPlayRoot',
+  CarPlayDashboard = 'CarPlayDashboard',
+}
+
+export * from './components/SafeAreaView';
+export * from './hooks/useAndroidAutoTelemetry';
+export * from './hooks/useMapTemplate';
+export * from './hooks/useSafeAreaInsets';
+export * from './scenes/AutoPlayCluster';
+export * from './scenes/CarPlayDashboardScene';
+export * from './templates/GridTemplate';
+export * from './templates/InformationTemplate';
+export * from './templates/ListTemplate';
+export * from './templates/MapTemplate';
+export * from './templates/MessageTemplate';
+export * from './templates/SearchTemplate';
+export * from './templates/Template';
+export * from './types/Button';
+export * from './types/Event';
+export * from './types/Image';
+export * from './types/Maneuver';
+export * from './types/RootComponent';
+export * from './types/Telemetry';
+export * from './types/Text';
+export * from './types/Trip';
+export type {
+  AlertPriority,
+  NavigationAlert as Alert,
+  NavigationAlertAction as AlertAction,
+} from './utils/NitroAlert';
+export type { ThemedColor } from './utils/NitroColor';
+export type { GridButton } from './utils/NitroGrid';

package/src/scenes/AutoPlayCluster.ts

@@ -0,0 +1,160 @@
+import React from 'react';
+import { AppRegistry, Platform } from 'react-native';
+import { NitroModules } from 'react-native-nitro-modules';
+import { SafeAreaInsetsProvider } from '../components/SafeAreaInsetsContext';
+import type { Cluster as NitroCluster, ZoomEvent } from '../specs/Cluster.nitro';
+import type { ColorScheme, RootComponentInitialProps } from '../types/RootComponent';
+import type { AutoAttributedString } from '../utils/NitroAttributedString';
+import { NitroImageUtil } from '../utils/NitroImage';
+
+const HybridCluster = NitroModules.createHybridObject<NitroCluster>('Cluster');
+
+class Cluster {
+  private component: React.ComponentType<RootComponentInitialProps> | null = null;
+  private attributedInactiveDescriptionVariants: Array<AutoAttributedString> = [];
+  /**
+   * Holds all cluster scene/session IDs and if they have a window/surface connected
+   */
+  private clusters: { [key: string]: boolean } = {};
+
+  constructor() {
+    HybridCluster.addListener('didConnect', (clusterId) => {
+      if (this.clusters[clusterId] != null) {
+        // in case didConnectWithWindow fires before didConnect
+        return;
+      }
+      this.clusters[clusterId] = false;
+      this.applyAttributedInactiveDescriptionVariants();
+    });
+    HybridCluster.addListener('didConnectWithWindow', (clusterId) => {
+      this.clusters[clusterId] = false;
+      this.registerComponent().catch((e) => {
+        console.error(e);
+      });
+    });
+    HybridCluster.addListener('didDisconnectFromWindow', (clusterId) => {
+      if (this.clusters[clusterId] == null) {
+        // in case didDisconnect fires before didDisconnectFromWindow
+        return;
+      }
+      this.clusters[clusterId] = false;
+    });
+    HybridCluster.addListener('didDisconnect', (clusterId) => {
+      delete this.clusters[clusterId];
+    });
+  }
+
+  private async registerComponent() {
+    const { component } = this;
+
+    if (component == null) {
+      return;
+    }
+
+    const clusterIds = Object.entries(this.clusters)
+      .filter(([_, registered]) => !registered)
+      .map(([clusterId]) => clusterId);
+
+    for (const clusterId of clusterIds) {
+      AppRegistry.registerComponent(
+        clusterId,
+        () => (props) =>
+          React.createElement(SafeAreaInsetsProvider, {
+            moduleName: clusterId,
+            // biome-ignore lint/correctness/noChildrenProp: there is no other way in a ts file
+            children: React.createElement(component, props),
+          })
+      );
+
+      this.clusters[clusterId] = true;
+
+      await HybridCluster.initRootView(clusterId);
+    }
+
+    this.applyAttributedInactiveDescriptionVariants();
+  }
+
+  private applyAttributedInactiveDescriptionVariants() {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+
+    const variants = this.attributedInactiveDescriptionVariants.map((v) => ({
+      ...v,
+      images: v.images?.map((i) => ({ ...i, image: NitroImageUtil.convert(i.image) })),
+    }));
+
+    for (const clusterId of Object.keys(this.clusters)) {
+      HybridCluster.setAttributedInactiveDescriptionVariants(clusterId, variants);
+    }
+  }
+
+  public setComponent(component: React.ComponentType<RootComponentInitialProps>) {
+    if (this.component != null) {
+      throw new Error('ClusterScene.setComponent can be called once only');
+    }
+    this.component = component;
+    return this.registerComponent();
+  }
+
+  /**
+   * sets the text that is shown while no navigation is ongoing
+   * applies specified strings to all connected cluster of content type "Instruction Card"
+   * @namespace iOS
+   */
+  public setAttributedInactiveDescriptionVariants(
+    attributedInactiveDescriptionVariants: Array<AutoAttributedString>
+  ) {
+    if (Platform.OS !== 'ios') {
+      console.warn(
+        `ClusterScene.setAttributedInactiveDescriptionVariants not supported for ${Platform.OS}`
+      );
+      return;
+    }
+    this.attributedInactiveDescriptionVariants = attributedInactiveDescriptionVariants;
+    this.applyAttributedInactiveDescriptionVariants();
+  }
+
+  public addListenerColorScheme(callback: (clusterId: string, payload: ColorScheme) => void) {
+    return HybridCluster.addListenerColorScheme(callback);
+  }
+
+  /**
+   * add listener for cluster zoom buttons
+   * @namespace iOS
+   */
+  public addListenerZoom(callback: (clusterId: string, payload: ZoomEvent) => void) {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+    return HybridCluster.addListenerZoom(callback);
+  }
+
+  /**
+   * add listener for compass enable/disable
+   * @namespace iOS
+   */
+  public addListenerCompass(callback: (clusterId: string, payload: boolean) => void) {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+    return HybridCluster.addListenerCompass(callback);
+  }
+
+  /**
+   * add listener for speed limit enable/disable
+   * @namespace iOS
+   */
+  public addListenerSpeedLimit(callback: (clusterId: string, payload: boolean) => void) {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+    return HybridCluster.addListenerSpeedLimit(callback);
+  }
+}
+
+/**
+ * @namespace Android
+ * @namespace iOS >= 15.4
+ */
+export const AutoPlayCluster = new Cluster();

package/src/scenes/CarPlayDashboardScene.ts

@@ -0,0 +1,121 @@
+import React from 'react';
+import { AppRegistry, Platform } from 'react-native';
+import { NitroModules } from 'react-native-nitro-modules';
+import { HybridAutoPlay } from '..';
+import { SafeAreaInsetsProvider } from '../components/SafeAreaInsetsContext';
+import type {
+  BaseCarPlayDashboardButton,
+  CarPlayDashboard as NitroCarPlayDashboard,
+} from '../specs/CarPlayDashboard.nitro';
+import type { EventName, VisibilityState } from '../types/Event';
+import type { AutoImage } from '../types/Image';
+import type { ColorScheme, RootComponentInitialProps } from '../types/RootComponent';
+import { NitroImageUtil } from '../utils/NitroImage';
+
+const HybridCarPlayDashboard =
+  Platform.OS === 'ios'
+    ? NitroModules.createHybridObject<NitroCarPlayDashboard>('CarPlayDashboard')
+    : null;
+
+export interface CarPlayDashboardButton extends BaseCarPlayDashboardButton {
+  image: AutoImage;
+}
+
+export type CarPlayDashboardEvent = EventName | VisibilityState;
+
+class Dashboard {
+  private component: React.ComponentType<RootComponentInitialProps> | null = null;
+  public isConnected = false;
+  public readonly id = 'CarPlayDashboard';
+
+  constructor() {
+    if (HybridCarPlayDashboard == null) {
+      return;
+    }
+    HybridCarPlayDashboard.addListener('didConnect', () => this.setIsConnected(true));
+    HybridCarPlayDashboard.addListener('didDisconnect', () => this.setIsConnected(false));
+  }
+
+  private setIsConnected(isConnected: boolean) {
+    this.isConnected = isConnected;
+    this.registerComponent();
+  }
+
+  private registerComponent() {
+    if (HybridCarPlayDashboard == null) {
+      return;
+    }
+
+    const { component, isConnected } = this;
+    if (!isConnected || component == null) {
+      return;
+    }
+
+    AppRegistry.registerComponent(
+      this.id,
+      () => (props) =>
+        React.createElement(SafeAreaInsetsProvider, {
+          moduleName: this.id,
+          // biome-ignore lint/correctness/noChildrenProp: there is no other way in a ts file
+          children: React.createElement(component, props),
+        })
+    );
+    HybridCarPlayDashboard.initRootView();
+  }
+
+  public setComponent(component: React.ComponentType<RootComponentInitialProps>) {
+    if (Platform.OS !== 'ios') {
+      console.warn(`CarPlayDashboard.setComponent is not supported on ${Platform.OS}`);
+      return;
+    }
+    if (this.component != null) {
+      throw new Error('CarPlayDashboard.setComponent can be called once only');
+    }
+    this.component = component;
+    this.registerComponent();
+  }
+
+  /**
+   * sets the dashboard shortcut buttons, make sure to supply at least one button as soon as possible,
+   * otherwise the dashboard will not show up!
+   * @namespace iOS
+   */
+  public setButtons(buttons: Array<CarPlayDashboardButton>) {
+    if (HybridCarPlayDashboard == null) {
+      console.warn(`CarPlayDashboard.setButtons is not supported on ${Platform.OS}`);
+      return;
+    }
+    HybridCarPlayDashboard.setButtons(
+      buttons.map((button) => ({ ...button, image: NitroImageUtil.convert(button.image) }))
+    );
+  }
+
+  /**
+   * attach a listener for generic notifications like didConnect, didDisconnect, ...
+   * @namespace iOS
+   * @param eventType generic events
+   * @returns callback to remove the listener
+   */
+  public addListener(event: EventName, callback: () => void) {
+    if (HybridCarPlayDashboard == null) {
+      throw new Error(`CarPlayDashboard.addListener is not supported on ${Platform.OS}`);
+    }
+    return HybridCarPlayDashboard.addListener(event, callback);
+  }
+
+  public addListenerRenderState(callback: (payload: VisibilityState) => void) {
+    if (HybridCarPlayDashboard == null) {
+      throw new Error(`CarPlayDashboard.addListener is not supported on ${Platform.OS}`);
+    }
+    return HybridAutoPlay.addListenerRenderState(this.id, callback);
+  }
+
+  public addListenerColorScheme(callback: (payload: ColorScheme) => void) {
+    if (HybridCarPlayDashboard == null) {
+      throw new Error(`CarPlayDashboard.addListener is not supported on ${Platform.OS}`);
+    }
+    return HybridCarPlayDashboard.addListenerColorScheme(callback);
+  }
+}
+
+export const CarPlayDashboard = new Dashboard();

package/src/specs/AndroidAutoTelemetry.nitro.ts

@@ -0,0 +1,14 @@
+import type { HybridObject } from 'react-native-nitro-modules';
+import type { CleanupCallback } from '../types/Event';
+import type { Telemetry } from '../types/Telemetry';
+
+export interface AndroidAutoTelemetry extends HybridObject<{ android: 'kotlin' }> {
+  /**
+   * Register a listener for Android Auto telemetry data. Should be registered only after the telemetry permissions are granted otherwise no data will be received.
+   * @param callback the callback to receive the telemetry data
+   * @param error the error message if the telemetry listener failed to start
+   * @returns callback to remove the listener
+   * @namespace Android
+   */
+  registerTelemetryListener(callback: (tlm?: Telemetry, error?: string) => void): CleanupCallback;
+}