@iternio/react-native-auto-play 0.5.14-beta.1 → 0.6.0

package/ios/templates/SearchTemplate.swift

@@ -162,7 +162,7 @@ class SearchTemplate: AutoPlayTemplate, CPSearchTemplateDelegate {
                     listTemplate.invalidate()
 
                     let _ = try await interfaceController.pushTemplate(
-                        listTemplate.template,
+                        try listTemplate.getTemplate(),
                         animated: true
                     )
                 }

package/ios/templates/TemplateStore.swift

@@ -9,8 +9,7 @@ import CarPlay
 class TemplateStore {
     /// Guards `store`. Templates are added from the JS thread (the
     /// `createXTemplate` hybrid methods are synchronous and never hop actors)
-    /// while the CarPlay delegate callbacks remove/purge them on the main
-    /// thread, and Swift dictionaries are not thread-safe.
+    /// while the CarPlay delegate callbacks remove/purge them on the main thread
     private let lock = NSLock()
     private var store: [String: AutoPlayTemplate] = [:]
 
@@ -21,7 +20,7 @@ class TemplateStore {
     }
 
     func getCPTemplate(templateId key: String) -> CPTemplate? {
-        return withLock { store[key] }?.getTemplate()
+        return try? withLock { store[key] }?.getTemplate()
     }
 
     func getTemplate(templateId: String) throws -> AutoPlayTemplate {
@@ -36,9 +35,6 @@ class TemplateStore {
     }
 
     func removeTemplate(templateId: String) {
-        // Remove first, then notify outside the lock: `onPopped` runs a JS
-        // callback which can re-enter the store (see
-        // VoiceInputTemplate.onDidDisappear).
         let removed = withLock { store.removeValue(forKey: templateId) }
 
         removed?.onPopped()
@@ -53,11 +49,10 @@ class TemplateStore {
     }
 
     func purge() {
-        // These templates were popped by a native CarPlay button we cannot
-        // intercept, so they need an `onPopped()` just like an explicit pop.
+        /// These templates were popped by a native CarPlay button we cannot intercept, so they need an `onPopped()`
         let removed = withLock {
             let searchTemplates = store.filter {
-                $0.value.getTemplate() is CPSearchTemplate
+                (try? $0.value.getTemplate() is CPSearchTemplate) ?? false
             }
             searchTemplates.keys.forEach { store.removeValue(forKey: $0) }
 
@@ -75,12 +70,7 @@ class TemplateStore {
     }
 
     func disconnect() {
-        // The session is gone, so these templates will never be popped
-        // individually. Without an `onPopped()` here anything the app tied to a
-        // template's lifetime (event listeners, timers, cached render state)
-        // leaks for the rest of the app lifetime, and the host app keeps
-        // running after a disconnect. Android does the same on
-        // `Lifecycle.Event.ON_DESTROY` (AndroidAutoScreen.kt).
+        /// notify every visible template about it being gone
         let removed = withLock {
             let templates = Array(store.values)
             store = [:]

package/ios/utils/SymbolFont.swift

@@ -65,7 +65,8 @@ class SymbolFont {
         foregroundColor: UIColor,
         backgroundColor: UIColor,
         size: CGFloat,
-        fontScale: CGFloat
+        fontScale: CGFloat,
+        displayScale: CGFloat
     ) -> UIImage? {
         guard let font = uiFont(for: glyphImage, size: size, fontScale: fontScale) else {
             return nil
@@ -89,7 +90,7 @@ class SymbolFont {
         )
 
         // Start drawing
-        UIGraphicsBeginImageContextWithOptions(canvasSize, false, 0)
+        UIGraphicsBeginImageContextWithOptions(canvasSize, false, displayScale)
         guard let context = UIGraphicsGetCurrentContext() else {
             return nil
         }
@@ -128,7 +129,8 @@ class SymbolFont {
                     value: backgroundColor.lightColor
                 ),
                 size: size,
-                fontScale: fontScale
+                fontScale: fontScale,
+                displayScale: traitCollection.displayScale
             ),
             let darkImage = imageFromGlyph(
                 glyphImage: glyphImage,
@@ -139,7 +141,8 @@ class SymbolFont {
                     value: backgroundColor.darkColor
                 ),
                 size: size,
-                fontScale: fontScale
+                fontScale: fontScale,
+                displayScale: traitCollection.displayScale
             )
         else {
             return nil
@@ -148,15 +151,19 @@ class SymbolFont {
         // Create a UIImageAsset that contains both light and dark variants
         let imageAsset = UIImageAsset()
 
+        let displayScaleTrait = UITraitCollection(displayScale: traitCollection.displayScale)
+
         // Register the light image for light trait collection
         let lightTraits = UITraitCollection(traitsFrom: [
-            UITraitCollection(userInterfaceStyle: .light)
+            UITraitCollection(userInterfaceStyle: .light),
+            displayScaleTrait,
         ])
         imageAsset.register(lightImage, with: lightTraits)
 
         // Register the dark image for dark trait collection
         let darkTraits = UITraitCollection(traitsFrom: [
-            UITraitCollection(userInterfaceStyle: .dark)
+            UITraitCollection(userInterfaceStyle: .dark),
+            displayScaleTrait,
         ])
         imageAsset.register(darkImage, with: darkTraits)
 
@@ -167,34 +174,12 @@ class SymbolFont {
     static func imageFromNitroImage(
         image: GlyphImage?,
         size: CGFloat = 32,
-        noImageAsset: Bool = false,
         traitCollection: UITraitCollection
     ) -> UIImage? {
         guard let image else { return nil }
 
         let fontScale = image.fontScale ?? 1.0
 
-        if noImageAsset {
-            let foregroundColor = Parser.doubleToColor(
-                value: traitCollection.userInterfaceStyle == .light
-                    ? image.color.lightColor : image.color.darkColor
-            )
-
-            let backgroundColor = Parser.doubleToColor(
-                value: traitCollection.userInterfaceStyle == .light
-                    ? image.backgroundColor.lightColor
-                    : image.backgroundColor.darkColor
-            )
-
-            return SymbolFont.imageFromGlyph(
-                glyphImage: image,
-                foregroundColor: foregroundColor,
-                backgroundColor: backgroundColor,
-                size: size,
-                fontScale: fontScale
-            )
-        }
-
         return SymbolFont.imageFromGlyph(
             glyphImage: image,
             size: size,

package/lib/Constants.d.ts

@@ -0,0 +1,4 @@
+declare const Constants: Readonly<{
+    isIos27OrGreater: boolean;
+}>;
+export { Constants };

package/lib/Constants.js

@@ -0,0 +1,6 @@
+import { Platform } from 'react-native';
+const isIos27OrGreater = Platform.OS === 'ios' && Math.floor(Number(Platform.Version)) >= 27;
+const Constants = {
+    isIos27OrGreater,
+};
+export { Constants };

package/lib/index.d.ts

@@ -14,6 +14,7 @@ export declare enum AutoPlayModules {
     AutoPlayRoot = "AutoPlayRoot",
     CarPlayDashboard = "CarPlayDashboard"
 }
+export * from './Constants';
 export * from './components/SafeAreaView';
 export * from './hooks/useAndroidAutoTelemetry';
 export * from './hooks/useFocusedEffect';

package/lib/index.js

@@ -20,6 +20,7 @@ export var AutoPlayModules;
     AutoPlayModules["AutoPlayRoot"] = "AutoPlayRoot";
     AutoPlayModules["CarPlayDashboard"] = "CarPlayDashboard";
 })(AutoPlayModules || (AutoPlayModules = {}));
+export * from './Constants';
 export * from './components/SafeAreaView';
 export * from './hooks/useAndroidAutoTelemetry';
 export * from './hooks/useFocusedEffect';

package/lib/specs/MapTemplate.nitro.d.ts

@@ -6,6 +6,7 @@ import type { TripConfig, TripPoint, TripPreviewTextConfiguration, TripsConfig }
 import type { NitroNavigationAlert } from '../utils/NitroAlert';
 import type { NitroManeuver } from '../utils/NitroManeuver';
 import type { NitroMapButton } from '../utils/NitroMapButton';
+import type { NitroOptionsPanelConfig } from '../utils/NitroOptionsPanel';
 import type { NitroTemplateConfig } from './AutoPlay.nitro';
 interface MapTemplateConfig extends NitroTemplateConfig, NitroMapTemplateConfig {
 }
@@ -23,8 +24,9 @@ export interface MapTemplate extends HybridObject<{
     updateVisibleTravelEstimate(templateId: string, visibleTravelEstimate: VisibleTravelEstimate): void;
     updateTravelEstimates(templateId: string, steps: Array<TripPoint>): void;
     updateManeuvers(templateId: string, maneuvers: NitroManeuver): void;
-    startNavigation(templateId: string, trip: TripConfig): void;
+    startNavigation(templateId: string, trip: TripConfig): Promise<void>;
     stopNavigation(templateId: string): void;
     setManeuverState(templateId: string, state: ManeuverState): void;
+    updateOptionsPanel(templateId: string, config?: NitroOptionsPanelConfig): Promise<void>;
 }
 export {};

package/lib/templates/GridTemplate.d.ts

@@ -1,12 +1,18 @@
 import type { AutoText } from '../types/Text';
 import { type NitroAction } from '../utils/NitroAction';
 import { type GridButton, type NitroGridButton } from '../utils/NitroGrid';
-import type { BaseMapTemplateConfig } from './MapTemplate';
+import type { BaseMapTemplateConfig, PanelHeaderActions } from './MapTemplate';
 import { type HeaderActions, type NitroBaseMapTemplateConfig, Template, type TemplateConfig } from './Template';
+/**
+ * Controls the size of Android grid items. A selected size requires Android Car API 8.
+ * @namespace Android
+ */
+export type GridImageSize = 'unset' | 'large' | 'medium' | 'small';
 export interface NitroGridTemplateConfig extends TemplateConfig {
     headerActions?: Array<NitroAction>;
     title: AutoText;
     buttons: Array<NitroGridButton>;
+    imageSize?: GridImageSize;
     mapConfig?: NitroBaseMapTemplateConfig;
 }
 export type GridTemplateConfig = Omit<NitroGridTemplateConfig, 'headerActions' | 'buttons' | 'mapConfig'> & {
@@ -16,10 +22,24 @@ export type GridTemplateConfig = Omit<NitroGridTemplateConfig, 'headerActions' |
     headerActions?: HeaderActions<GridTemplate>;
     buttons: Array<GridButton<GridTemplate>>;
     /**
-     * If mapConfig is defined, it will use a MapWithContentTemplate with the current template. This results in a GridTemplate with a map in background. No actions need to be specified, can be empty object.
+     * Controls the size of all images in the Android grid. Defaults to `unset`, which preserves
+     * the platform's standard grid layout. `large`, `medium`, and `small` require Android Car API
+     * 8. Ignored (with a `__DEV__` warning) when `mapConfig` is also set — `MapWithContentTemplate`
+     * does not support the sized grid content type.
      * @namespace Android
      */
-    mapConfig?: BaseMapTemplateConfig<GridTemplate>;
+    imageSize?: GridImageSize;
+    /**
+     * If mapConfig is defined, it will use a MapWithContentTemplate with the current template. This results in a GridTemplate with a map in background. No actions need to be specified, can be empty object.
+     * @namespace Android - uses MapWithContentTemplate
+     * @namespace iOS - renders as a CPMapPanel on the current root map template (iOS 27+);
+     * `headerActions` here is Android-only — on iOS this template's own `headerActions` are
+     * applied to the root map template's nav bar instead, since CarPlay has no separate header
+     * for the map behind a panel.
+     */
+    mapConfig?: Omit<BaseMapTemplateConfig<GridTemplate>, 'headerActions'> & {
+        headerActions?: PanelHeaderActions<GridTemplate>;
+    };
 };
 export declare class GridTemplate extends Template<GridTemplateConfig, HeaderActions<GridTemplate>> {
     private template;

package/lib/templates/GridTemplate.js

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import { NitroModules } from 'react-native-nitro-modules';
 import { NitroActionUtil } from '../utils/NitroAction';
 import { NitroGridUtil } from '../utils/NitroGrid';
@@ -9,6 +10,13 @@ export class GridTemplate extends Template {
     constructor(config) {
         super(config);
         const { headerActions, buttons, mapConfig, ...rest } = config;
+        if (__DEV__ &&
+            Platform.OS === 'android' &&
+            mapConfig != null &&
+            rest.imageSize != null &&
+            rest.imageSize !== 'unset') {
+            console.warn('GridTemplate: imageSize is ignored on Android when mapConfig is set — MapWithContentTemplate does not support the sized grid content type');
+        }
         const nitroConfig = {
             ...rest,
             id: this.id,

package/lib/templates/InformationTemplate.d.ts

@@ -3,8 +3,9 @@ import type { AutoText } from '../types/Text';
 import { type NitroAction } from '../utils/NitroAction';
 import { type NitroSection } from '../utils/NitroSection';
 import type { TextRow } from './ListTemplate';
-import type { BaseMapTemplateConfig } from './MapTemplate';
+import type { BaseMapTemplateConfig, PanelActionsIos, PanelHeaderActions } from './MapTemplate';
 import { type HeaderActions, type NitroBaseMapTemplateConfig, Template, type TemplateConfig } from './Template';
+type InformationActionsAndroid<T> = [CustomActionButtonAndroid<T>] | [CustomActionButtonAndroid<T>, CustomActionButtonAndroid<T>];
 export interface NitroInformationTemplateConfig extends TemplateConfig {
     headerActions?: Array<NitroAction>;
     title: AutoText;
@@ -13,7 +14,7 @@ export interface NitroInformationTemplateConfig extends TemplateConfig {
     mapConfig?: NitroBaseMapTemplateConfig;
 }
 export type InformationItems = [TextRow] | [TextRow, TextRow] | [TextRow, TextRow, TextRow] | [TextRow, TextRow, TextRow, TextRow];
-export type InformationTemplateConfig = Omit<NitroInformationTemplateConfig, 'headerActions' | 'section' | 'mapConfig' | 'actions'> & {
+type InformationTemplateBaseConfig = Omit<NitroInformationTemplateConfig, 'headerActions' | 'section' | 'mapConfig' | 'actions'> & {
     /**
      * action buttons, usually at the the top right on Android and a top bar on iOS
      */
@@ -23,30 +24,55 @@ export type InformationTemplateConfig = Omit<NitroInformationTemplateConfig, 'he
      * @namespace iOS this is an InformationTemplate, ⚠️ the row image is NOT supported
      */
     items?: InformationItems;
-    /**
-     * If mapConfig is defined, it will use a MapWithContentTemplate with the current template. This results in a PaneTemplate with a map in background. No actions need to be specified, can be empty object.
-     * @namespace Android
-     */
-    mapConfig?: BaseMapTemplateConfig<InformationTemplate>;
+};
+/**
+ * `actions`/`mapConfig` are a discriminated union — `mapConfig` restricts `actions.ios` to at
+ * most one `TextButton` plus one icon-only `ImageButton` (a `CPMapPanel` can't show more), vs. up
+ * to three `TextButton`s otherwise. If your `mapConfig` value comes from a variable/prop rather
+ * than an inline literal, TS can't narrow which branch applies — assign it to a local `const` and
+ * branch with `if (mapConfig) { ... } else { ... }` into two separate constructor calls instead
+ * of passing it straight through to one.
+ */
+export type InformationTemplateConfig = InformationTemplateBaseConfig & ({
+    mapConfig?: undefined;
     /**
      * @namespace Android up to 2 buttons of type TextButton, TextAndImageButton or ImageButton
      * @namespace iOS - up to 3 buttons of type TextButton
      */
     actions?: {
-        android?: [CustomActionButtonAndroid<InformationTemplate>] | [
-            CustomActionButtonAndroid<InformationTemplate>,
-            CustomActionButtonAndroid<InformationTemplate>
-        ];
+        android?: InformationActionsAndroid<InformationTemplate>;
         ios?: [
             TextButton<InformationTemplate>,
             TextButton<InformationTemplate>,
             TextButton<InformationTemplate>
         ] | [TextButton<InformationTemplate>, TextButton<InformationTemplate>] | [TextButton<InformationTemplate>];
     };
-};
+} | {
+    /**
+     * If mapConfig is defined, it will use a MapWithContentTemplate with the current template. This results in a PaneTemplate with a map in background. No actions need to be specified, can be empty object.
+     * @namespace Android - uses MapWithContentTemplate
+     * @namespace iOS - renders as a CPMapPanel on the current root map template (iOS 27+);
+     * `headerActions` here is Android-only — on iOS this template's own `headerActions` are
+     * applied to the root map template's nav bar instead, since CarPlay has no separate
+     * header for the map behind a panel.
+     */
+    mapConfig: Omit<BaseMapTemplateConfig<InformationTemplate>, 'headerActions'> & {
+        headerActions?: PanelHeaderActions<InformationTemplate>;
+    };
+    /**
+     * @namespace Android up to 2 buttons of type TextButton, TextAndImageButton or ImageButton
+     * @namespace iOS - the panel can only show one TextButton plus one optional icon-only
+     * ImageButton, see PanelActionsIos
+     */
+    actions?: {
+        android?: InformationActionsAndroid<InformationTemplate>;
+        ios?: PanelActionsIos<InformationTemplate>;
+    };
+});
 export declare class InformationTemplate extends Template<InformationTemplateConfig, HeaderActions<InformationTemplate>> {
     private template;
     constructor(config: InformationTemplateConfig);
     updateItems(items?: InformationItems): Promise<void>;
     private getSection;
 }
+export {};

package/lib/templates/ListTemplate.d.ts

@@ -1,50 +1,14 @@
-import type { AutoImage } from '../types/Image';
 import type { AutoText } from '../types/Text';
 import { type NitroAction } from '../utils/NitroAction';
-import { type NitroSection } from '../utils/NitroSection';
-import type { BaseMapTemplateConfig } from './MapTemplate';
+import { type NitroSection, type Section } from '../utils/NitroSection';
+import type { BaseMapTemplateConfig, PanelHeaderActions } from './MapTemplate';
 import { type HeaderActions, type NitroBaseMapTemplateConfig, Template, type TemplateConfig } from './Template';
-type BaseRow = {
-    title: AutoText;
-    enabled?: boolean;
-    image?: AutoImage;
-};
-export type DefaultRow<T> = BaseRow & {
-    type: 'default';
-    /**
-     * adds a chevron at the end of the row
-     */
-    browsable?: boolean;
-    onPress: (template: T) => void;
-    detailedText?: AutoText;
-};
-export type ToggleRow<T> = BaseRow & {
-    type: 'toggle';
-    checked: boolean;
-    onPress: (template: T, checked: boolean) => void;
-};
-export type RadioRow<T> = BaseRow & {
-    type: 'radio';
-    onPress: (template: T) => void;
-    selected?: boolean;
-};
-export type TextRow = BaseRow & {
-    type: 'text';
-    detailedText?: AutoText;
-};
-export type MultiSection<T> = {
-    type: 'default';
-    title: string;
-    items: Array<DefaultRow<T> | ToggleRow<T> | TextRow>;
-} | {
-    type: 'radio';
-    title: string;
-    items: Array<RadioRow<T>>;
-};
-export type SingleSection<T> = {
-    [K in MultiSection<T> as K['type']]: Omit<K, 'title' | 'detailedText'>;
-}[MultiSection<T>['type']];
-export type Section<T> = Array<MultiSection<T>> | SingleSection<T>;
+/**
+ * Controls the Android image size for a list item.
+ * @namespace Android
+ */
+export type ListImageType = 'large' | 'medium' | 'small' | 'extra_small' | 'icon';
+export type { DefaultRow, MultiSection, RadioRow, Section, SingleSection, TextRow, ToggleRow, WaypointCoordinate, WaypointRow, } from '../utils/NitroSection';
 export interface NitroListTemplateConfig extends TemplateConfig {
     headerActions?: Array<NitroAction>;
     title: AutoText;
@@ -65,13 +29,18 @@ export type ListTemplateConfig = Omit<NitroListTemplateConfig, 'headerActions' |
     sections?: Section<ListTemplate>;
     /**
      * If mapConfig is defined, it will use a MapWithContentTemplate with the current template. This results in a ListTemplate with a map in background. No actions need to be specified, can be empty object.
-     * @namespace Android
+     * @namespace Android - uses MapWithContentTemplate
+     * @namespace iOS - renders as a CPMapPanel on the current root map template (iOS 27+);
+     * `headerActions` here is Android-only — on iOS this template's own `headerActions` are
+     * applied to the root map template's nav bar instead, since CarPlay has no separate header
+     * for the map behind a panel.
      */
-    mapConfig?: BaseMapTemplateConfig<ListTemplate>;
+    mapConfig?: Omit<BaseMapTemplateConfig<ListTemplate>, 'headerActions'> & {
+        headerActions?: PanelHeaderActions<ListTemplate>;
+    };
 };
 export declare class ListTemplate extends Template<ListTemplateConfig, HeaderActions<ListTemplate>> {
     private template;
     constructor(config: ListTemplateConfig);
     updateSections(sections?: Section<ListTemplate>): Promise<void>;
 }
-export {};

package/lib/templates/MapTemplate.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { AutoText } from '..';
-import type { ActionButtonAndroid, MapButton, MapPanButton } from '../types/Button';
+import type { ActionButtonAndroid, ImageButton, MapButton, MapPanButton, TextButton } from '../types/Button';
 import type { AutoManeuver, ManeuverState } from '../types/Maneuver';
 import type { ColorScheme, RootComponentInitialProps } from '../types/RootComponent';
 import type { TripConfig, TripPoint, TripPreviewTextConfiguration, TripsConfig } from '../types/Trip';
@@ -8,7 +8,9 @@ import { type NitroAction } from '../utils/NitroAction';
 import { type NavigationAlert } from '../utils/NitroAlert';
 import { type NitroColor, type ThemedColor } from '../utils/NitroColor';
 import { NitroMapButton } from '../utils/NitroMapButton';
+import { type OptionsPanelConfig } from '../utils/NitroOptionsPanel';
 import { type HeaderActionsIos, type NitroBaseMapTemplateConfig, Template, type TemplateConfig } from './Template';
+export type { ChargerLocation, ChargerOutlet, ChargingConnector, OptionsPanelChargerSection, OptionsPanelConfig, OptionsPanelGridSection, OptionsPanelListSection, OptionsPanelSection, } from '../utils/NitroOptionsPanel';
 export type Point = {
     x: number;
     y: number;
@@ -68,6 +70,17 @@ export type MapHeaderActions<T> = {
     android?: HeaderActionsAndroidMap<T>;
     ios?: HeaderActionsIos<T>;
 };
+/**
+ * @namespace iOS - not supported; CarPlay has no separate header for the map behind a panel, so
+ * the panel template's own `headerActions` are applied to the root map template's nav bar instead.
+ */
+export type PanelHeaderActions<T> = Omit<MapHeaderActions<T>, 'ios'>;
+/**
+ * @namespace iOS - a CPMapPanel can only show one CPTextButton (with a title) and one
+ * optional icon-only button (any title is dropped natively), so a second action must be an
+ * ImageButton rather than a TextButton, and a third action isn't supported at all.
+ */
+export type PanelActionsIos<T> = [TextButton<T>] | [TextButton<T>, ImageButton<T>];
 export type BaseMapTemplateConfig<T> = {
     /**
      * buttons that represent actions on the map template, usually on the bottom right corner
@@ -85,6 +98,12 @@ export type MapTemplateConfig = Omit<NitroMapTemplateConfig, 'mapButtons' | 'hea
      * react component that is rendered
      */
     component: React.ComponentType<RootComponentInitialProps>;
+    /**
+     * the panel shown when tapping the ellipsis button next to the travel estimates during active navigation (iOS 27+).
+     * No-op on Android
+     * @namespace iOS
+     */
+    optionsPanel?: OptionsPanelConfig<MapTemplate>;
     /**
      * Notification that navigation was stopped. May occur when another source such as the car head unit starts navigating.
      * The navigation session on Android Auto/CarPlay is stopped already when this callback is triggered, make sure to stop other things like TTS too.
@@ -110,6 +129,11 @@ export declare class MapTemplate extends Template<MapTemplateConfig, MapTemplate
     id: string;
     private template;
     constructor(config: MapTemplateConfig);
+    /**
+     * @namespace iOS updates the panel shown when tapping the ellipsis button
+     * next to the travel estimates during navigation (iOS 27+).
+     */
+    updateOptionsPanel(optionsPanel?: OptionsPanelConfig<MapTemplate>): Promise<void> | undefined;
     setMapButtons(mapButtons: MapTemplateConfig['mapButtons']): Promise<void>;
     setHeaderActions(headerActions: MapTemplateConfig['headerActions']): Promise<void>;
     /**
@@ -155,7 +179,7 @@ export declare class MapTemplate extends Template<MapTemplateConfig, MapTemplate
      * either use showTripSelector to show a set of trips and let the user start the navigation session
      * or use this to start a navigation session without asking the user
      */
-    startNavigation(trip: TripConfig): void;
+    startNavigation(trip: TripConfig): Promise<void>;
     stopNavigation(): void;
     /**
      * Sets the current maneuver state indicating progress within a maneuver.

package/lib/templates/MapTemplate.js

@@ -10,6 +10,7 @@ import { NitroAlertUtil } from '../utils/NitroAlert';
 import { NitroColorUtil } from '../utils/NitroColor';
 import { NitroManeuverUtil } from '../utils/NitroManeuver';
 import { NitroMapButton } from '../utils/NitroMapButton';
+import { NitroOptionsPanelUtil } from '../utils/NitroOptionsPanel';
 import { Template, } from './Template';
 const HybridMapTemplate = NitroModules.createHybridObject('MapTemplate');
 export class MapTemplate extends Template {
@@ -17,7 +18,7 @@ export class MapTemplate extends Template {
     template = this;
     constructor(config) {
         super(config);
-        const { component, mapButtons, headerActions, onStopNavigation, onAutoDriveEnabled, defaultGuidanceBackgroundColor, ...baseConfig } = config;
+        const { component, mapButtons, headerActions, onStopNavigation, onAutoDriveEnabled, defaultGuidanceBackgroundColor, optionsPanel, ...baseConfig } = config;
         AppRegistry.registerComponent(this.id, () => (props) => React.createElement(MapTemplateProvider, {
             mapTemplate: this.template,
             // biome-ignore lint/correctness/noChildrenProp: there is no other way in a ts file
@@ -43,6 +44,19 @@ export class MapTemplate extends Template {
                 : undefined,
         };
         HybridMapTemplate.createMapTemplate(nitroConfig);
+        // routed through updateOptionsPanel, not embedded in nitroConfig above — nitrogen can't generate
+        // a spec for a variant type nested that deep inside NitroMapTemplateConfig.
+        this.updateOptionsPanel(optionsPanel);
+    }
+    /**
+     * @namespace iOS updates the panel shown when tapping the ellipsis button
+     * next to the travel estimates during navigation (iOS 27+).
+     */
+    updateOptionsPanel(optionsPanel) {
+        if (Platform.OS !== 'ios') {
+            return;
+        }
+        return HybridMapTemplate.updateOptionsPanel(this.id, NitroOptionsPanelUtil.convert(this.template, optionsPanel));
     }
     setMapButtons(mapButtons) {
         const buttons = NitroMapButton.convert(this.template, mapButtons);
@@ -130,7 +144,7 @@ export class MapTemplate extends Template {
      * or use this to start a navigation session without asking the user
      */
     startNavigation(trip) {
-        HybridMapTemplate.startNavigation(this.id, trip);
+        return HybridMapTemplate.startNavigation(this.id, trip);
     }
     stopNavigation() {
         HybridMapTemplate.stopNavigation(this.id);