react-native-ensys-camera-x 1.0.7

package/src/iconConfig.tsx

@@ -0,0 +1,962 @@
+/**
+ * THE centralized icon configuration for the whole plugin.
+ *
+ * The plugin renders icons on two physically different surfaces:
+ *
+ *  - **`app`** — the React Native components (`RenderIcon`, the preview/viewer
+ *    screens, audio player chrome). These are React components drawn from RN
+ *    primitives; see `src/icons.tsx`.
+ *  - **`camera`** — the native Android camera Activity and its media editor.
+ *    That UI is Kotlin and *cannot* render React components, so its icons are
+ *    Android vector drawables or inline SVG rendered by the platform parser;
+ *    see `CameraIconName` in `src/types.ts`.
+ *
+ * Historically each surface had its own key space, with overlapping names
+ * (`close` meant two different things). This module puts ONE catalog of unique,
+ * camelCase {@link CameraIconId} keys in front of both of them: a host app
+ * customizes `close` once and the change lands on every surface that draws a
+ * close icon.
+ *
+ * Every entry is optional and every icon keeps its shipped default — omitting an
+ * id (or omitting the config entirely) leaves the plugin pixel-identical to its
+ * stock appearance.
+ *
+ * ```tsx
+ * import { setCameraIcons } from 'react-native-ensys-camera-x';
+ *
+ * setCameraIcons({
+ *   close: MyCloseIcon,                    // a React component
+ *   flashOn: require('./flash-on.png'),    // an image
+ *   done: { svg: '<svg viewBox="0 0 24 24">...</svg>' },
+ *   send: { tintColor: '#25D366' },        // recolor the built-in icon
+ *   crop: { resourceName: 'my_crop' },     // an Android drawable in your app
+ * });
+ * ```
+ *
+ * This module is intentionally side-effect free: it owns the catalog and the
+ * pure resolvers. The live store, the native bridge push and the public
+ * `setCameraIcons()` entry point live in `src/config.ts`, which is the single
+ * place that talks to both layers.
+ */
+import { Image } from 'react-native';
+import type { ImageSourcePropType } from 'react-native';
+import {
+  createDefaultIconRegistry,
+  DefaultFallbackIcon,
+  DEFAULT_ICON_SIZE,
+  type CameraIconKey,
+  type CameraIconRegistryConfig,
+  type IconComponent,
+  type IconOverride,
+  type IconProps,
+} from './icons';
+import { NativeSvgIcon } from './NativeSvgIcon';
+import type { CameraIconConfig, CameraIconName, CameraIconStyle } from './types';
+
+// ============================================================================
+// Icon ids
+// ============================================================================
+
+/**
+ * Which surface an icon is drawn on. Determines which customization fields
+ * actually take effect for that icon — see {@link CameraIconCustomization}.
+ */
+export type CameraIconSurface = 'app' | 'camera' | 'both';
+
+/**
+ * Every customizable icon in the plugin, as one flat set of unique keys.
+ *
+ * Ids are camelCase and deliberately distinct from the two internal key spaces
+ * they drive (`CameraIconKey` for the RN registry, `CameraIconName` for the
+ * native drawables) so there is never any doubt about which one a config object
+ * is addressing.
+ */
+export type CameraIconId =
+  // ── Common controls ──────────────────────────────────────────────────────
+  | 'close'
+  | 'back'
+  | 'done'
+  | 'cancel'
+  | 'check'
+  | 'selectionCheck'
+  // ── Camera screen ────────────────────────────────────────────────────────
+  | 'camera'
+  | 'photo'
+  | 'video'
+  | 'photoMode'
+  | 'videoMode'
+  | 'flipCamera'
+  | 'flashOn'
+  | 'flashOff'
+  | 'flashAuto'
+  | 'gallery'
+  | 'record'
+  | 'mic'
+  | 'lock'
+  | 'lockOpen'
+  // ── Editor tools ─────────────────────────────────────────────────────────
+  | 'crop'
+  | 'rotate'
+  | 'aspectRatio'
+  | 'filter'
+  | 'sticker'
+  | 'emoji'
+  | 'gif'
+  | 'text'
+  | 'textBackground'
+  | 'textAlignLeft'
+  | 'textAlignCenter'
+  | 'textAlignRight'
+  | 'draw'
+  | 'marker'
+  | 'brushThin'
+  | 'brushMedium'
+  | 'brushThick'
+  | 'clearDrawing'
+  | 'undo'
+  | 'redo'
+  | 'overlayClose'
+  | 'overlayResize'
+  // ── Media actions & playback ─────────────────────────────────────────────
+  | 'play'
+  | 'pause'
+  | 'stop'
+  | 'volumeOn'
+  | 'volumeOff'
+  | 'mute'
+  | 'trim'
+  | 'cover'
+  | 'compress'
+  | 'export'
+  | 'send'
+  | 'download'
+  | 'share'
+  | 'delete'
+  | 'trash'
+  | 'more'
+  | 'moreOptions'
+  | 'upload'
+  | 'uploadStatus'
+  // ── Documents & audio ────────────────────────────────────────────────────
+  | 'document'
+  | 'audio'
+  | 'browseAudio'
+  | 'imageVideo'
+  // ── Indicators ───────────────────────────────────────────────────────────
+  | 'chevronUp'
+  | 'chevronDown'
+  | 'chevronRight'
+  | 'warning'
+  | 'plus'
+  | 'minus'
+  // ── Interactive & inline icons ───────────────────────────────────────────
+  | 'plusClose'
+  | 'circularSeek'
+  | 'viewDetails'
+  | 'info';
+
+/** One row of {@link CAMERA_ICON_CATALOG}. */
+export type CameraIconCatalogEntry = {
+  /** Where this icon is drawn. */
+  surface: CameraIconSurface;
+  /** Key in the RN component registry, when this icon has an `app` surface. */
+  appKey?: CameraIconKey;
+  /** Native drawable name, when this icon has a `camera` surface. */
+  nativeName?: CameraIconName;
+  /** One-line description of what the icon is used for (documentation). */
+  description: string;
+};
+
+/**
+ * The single source of truth: every icon id, the surfaces it drives, and the
+ * internal keys it maps onto.
+ *
+ * Typed as a total `Record` on purpose — adding a member to
+ * {@link CameraIconId} without adding its row here is a compile error, so the
+ * catalog can never drift out of sync with the union.
+ */
+export const CAMERA_ICON_CATALOG: Record<CameraIconId, CameraIconCatalogEntry> =
+  {
+    // ── Common controls ────────────────────────────────────────────────────
+    close: {
+      surface: 'both',
+      appKey: 'close',
+      nativeName: 'close',
+      description: 'Close / dismiss a screen, sheet or overlay.',
+    },
+    back: {
+      surface: 'both',
+      appKey: 'back',
+      nativeName: 'back',
+      description: 'Back arrow in headers.',
+    },
+    done: {
+      surface: 'both',
+      appKey: 'done',
+      nativeName: 'done',
+      description: 'Confirm / apply the current step (checkmark).',
+    },
+    cancel: {
+      surface: 'app',
+      appKey: 'cancel',
+      description: 'Cancel an action without applying it.',
+    },
+    check: {
+      surface: 'app',
+      appKey: 'check',
+      description: 'Generic checkmark used by list and option rows.',
+    },
+    selectionCheck: {
+      surface: 'camera',
+      nativeName: 'selectionCheck',
+      description: 'Checkmark badge on a selected gallery thumbnail.',
+    },
+
+    // ── Camera screen ──────────────────────────────────────────────────────
+    camera: {
+      surface: 'app',
+      appKey: 'camera',
+      description: 'Generic camera icon (buttons that open the camera).',
+    },
+    photo: {
+      surface: 'app',
+      appKey: 'photo',
+      description: 'Still photo / image media.',
+    },
+    video: {
+      surface: 'app',
+      appKey: 'video',
+      description: 'Video clip media.',
+    },
+    photoMode: {
+      surface: 'both',
+      appKey: 'photo_mode',
+      nativeName: 'photo_mode',
+      description: 'The "Photo" mode tab on the camera screen.',
+    },
+    videoMode: {
+      surface: 'both',
+      appKey: 'video_mode',
+      nativeName: 'video_mode',
+      description: 'The "Video" mode tab on the camera screen.',
+    },
+    flipCamera: {
+      surface: 'both',
+      appKey: 'flip',
+      nativeName: 'flip',
+      description: 'Switch between the front and back camera.',
+    },
+    flashOn: {
+      surface: 'both',
+      appKey: 'flash_on',
+      nativeName: 'flash_on',
+      description: 'Flash forced on.',
+    },
+    flashOff: {
+      surface: 'both',
+      appKey: 'flash_off',
+      nativeName: 'flash_off',
+      description: 'Flash off.',
+    },
+    flashAuto: {
+      surface: 'both',
+      appKey: 'flash_auto',
+      nativeName: 'flash_auto',
+      description: 'Flash in automatic mode.',
+    },
+    gallery: {
+      surface: 'both',
+      appKey: 'gallery',
+      nativeName: 'gallery',
+      description:
+        'Gallery / recent media — the bottom-left thumbnail placeholder.',
+    },
+    record: {
+      surface: 'app',
+      appKey: 'record',
+      description: 'Start recording (record dot).',
+    },
+    mic: {
+      surface: 'app',
+      appKey: 'mic',
+      description: 'Microphone — audio recording entry points.',
+    },
+    lock: {
+      surface: 'both',
+      appKey: 'lock',
+      nativeName: 'lock',
+      description: 'Locked state — hands-free recording is engaged.',
+    },
+    lockOpen: {
+      surface: 'both',
+      appKey: 'lock_open',
+      nativeName: 'lock_open',
+      description: 'The slide-to-lock rail shown while holding to record.',
+    },
+
+    // ── Editor tools ───────────────────────────────────────────────────────
+    crop: {
+      surface: 'both',
+      appKey: 'crop',
+      nativeName: 'crop',
+      description: 'Crop tool in the editor.',
+    },
+    rotate: {
+      surface: 'both',
+      appKey: 'rotate',
+      nativeName: 'rotate',
+      description: 'Rotate the image 90°.',
+    },
+    aspectRatio: {
+      surface: 'camera',
+      nativeName: 'aspect_ratio',
+      description: 'Aspect-ratio picker inside the crop tool.',
+    },
+    filter: {
+      surface: 'both',
+      appKey: 'filter',
+      nativeName: 'filter',
+      description: 'Colour filter strip.',
+    },
+    sticker: {
+      surface: 'both',
+      appKey: 'sticker',
+      nativeName: 'sticker',
+      description: 'Add-sticker tool.',
+    },
+    emoji: {
+      surface: 'both',
+      appKey: 'emoji',
+      nativeName: 'emoji',
+      description: 'Add-emoji tool.',
+    },
+    gif: {
+      surface: 'camera',
+      nativeName: 'gif',
+      description: 'Add-GIF tool.',
+    },
+    text: {
+      surface: 'both',
+      appKey: 'text',
+      nativeName: 'text',
+      description: 'Add-text tool.',
+    },
+    textBackground: {
+      surface: 'camera',
+      nativeName: 'text_bg',
+      description: 'Cycle the text background style while typing.',
+    },
+    textAlignLeft: {
+      surface: 'camera',
+      nativeName: 'text_align_left',
+      description: 'Text aligned left (text tool).',
+    },
+    textAlignCenter: {
+      surface: 'camera',
+      nativeName: 'text_align_center',
+      description: 'Text aligned centre (text tool).',
+    },
+    textAlignRight: {
+      surface: 'camera',
+      nativeName: 'text_align_right',
+      description: 'Text aligned right (text tool).',
+    },
+    draw: {
+      surface: 'app',
+      appKey: 'draw',
+      description: 'Freehand drawing tool.',
+    },
+    marker: {
+      surface: 'camera',
+      nativeName: 'marker',
+      description: 'Marker / pen tool in the native editor.',
+    },
+    brushThin: {
+      surface: 'camera',
+      nativeName: 'brush_thin',
+      description: 'Thin brush width.',
+    },
+    brushMedium: {
+      surface: 'camera',
+      nativeName: 'brush_medium',
+      description: 'Medium brush width.',
+    },
+    brushThick: {
+      surface: 'camera',
+      nativeName: 'brush_thick',
+      description: 'Thick brush width.',
+    },
+    clearDrawing: {
+      surface: 'camera',
+      nativeName: 'clear_drawing',
+      description: 'Erase every drawing stroke.',
+    },
+    undo: {
+      surface: 'both',
+      appKey: 'undo',
+      nativeName: 'undo',
+      description: 'Undo the last edit.',
+    },
+    redo: {
+      surface: 'both',
+      appKey: 'redo',
+      nativeName: 'redo',
+      description: 'Redo the last undone edit.',
+    },
+    overlayClose: {
+      surface: 'camera',
+      nativeName: 'overlay_close',
+      description:
+        'The X on a selected sticker / emoji / GIF / text overlay that deletes it.',
+    },
+    overlayResize: {
+      surface: 'camera',
+      nativeName: 'overlay_resize',
+      description: 'The corner handle that resizes a selected overlay.',
+    },
+
+    // ── Media actions & playback ───────────────────────────────────────────
+    play: {
+      surface: 'both',
+      appKey: 'play',
+      nativeName: 'play',
+      description: 'Play video or audio.',
+    },
+    pause: {
+      surface: 'both',
+      appKey: 'pause',
+      nativeName: 'pause',
+      description: 'Pause playback or recording.',
+    },
+    stop: {
+      surface: 'app',
+      appKey: 'stop',
+      description: 'Stop playback or recording.',
+    },
+    volumeOn: {
+      surface: 'both',
+      appKey: 'volume_on',
+      nativeName: 'volume_on',
+      description: 'Sound on — video audio is kept.',
+    },
+    volumeOff: {
+      surface: 'both',
+      appKey: 'volume_off',
+      nativeName: 'volume_off',
+      description: 'Sound off — video is muted.',
+    },
+    mute: {
+      surface: 'app',
+      appKey: 'mute',
+      description: 'Muted indicator on a media tile.',
+    },
+    trim: {
+      surface: 'both',
+      appKey: 'trim',
+      nativeName: 'trim',
+      description: 'Trim a video clip.',
+    },
+    cover: {
+      surface: 'both',
+      appKey: 'cover',
+      nativeName: 'cover',
+      description: "Pick a video's cover frame.",
+    },
+    compress: {
+      surface: 'app',
+      appKey: 'compress',
+      description: 'Compress an image or video.',
+    },
+    export: {
+      surface: 'app',
+      appKey: 'export',
+      description: 'Export in another file format.',
+    },
+    send: {
+      surface: 'both',
+      appKey: 'send',
+      nativeName: 'send',
+      description: 'Send / confirm the selected media.',
+    },
+    download: {
+      surface: 'both',
+      appKey: 'download',
+      nativeName: 'download',
+      description: 'Save media to the device.',
+    },
+    share: {
+      surface: 'both',
+      appKey: 'share',
+      nativeName: 'share',
+      description: 'Share media with another app.',
+    },
+    delete: {
+      surface: 'both',
+      appKey: 'delete',
+      nativeName: 'delete',
+      description: 'Delete / remove media.',
+    },
+    trash: {
+      surface: 'app',
+      appKey: 'trash',
+      description:
+        'Dustbin shown when dragging an overlay away, and in bulk-delete bars.',
+    },
+    more: {
+      surface: 'app',
+      appKey: 'more',
+      description: 'Generic overflow / "more" affordance in the app UI.',
+    },
+    moreOptions: {
+      surface: 'camera',
+      nativeName: 'more_vert',
+      description:
+        'The ⋮ overflow button in the native preview header (Compress / Export By).',
+    },
+    upload: {
+      surface: 'app',
+      appKey: 'upload',
+      description: 'Upload media to a server.',
+    },
+    uploadStatus: {
+      surface: 'camera',
+      nativeName: 'stat_upload',
+      description:
+        'Small status-bar icon of the upload notification. Must be a plain monochrome vector.',
+    },
+
+    // ── Documents & audio ──────────────────────────────────────────────────
+    document: {
+      surface: 'both',
+      appKey: 'document',
+      nativeName: 'document',
+      description: 'Document file (PDF, DOCX, …).',
+    },
+    audio: {
+      surface: 'both',
+      appKey: 'audio',
+      nativeName: 'audio',
+      description: 'Audio file.',
+    },
+    browseAudio: {
+      surface: 'app',
+      appKey: 'browse_audio',
+      description: 'Browse the device for an audio file.',
+    },
+    imageVideo: {
+      surface: 'app',
+      appKey: 'image_video',
+      description: 'Combined image-or-video picker entry point.',
+    },
+
+    // ── Indicators ─────────────────────────────────────────────────────────
+    chevronUp: {
+      surface: 'both',
+      appKey: 'chevron_up',
+      nativeName: 'chevron_up',
+      description: 'Upward chevron — swipe-up hints and expanding panels.',
+    },
+    chevronDown: {
+      surface: 'camera',
+      nativeName: 'chevron_down',
+      description: 'Downward chevron — collapsing the editor colour palette.',
+    },
+    chevronRight: {
+      surface: 'app',
+      appKey: 'chevron_right',
+      description: 'Forward chevron on navigable rows.',
+    },
+    warning: {
+      surface: 'app',
+      appKey: 'warning',
+      description: 'Warning / error state.',
+    },
+    plus: {
+      surface: 'app',
+      appKey: 'plus',
+      description: 'Add / expand (the floating action button).',
+    },
+    minus: {
+      surface: 'app',
+      appKey: 'minus',
+      description: 'Remove / collapse.',
+    },
+    plusClose: {
+      surface: 'app',
+      appKey: 'plus_close',
+      description: 'The FAB animated plus-to-close (+ ↔ ×) morphing icon.',
+    },
+    circularSeek: {
+      surface: 'app',
+      appKey: 'circular_seek',
+      description: 'The video player ±10s circular seek skip rings.',
+    },
+    viewDetails: {
+      surface: 'app',
+      appKey: 'view_details',
+      description:
+        'The View Details / metadata info (i) icon on the media viewer.',
+    },
+    info: {
+      surface: 'app',
+      appKey: 'view_details',
+      description: 'Information icon (alias for viewDetails).',
+    },
+  };
+
+/** Every icon id, in catalog order. Handy for docs and tests. */
+export const CAMERA_ICON_IDS = Object.keys(
+  CAMERA_ICON_CATALOG
+) as CameraIconId[];
+
+/** Narrowing guard for an unknown string. */
+export function isCameraIconId(value: string): value is CameraIconId {
+  return Object.prototype.hasOwnProperty.call(CAMERA_ICON_CATALOG, value);
+}
+
+// ============================================================================
+// Customization shapes
+// ============================================================================
+
+/**
+ * How one icon should be customized.
+ *
+ * Which fields take effect depends on the icon's `surface`
+ * ({@link CAMERA_ICON_CATALOG}):
+ *
+ * | Field          | `app` surface | `camera` surface |
+ * | -------------- | ------------- | ---------------- |
+ * | `component`    | ✅            | —                |
+ * | `source`       | ✅            | —                |
+ * | `svg`          | ✅            | ✅               |
+ * | `resourceName` | —             | ✅               |
+ * | `tintColor`    | ✅            | ✅               |
+ * | `size`         | ✅            | —                |
+ *
+ * A `both`-surface icon accepts all of them and applies each where it works,
+ * so `{ component: MyClose, resourceName: 'my_close' }` replaces the artwork on
+ * every surface at once. Anything left unset keeps the icon's shipped default.
+ */
+export type CameraIconCustomization = {
+  /** React component to draw instead of the built-in one (app surface). */
+  component?: IconComponent;
+  /**
+   * Image to draw instead of the built-in one (app surface) — e.g.
+   * `require('./my-icon.png')` or `{ uri: 'https://…' }`. Rendered with
+   * `resizeMode: 'contain'` at the icon's size, and left un-tinted unless
+   * `tintColor` is also given, so full-colour artwork survives intact.
+   */
+  source?: ImageSourcePropType;
+  /**
+   * Inline SVG markup, drawn on BOTH surfaces by the library's own bundled
+   * parser — no `react-native-svg`. The native camera screen parses it at
+   * runtime; the React Native surface draws it through the bundled
+   * `CameraSvgIcon` native view. Invalid/unsupported markup (or a platform
+   * without the native half) falls back to the icon's built-in default. Use
+   * `currentColor` for fills/strokes that should follow the icon tint.
+   */
+  svg?: string;
+  /**
+   * Name of a drawable resource in YOUR Android app to draw instead of the
+   * built-in one on the native camera screen (camera surface). Resolved with
+   * `Resources.getIdentifier`; falls back to the built-in drawable when the
+   * name does not exist.
+   */
+  resourceName?: string;
+  /** Recolour the icon. Applies on both surfaces. */
+  tintColor?: string;
+  /** Fixed size in dp for the app-surface icon. */
+  size?: number;
+};
+
+/**
+ * A customization, or one of two shorthands: a bare React component, or a bare
+ * image source. `close: MyIcon` is exactly `close: { component: MyIcon }`.
+ */
+export type CameraIconValue =
+  | IconComponent
+  | ImageSourcePropType
+  | CameraIconCustomization;
+
+/**
+ * The centralized icon configuration: a flat map of icon id → replacement.
+ * Every key is optional; an absent key keeps the plugin's default icon.
+ */
+export type CameraIconsConfig = Partial<Record<CameraIconId, CameraIconValue>>;
+
+// ============================================================================
+// Normalization
+// ============================================================================
+
+const CUSTOMIZATION_FIELDS = [
+  'component',
+  'source',
+  'svg',
+  'resourceName',
+  'tintColor',
+  'size',
+] as const;
+
+/**
+ * Collapse any of the accepted shorthands into a full
+ * {@link CameraIconCustomization}.
+ *
+ * The three input shapes are distinguished structurally, because an image
+ * source is `number | object | array` and a React component is
+ * `function | object`:
+ *
+ *  - a function, or an object carrying React's `$$typeof` brand
+ *    (`memo`/`forwardRef` results) → a component;
+ *  - a number (what `require('./x.png')` compiles to) or an array of sources,
+ *    or an object with a `uri` → an image source;
+ *  - an object mentioning any customization field → already a customization;
+ *  - anything else → treated as an image source, which is what the remaining
+ *    `ImageSourcePropType` variants are.
+ */
+export function normalizeCameraIconValue(
+  value: CameraIconValue
+): CameraIconCustomization {
+  if (typeof value === 'function') {
+    return { component: value as IconComponent };
+  }
+  if (typeof value === 'number' || Array.isArray(value)) {
+    return { source: value as ImageSourcePropType };
+  }
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+    if ('$$typeof' in record) {
+      return { component: value as IconComponent };
+    }
+    if ('uri' in record) {
+      return { source: value as ImageSourcePropType };
+    }
+    if (CUSTOMIZATION_FIELDS.some((field) => field in record)) {
+      return value as CameraIconCustomization;
+    }
+  }
+  return { source: value as ImageSourcePropType };
+}
+
+/**
+ * Wrap an image source in an {@link IconComponent}.
+ *
+ * The incoming `color` prop is deliberately ignored: a host-supplied PNG is
+ * usually already coloured, and blanket-tinting it with the current theme
+ * colour would flatten it. Pass `tintColor` explicitly to opt into recolouring.
+ */
+export function createImageIconComponent(
+  source: ImageSourcePropType,
+  tintColor?: string
+): IconComponent {
+  const ImageIcon: IconComponent = ({ size, style }: IconProps) => {
+    const edge = size ?? DEFAULT_ICON_SIZE;
+    return (
+      <Image
+        source={source}
+        resizeMode="contain"
+        style={[
+          { width: edge, height: edge },
+          tintColor ? { tintColor } : null,
+          style,
+        ]}
+      />
+    );
+  };
+  ImageIcon.displayName = 'CameraImageIcon';
+  return ImageIcon;
+}
+
+/**
+ * Basic structural validity check for inline SVG markup: a non-empty string
+ * within the native parser's size cap, with an `<svg>` root and at least one
+ * drawable element the parser understands (`path` / `rect` / `circle` /
+ * `ellipse` / `line` / `polyline` / `polygon`). Markup that fails this is
+ * treated as "no SVG" so the icon keeps its built-in default — the same safe
+ * fallback the renderers apply when parsing fails at draw time.
+ */
+export function isRenderableSvg(svg: unknown): svg is string {
+  if (typeof svg !== 'string') return false;
+  const markup = svg.trim();
+  if (markup.length === 0 || markup.length > 256 * 1024) return false;
+  if (!/<svg[\s>]/i.test(markup)) return false;
+  return /<(path|rect|circle|ellipse|line|polyline|polygon)[\s/>]/i.test(markup);
+}
+
+/**
+ * Wrap inline SVG markup in an {@link IconComponent} for the React Native
+ * component surface. The markup is drawn by the library's OWN bundled native
+ * renderer (`CameraSvgIcon`, backed by `SvgDrawable`) — no `react-native-svg`
+ * and no third-party SVG library.
+ *
+ * Anything that cannot be drawn falls back to [fallback] (the icon's built-in
+ * default component): invalid/empty markup, a platform with no native half
+ * (iOS / web), or an older linked binary without the renderer. So a
+ * customization never leaves an empty box.
+ *
+ * `currentColor` in the markup follows the icon's tint — an explicit
+ * [tintColor] wins, otherwise the render-time `color` is used — while explicit
+ * colours inside the SVG are always preserved.
+ */
+export function createSvgIconComponent(
+  svg: string,
+  tintColor?: string,
+  fallback?: IconComponent
+): IconComponent {
+  const Fallback = fallback ?? DefaultFallbackIcon;
+  if (!isRenderableSvg(svg)) {
+    return Fallback;
+  }
+  const SvgIcon: IconComponent = (props: IconProps) => {
+    const edge = props.size ?? DEFAULT_ICON_SIZE;
+    const tint = tintColor ?? (props.color as string | undefined);
+    return (
+      <NativeSvgIcon
+        svg={svg}
+        tintColor={tint}
+        style={[{ width: edge, height: edge }, props.style]}
+        fallback={<Fallback {...props} />}
+      />
+    );
+  };
+  SvgIcon.displayName = 'CameraSvgIcon';
+  return SvgIcon;
+}
+
+// ============================================================================
+// Projection onto the two internal layers
+// ============================================================================
+
+/**
+ * Project the centralized config onto the RN component registry
+ * (`src/icons.tsx`).
+ *
+ * Only ids with an `appKey` contribute. Artwork replacements become registry
+ * `overrides` — which take precedence over any registry a host also passes to
+ * `CameraIconProvider` — while bare `tintColor` / `size` become per-icon
+ * overrides that recolour or resize the *built-in* component. Ids the caller
+ * left out never appear, so their defaults resolve untouched.
+ */
+export function resolveCameraIconRegistryConfig(
+  config: CameraIconsConfig
+): CameraIconRegistryConfig {
+  const overrides: Partial<Record<CameraIconKey, IconOverride>> = {};
+  // One shared default registry: both the returned base registry and each SVG
+  // icon's fallback are drawn from it, so an invalid SVG resolves to the exact
+  // built-in component that key ships with.
+  const defaultRegistry = createDefaultIconRegistry();
+
+  (Object.keys(config) as CameraIconId[]).forEach((id) => {
+    const entry = CAMERA_ICON_CATALOG[id];
+    const raw = config[id];
+    if (!entry?.appKey || raw === undefined || raw === null) {
+      return;
+    }
+
+    const custom = normalizeCameraIconValue(raw);
+    const override: IconOverride = {};
+
+    if (custom.component) {
+      override.component = custom.component;
+    } else if (custom.svg !== undefined && isRenderableSvg(custom.svg)) {
+      // Invalid/empty SVG is intentionally skipped here so the built-in default
+      // (still in the registry) resolves untouched — the "fall back to the
+      // default icon" guarantee.
+      override.component = createSvgIconComponent(
+        custom.svg,
+        custom.tintColor,
+        defaultRegistry.get(entry.appKey)
+      );
+    } else if (custom.source !== undefined) {
+      override.component = createImageIconComponent(
+        custom.source,
+        custom.tintColor
+      );
+    }
+    if (custom.tintColor !== undefined) {
+      override.tintColor = custom.tintColor;
+    }
+    if (custom.size !== undefined) {
+      override.size = custom.size;
+    }
+
+    if (Object.keys(override).length > 0) {
+      overrides[entry.appKey] = override;
+    }
+  });
+
+  return { registry: defaultRegistry, overrides };
+}
+
+/**
+ * Project the centralized config onto the native drawable layer
+ * (`CameraIconConfig` in `src/types.ts`), which is serialized to the Android
+ * Activity by `setCameraConfig`.
+ *
+ * Only ids with a `nativeName` contribute, and only the fields the native side
+ * understands (`resourceName`, `tintColor`, `size`) are carried across — a
+ * React component cannot cross into Kotlin UI. The wire format is unchanged, so
+ * no native code has to know this module exists.
+ */
+export function resolveNativeIconConfig(
+  config: CameraIconsConfig
+): CameraIconConfig {
+  const overrides: Partial<Record<CameraIconName, CameraIconStyle>> = {};
+
+  (Object.keys(config) as CameraIconId[]).forEach((id) => {
+    const entry = CAMERA_ICON_CATALOG[id];
+    const raw = config[id];
+    if (!entry?.nativeName || raw === undefined || raw === null) {
+      return;
+    }
+
+    const custom = normalizeCameraIconValue(raw);
+    const style: CameraIconStyle = {};
+    if (custom.svg !== undefined) {
+      style.svg = custom.svg;
+    }
+    if (custom.resourceName !== undefined) {
+      style.resourceName = custom.resourceName;
+    }
+    if (custom.tintColor !== undefined) {
+      style.tintColor = custom.tintColor;
+    }
+    if (custom.size !== undefined) {
+      style.size = custom.size;
+    }
+
+    if (Object.keys(style).length > 0) {
+      overrides[entry.nativeName] = style;
+    }
+  });
+
+  return { overrides };
+}
+
+/** Merge two centralized icon configs; `override` wins per icon id. */
+export function mergeCameraIconsConfig(
+  base: CameraIconsConfig,
+  override?: CameraIconsConfig
+): CameraIconsConfig {
+  if (!override) {
+    return base;
+  }
+  const merged: CameraIconsConfig = { ...base };
+  (Object.keys(override) as CameraIconId[]).forEach((id) => {
+    const next = override[id];
+    if (next === undefined) {
+      return;
+    }
+    const previous = merged[id];
+    // Two plain customization objects compose field-by-field, so
+    // `{ tintColor }` set now does not erase a `{ component }` set earlier.
+    // Any other shape (component / image source) replaces outright.
+    if (previous !== undefined) {
+      const a = normalizeCameraIconValue(previous);
+      const b = normalizeCameraIconValue(next);
+      merged[id] = { ...a, ...b };
+      return;
+    }
+    merged[id] = next;
+  });
+  return merged;
+}