@iternio/react-native-auto-play 0.3.12 → 0.3.13

package/nitrogen/generated/android/c++/JVariant_GlyphImage_AssetImage_RemoteImage.hpp

@@ -15,11 +15,11 @@
 #include "RemoteImage.hpp"
 #include <variant>
 #include "JGlyphImage.hpp"
+#include <string>
 #include "NitroColor.hpp"
 #include "JNitroColor.hpp"
 #include <optional>
 #include "JAssetImage.hpp"
-#include <string>
 #include "JRemoteImage.hpp"
 
 namespace margelo::nitro::swe::iternio::reactnativeautoplay {

package/nitrogen/generated/android/c++/JVariant_PreferredImageLane_ImageLane.hpp

@@ -19,11 +19,11 @@
 #include "RemoteImage.hpp"
 #include "JNitroImage.hpp"
 #include "JGlyphImage.hpp"
+#include <string>
 #include "NitroColor.hpp"
 #include "JNitroColor.hpp"
 #include <optional>
 #include "JAssetImage.hpp"
-#include <string>
 #include "JRemoteImage.hpp"
 #include <vector>
 #include "JImageLane.hpp"

package/nitrogen/generated/android/kotlin/com/margelo/nitro/swe/iternio/reactnativeautoplay/GlyphImage.kt

@@ -22,6 +22,9 @@ data class GlyphImage(
   val glyph: Double,
   @DoNotStrip
   @Keep
+  val fontName: String,
+  @DoNotStrip
+  @Keep
   val color: NitroColor,
   @DoNotStrip
   @Keep
@@ -40,8 +43,8 @@ data class GlyphImage(
     @Keep
     @Suppress("unused")
     @JvmStatic
-    private fun fromCpp(glyph: Double, color: NitroColor, backgroundColor: NitroColor, fontScale: Double?): GlyphImage {
-      return GlyphImage(glyph, color, backgroundColor, fontScale)
+    private fun fromCpp(glyph: Double, fontName: String, color: NitroColor, backgroundColor: NitroColor, fontScale: Double?): GlyphImage {
+      return GlyphImage(glyph, fontName, color, backgroundColor, fontScale)
     }
   }
 }

package/nitrogen/generated/ios/c++/HybridCarPlayDashboardSpecSwift.hpp

@@ -36,9 +36,9 @@ namespace margelo::nitro::swe::iternio::reactnativeautoplay { enum class ColorSc
 #include "AssetImage.hpp"
 #include "RemoteImage.hpp"
 #include <variant>
+#include <string>
 #include "NitroColor.hpp"
 #include <optional>
-#include <string>
 #include "ColorScheme.hpp"
 
 #include "ReactNativeAutoPlay-Swift-Cxx-Umbrella.hpp"

package/nitrogen/generated/ios/swift/GlyphImage.swift

@@ -18,8 +18,8 @@ public extension GlyphImage {
   /**
    * Create a new instance of `GlyphImage`.
    */
-  init(glyph: Double, color: NitroColor, backgroundColor: NitroColor, fontScale: Double?) {
-    self.init(glyph, color, backgroundColor, { () -> bridge.std__optional_double_ in
+  init(glyph: Double, fontName: String, color: NitroColor, backgroundColor: NitroColor, fontScale: Double?) {
+    self.init(glyph, std.string(fontName), color, backgroundColor, { () -> bridge.std__optional_double_ in
       if let __unwrappedValue = fontScale {
         return bridge.create_std__optional_double_(__unwrappedValue)
       } else {
@@ -33,6 +33,11 @@ public extension GlyphImage {
     return self.__glyph
   }
   
+  @inline(__always)
+  var fontName: String {
+    return String(self.__fontName)
+  }
+  
   @inline(__always)
   var color: NitroColor {
     return self.__color

package/nitrogen/generated/shared/c++/GlyphImage.hpp

@@ -31,6 +31,7 @@
 // Forward declaration of `NitroColor` to properly resolve imports.
 namespace margelo::nitro::swe::iternio::reactnativeautoplay { struct NitroColor; }
 
+#include <string>
 #include "NitroColor.hpp"
 #include <optional>
 
@@ -42,13 +43,14 @@ namespace margelo::nitro::swe::iternio::reactnativeautoplay {
   struct GlyphImage final {
   public:
     double glyph     SWIFT_PRIVATE;
+    std::string fontName     SWIFT_PRIVATE;
     NitroColor color     SWIFT_PRIVATE;
     NitroColor backgroundColor     SWIFT_PRIVATE;
     std::optional<double> fontScale     SWIFT_PRIVATE;
 
   public:
     GlyphImage() = default;
-    explicit GlyphImage(double glyph, NitroColor color, NitroColor backgroundColor, std::optional<double> fontScale): glyph(glyph), color(color), backgroundColor(backgroundColor), fontScale(fontScale) {}
+    explicit GlyphImage(double glyph, std::string fontName, NitroColor color, NitroColor backgroundColor, std::optional<double> fontScale): glyph(glyph), fontName(fontName), color(color), backgroundColor(backgroundColor), fontScale(fontScale) {}
 
   public:
     friend bool operator==(const GlyphImage& lhs, const GlyphImage& rhs) = default;
@@ -65,6 +67,7 @@ namespace margelo::nitro {
       jsi::Object obj = arg.asObject(runtime);
       return margelo::nitro::swe::iternio::reactnativeautoplay::GlyphImage(
         JSIConverter<double>::fromJSI(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "glyph"))),
+        JSIConverter<std::string>::fromJSI(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "fontName"))),
         JSIConverter<margelo::nitro::swe::iternio::reactnativeautoplay::NitroColor>::fromJSI(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "color"))),
         JSIConverter<margelo::nitro::swe::iternio::reactnativeautoplay::NitroColor>::fromJSI(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "backgroundColor"))),
         JSIConverter<std::optional<double>>::fromJSI(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "fontScale")))
@@ -73,6 +76,7 @@ namespace margelo::nitro {
     static inline jsi::Value toJSI(jsi::Runtime& runtime, const margelo::nitro::swe::iternio::reactnativeautoplay::GlyphImage& arg) {
       jsi::Object obj(runtime);
       obj.setProperty(runtime, PropNameIDCache::get(runtime, "glyph"), JSIConverter<double>::toJSI(runtime, arg.glyph));
+      obj.setProperty(runtime, PropNameIDCache::get(runtime, "fontName"), JSIConverter<std::string>::toJSI(runtime, arg.fontName));
       obj.setProperty(runtime, PropNameIDCache::get(runtime, "color"), JSIConverter<margelo::nitro::swe::iternio::reactnativeautoplay::NitroColor>::toJSI(runtime, arg.color));
       obj.setProperty(runtime, PropNameIDCache::get(runtime, "backgroundColor"), JSIConverter<margelo::nitro::swe::iternio::reactnativeautoplay::NitroColor>::toJSI(runtime, arg.backgroundColor));
       obj.setProperty(runtime, PropNameIDCache::get(runtime, "fontScale"), JSIConverter<std::optional<double>>::toJSI(runtime, arg.fontScale));
@@ -87,6 +91,7 @@ namespace margelo::nitro {
         return false;
       }
       if (!JSIConverter<double>::canConvert(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "glyph")))) return false;
+      if (!JSIConverter<std::string>::canConvert(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "fontName")))) return false;
       if (!JSIConverter<margelo::nitro::swe::iternio::reactnativeautoplay::NitroColor>::canConvert(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "color")))) return false;
       if (!JSIConverter<margelo::nitro::swe::iternio::reactnativeautoplay::NitroColor>::canConvert(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "backgroundColor")))) return false;
       if (!JSIConverter<std::optional<double>>::canConvert(runtime, obj.getProperty(runtime, PropNameIDCache::get(runtime, "fontScale")))) return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iternio/react-native-auto-play",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "Android Auto and Apple CarPlay for react-native",
   "main": "lib/index",
   "module": "lib/index",
@@ -34,9 +34,8 @@
     "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": "yarn circular && tsc && nitrogen && npm run generate:fonts",
+    "prepare": "yarn circular && tsc && nitrogen",
     "swift:format": "swift-format format ./ios --in-place --recursive",
     "circular": "dpdm ./src/* --circular --exit-code circular:1 --no-tree --warning=false --transform"
   },

package/src/index.ts

@@ -62,3 +62,4 @@ export type {
 } from './utils/NitroAlert';
 export type { ThemedColor } from './utils/NitroColor';
 export type { GridButton } from './utils/NitroGrid';
+export { setIconFont } from './utils/NitroImage';

package/src/templates/MapTemplate.ts

@@ -159,7 +159,10 @@ export type MapTemplateConfig = Omit<
     onAutoDriveEnabled?: (template: MapTemplate) => void;
 
     /**
-     * Initial navigation maneuver background color. Mainly useful, when in CarPlay the default loading maneuver does not have the right color.
+     * Use this to set the default maneuver background color on iOS.
+     * Only used when starting navigation and not providing any maneuvers yet,
+     * visible on the system provided loading maneuver then.
+     * @namespace iOS
      */
     defaultGuidanceBackgroundColor?: ThemedColor | string;
   };

package/src/types/Image.ts

@@ -1,26 +1,61 @@
 import type { ImageSourcePropType } from 'react-native';
 import type { ThemedColor } from '../utils/NitroColor';
-import type { GlyphName } from './Glyphmap';
 
-export type AutoImage =
-  | {
-      name: GlyphName;
+/**
+ * Augment this interface in your app to get type-safe glyph name autocompletion.
+ *
+ * @example
+ * ```ts
+ * // autoplay-glyphs.d.ts
+ * import type { GlyphName } from './assets/symbolFont/Glyphmap';
+ * declare module '@iternio/react-native-auto-play' {
+ *   interface AutoPlayGlyphMap extends Record<GlyphName, number> {}
+ * }
+ * ```
+ */
+// biome-ignore lint/suspicious/noEmptyInterface: must be an interface for declaration merging
+export interface AutoPlayGlyphMap {}
 
-      /**
-       * Sets the icon dark and light mode color or a single color for both.
-       * Defaults to white for dark mode and black for light mode if not specified.
-       * Might not get applied everywhere like MapTemplate buttons on Android.
-       */
-      color?: ThemedColor | string;
+/** Resolves to the augmented glyph name union, or falls back to `string` when not augmented. */
+export type GlyphMapKey = keyof AutoPlayGlyphMap extends never
+  ? string
+  : Extract<keyof AutoPlayGlyphMap, string>;
 
-      /**
-       * Sets the background color for dark and light mode or a single color for both
-       * Defaults to transparent if not specified.
-       */
-      backgroundColor?: ThemedColor | string;
-      fontScale?: number;
-      type: 'glyph';
-    }
+type GlyphStyleFields = {
+  /**
+   * Sets the icon dark and light mode color or a single color for both.
+   * Defaults to white for dark mode and black for light mode if not specified.
+   * Might not get applied everywhere like MapTemplate buttons on Android.
+   */
+  color?: ThemedColor | string;
+
+  /**
+   * Sets the background color for dark and light mode or a single color for both
+   * Defaults to transparent if not specified.
+   */
+  backgroundColor?: ThemedColor | string;
+  fontScale?: number;
+};
+
+/** Glyph by name — looked up in the glyph map registered via {@link setIconFont}. */
+export type AutoGlyphByName = GlyphStyleFields & {
+  type: 'glyph';
+  /** Key in the glyph map passed to `setIconFont`. */
+  name: GlyphMapKey;
+  /** Optional override — if set, used instead of the map lookup. */
+  codepoint?: number;
+};
+
+/** Glyph by raw Unicode code point. */
+export type AutoGlyphByCodepoint = GlyphStyleFields & {
+  type: 'glyph';
+  codepoint: number;
+};
+
+export type AutoGlyph = AutoGlyphByName | AutoGlyphByCodepoint;
+
+export type AutoImage =
+  | AutoGlyph
   | {
       image: ImageSourcePropType;
       /**

package/src/types/Maneuver.ts

@@ -1,6 +1,6 @@
 import type { ImageSourcePropType } from 'react-native';
 import type { ThemedColor } from '../utils/NitroColor';
-import type { GlyphName } from './Glyphmap';
+import type { AutoGlyphByCodepoint, AutoGlyphByName } from './Image';
 import type { TravelEstimates } from './Trip';
 
 export enum ManeuverType {
@@ -174,15 +174,8 @@ export interface PreferredLane extends Lane {
 }
 
 export type ManeuverImage =
-  | {
-      name: GlyphName;
-      /**
-       * make sure to specify a color with a proper contrast ratio to cardBackgroundColor otherwise it might not get applied
-       * defaults to white/black for dark/light mode
-       */
-      color?: ThemedColor | string;
-      type: 'glyph';
-    }
+  | Pick<AutoGlyphByName, 'type' | 'name' | 'codepoint' | 'color'>
+  | Pick<AutoGlyphByCodepoint, 'type' | 'codepoint' | 'color'>
   | {
       image: ImageSourcePropType;
       /**

package/src/utils/NitroImage.ts

@@ -1,8 +1,69 @@
 import { Image, type ImageResolvedAssetSource } from 'react-native';
-import { glyphMap } from '../types/Glyphmap';
 import type { AutoImage } from '../types/Image';
 import { type NitroColor, NitroColorUtil } from './NitroColor';
 
+let _iconFont: string | undefined;
+let _glyphMap: Record<string, number> | undefined;
+
+/**
+ * Register the icon font and (optionally) a glyph map for name-based lookups.
+ * Must be called **once** before creating any templates. Subsequent calls are ignored.
+ *
+ * The font name maps directly to a native font asset:
+ * - **Android** — `res/font/<name>.ttf` (must be lowercase)
+ * - **iOS** — `<name>.ttf` in the app bundle (registered via CoreText automatically)
+ *
+ * For cross-platform compatibility use lowercase with underscores only.
+ *
+ * @param name  Native font asset name (without extension).
+ * @param glyphMap  Optional map of glyph names to Unicode code points.
+ *                  When provided, glyphs can use `{ type: 'glyph', name: 'icon_name' }`.
+ *
+ * @example
+ * ```ts
+ * import { glyphMap } from './assets/Glyphmap';
+ * setIconFont('material_symbols', glyphMap);
+ * ```
+ */
+export function setIconFont(name: string, glyphMap?: Record<string, number>): void {
+  if (_iconFont != null) {
+    return;
+  }
+  _iconFont = name;
+  _glyphMap = glyphMap;
+}
+
+function getIconFont(): string {
+  if (_iconFont == null) {
+    throw new Error(
+      'No icon font configured. Call setIconFont("your_font_name") before using glyph images.'
+    );
+  }
+  return _iconFont;
+}
+
+function resolveGlyph(image: Extract<AutoImage, { type: 'glyph' }>): number {
+  if ('name' in image && image.name !== undefined) {
+    if (image.codepoint !== undefined) {
+      return image.codepoint;
+    }
+    if (_glyphMap == null) {
+      throw new Error(
+        `Glyph name "${image.name}" used but no glyph map was provided to setIconFont().`
+      );
+    }
+    const cp = _glyphMap[image.name];
+    if (cp === undefined) {
+      throw new Error(`Glyph name "${image.name}" not found in the glyph map.`);
+    }
+    return cp;
+  }
+  if (image.codepoint !== undefined) {
+    return image.codepoint;
+  }
+  throw new Error('Glyph image must provide either `name` or `codepoint`.');
+}
+
 interface AssetImage extends ImageResolvedAssetSource {
   color?: NitroColor;
   packager_asset: boolean;
@@ -10,6 +71,7 @@ interface AssetImage extends ImageResolvedAssetSource {
 
 interface GlyphImage {
   glyph: number;
+  fontName: string;
   color: NitroColor;
   backgroundColor: NitroColor;
   fontScale?: number;
@@ -22,8 +84,7 @@ interface RemoteImage {
 }
 
 /**
- * we need to map the ButtonImage.name from GlyphName to
- * the actual numeric value so we need a nitro specific type
+ * NitroModules-compatible image types passed to native.
  */
 export type NitroImage = GlyphImage | AssetImage | RemoteImage;
 
@@ -38,12 +99,12 @@ function convert(image?: AutoImage): NitroImage | undefined {
     const {
       color = { darkColor: 'white', lightColor: 'black' },
       fontScale,
-      name,
       backgroundColor = 'transparent',
     } = image;
 
     return {
-      glyph: glyphMap[name],
+      glyph: resolveGlyph(image),
+      fontName: getIconFont(),
       color: NitroColorUtil.convert(color),
       backgroundColor: NitroColorUtil.convert(backgroundColor),
       fontScale,