@myazahq/kyc-sdk-react-native 2.0.2 → 2.1.0

package/src/components/CameraViewfinder.tsx

@@ -1,14 +1,18 @@
-import React, { useEffect } from 'react';
-import { ActivityIndicator, Pressable, View } from 'react-native';
-import Svg, { Defs, Mask, Path, Rect } from 'react-native-svg';
-import { Camera, useCameraDevice, usePhotoOutput, useVideoOutput } from 'react-native-vision-camera';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Platform, View } from 'react-native';
+import { Camera, useCameraDevice, useCameraDevices, usePhotoOutput, useVideoOutput, type CameraRef } from 'react-native-vision-camera';
 
 import { radius, spacing } from '../config/theme';
+import { FRAMED_VIEW_AR } from '../services/cardCrop';
 import { DOCUMENT_VIDEO_BITRATE, VIDEO_CAPTURE_RESOLUTION } from '../config/captureSettings';
 import { useTheme } from './runtime';
+import { documentHintIsAction, documentHintText, useAutoCapture } from '../capture';
+import { shortDocumentLabel } from '../config/idTypes';
+import type { MrzScan } from '../mrz/parse';
 import { useVideoRecorder } from './useVideoRecorder';
-import { MyazaText } from './Typography';
-import { Icon } from './Icon';
+import { CardGuide } from './viewfinder/CardGuide';
+import { HintBanner, OverlayButton, Shutter } from './viewfinder/ViewfinderControls';
+import { ImmersiveOverlay } from './viewfinder/ImmersiveOverlay';
 
 // Back-camera viewfinder for document capture — the RN mirror of the Flutter
 // SDK's _DocumentViewfinder. Shows a VisionCamera preview with an ID-card guide
@@ -17,24 +21,44 @@ import { Icon } from './Icon';
 // available" error (no device / init failure) is owned by the parent step, which
 // shows a prominent error + upload fallback. Capture is manual (no edge detection).
 
-// Card window within the 3:4 viewBox (centred). Height follows the per-ID guide
-// aspect so the overlay matches the auto-crop (cropCardRegion).
-const VB_W = 100;
-const VB_H = 133;
-const GX = 6;
-const GW = 88;
-const C = 7; // corner accent length
 
 export interface CameraViewfinderProps {
   active: boolean;
   side: 'front' | 'back';
   documentLabel: string;
   /** Receives the captured still + a best-effort short document video (or null). */
-  onCapture: (uri: string, videoPath: string | null) => void;
+  onCapture: (
+    uri: string,
+    videoPath: string | null,
+    /** Aspect (w÷h) of the box the preview rendered in — what the crop must match. */
+    viewAr: number,
+  ) => void;
   /** Card-guide aspect (width ÷ height): 1.586 for ID cards, 1.42 for passports. */
   guideAspect?: number;
   /** Capture is disabled while a previous capture/compress is in flight. */
   busy?: boolean;
+  /** ISO-2 country + ID key — what auto-capture checks the document against. */
+  country?: string;
+  idType?: string;
+  /** Banked when a frame yields a check-digit-valid MRZ (the chip's key). */
+  onMrz?: (scan: MrzScan) => void;
+  /** An MRZ is already stored, so the gate need not hold out for one. */
+  mrzAlreadyCaptured?: boolean;
+  /**
+   * Fill the parent instead of sitting in a 3:4 box.
+   *
+   * Used by immersive capture: the camera owns the whole screen, because a
+   * small preview is exactly what makes users hold a document too far away for
+   * the MRZ to resolve.
+   */
+  fill?: boolean;
+  /** Drawn top-left in immersive mode, where the sheet's chrome is gone. */
+  onBack?: (() => void) | null;
+  /** The gallery escape, kept in immersive mode — it is the fallback when the
+   *  camera simply will not read a worn or laminated document. */
+  onUpload?: (() => void) | null;
+  /** Safe-area bottom inset; the full-bleed camera runs under the indicator. */
+  bottomInset?: number;
 }
 
 export function CameraViewfinder({
@@ -44,9 +68,29 @@ export function CameraViewfinder({
   onCapture,
   guideAspect = 1.586,
   busy = false,
+  country,
+  idType,
+  onMrz,
+  mrzAlreadyCaptured = false,
+  fill = false,
+  onBack,
+  onUpload,
+  bottomInset = 0,
 }: CameraViewfinderProps): React.ReactElement {
   const { colors } = useTheme();
-  const device = useCameraDevice('back');
+  // Prefer a back camera that CAN torch, then fall back to the library's
+  // default ranking. On multi-camera phones (seen live on a Galaxy S24) the
+  // default pick can land on a flashless back device — CameraX then rejects
+  // enableTorch with "No flash unit" — while a flash-capable back camera sits
+  // right next to it in the list. `hasTorch` is trustworthy on the logical
+  // device objects (it reads CameraX's hasFlashUnit()); only the
+  // physical-device wrappers stub it, and those lose this find() either way.
+  const allDevices = useCameraDevices();
+  const defaultBack = useCameraDevice('back');
+  const device = useMemo(
+    () => allDevices.find((d) => d.position === 'back' && d.hasTorch) ?? defaultBack,
+    [allDevices, defaultBack],
+  );
   // v5: document-conservative still (OCR). Capture via the photo output, not a
   // camera ref. Quality is prioritised so small text stays legible.
   const photoOutput = usePhotoOutput({ qualityPrioritization: 'quality' });
@@ -75,82 +119,194 @@ export function CameraViewfinder({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active, ready, side]);
 
-  const GH = GW / guideAspect;
-  const GY = (VB_H - GH) / 2;
 
-  const capture = async () => {
-    if (busy || !ready) return;
+  const capturingRef = useRef(false);
+  const capture = useCallback(async () => {
+    if (busy || !ready || capturingRef.current) return;
+    // Guarded because auto-capture and the manual shutter can now both fire —
+    // two concurrent captures contend for the camera and one of them fails.
+    capturingRef.current = true;
     try {
       // Stop the video first (and grab its path) so the still and the clip don't
       // contend for the camera, then capture the OCR still.
       const videoPath = await recorder.stop();
       const file = await photoOutput.capturePhotoToFile({ flashMode: 'off' }, {});
-      onCapture(`file://${file.filePath}`, videoPath);
+      // The MEASURED box, via ref (state would be stale in this callback).
+      // Full-screen capture shows a much taller slice of the photo than the
+      // framed 3:4 box did; the crop must be told which one the user saw.
+      const b = boxRef.current;
+      const viewAr = b.width > 0 && b.height > 0 ? b.width / b.height : FRAMED_VIEW_AR;
+      onCapture(`file://${file.filePath}`, videoPath, viewAr);
     } catch {
       /* a failed shutter is a no-op — the user can tap again */
+    } finally {
+      capturingRef.current = false;
+    }
+  }, [busy, ready, recorder, photoOutput, onCapture]);
+
+  // ── Auto-capture ──────────────────────────────────────────────────────────
+  // Runs only with a document to check against; without one there is nothing to
+  // identify the frame as, and firing on "some text" would shoot anything.
+  const auto = useAutoCapture({
+    enabled: active && ready && !busy && !!country && !!idType,
+    country: country ?? '',
+    idType: idType ?? '',
+    // The back has no branding to identify itself by — the gate relaxes its
+    // identity and text-density demands there (see documentIdentity.ts).
+    side,
+    mrzAlreadyCaptured,
+    onMrz,
+    guideAspect,
+    // Front and back are the same idType; without this the gate stays latched
+    // from the front and the back never auto-captures.
+    resetKey: side,
+    onFire: () => void capture(),
+  });
+
+  // Torch — a document under glass or in a dim room is the commonest reason a
+  // capture reads badly, and it is the one thing the user can fix instantly.
+  const [torch, setTorch] = useState(false);
+  const cameraRef = useRef<CameraRef>(null);
+
+  // IMPERATIVE, verified toggling — not the declarative `torchMode` prop.
+  // The prop path fires the controller call and drops the promise, so a
+  // rejection (CameraX refuses enableTorch when the bound camera reports no
+  // flash unit) leaves the button lit and the scene dark, with nothing in any
+  // log. Await the call, read the REAL state back off the controller (its
+  // getter reads CameraX TorchState, unlike the device object, whose
+  // `hasTorch` is a hardcoded stub for physical devices in this VisionCamera
+  // version), and keep UI state honest either way.
+  const toggleTorch = useCallback(async () => {
+    const controller = cameraRef.current?.controller;
+    if (!controller) return;
+    const next = !torch;
+    try {
+      await controller.setTorchMode(next ? 'on' : 'off');
+      const actual = controller.torchMode === 'on';
+      setTorch(actual);
+      if (actual !== next && __DEV__) {
+        console.warn('[kyc.camera] torch state did not follow the request');
+      }
+    } catch (err) {
+      if (__DEV__) console.warn('[kyc.camera] torch toggle failed:', err);
+      setTorch(false);
     }
-  };
+  }, [torch]);
+  // Honest again: the device SELECTION above prefers a torch-capable camera,
+  // so when this is false there genuinely is no back camera with a flash unit
+  // and the button would be a lie. (An earlier fix trusted Android blindly,
+  // which produced a visible button driving a flashless camera — CameraX
+  // rejected every toggle with "No flash unit".)
+  const hasTorch = device?.hasTorch ?? false;
+
+  const hintText = documentHintText(auto.guidance.hint, documentLabel);
+  // The gate's live instruction once it has a document to judge; the static
+  // prompt until then (it needs a country + ID type to say anything useful).
+  const hint =
+    country && idType
+      ? hintText
+      : `Align the ${side === 'back' ? 'BACK' : 'FRONT'} of your ${documentLabel}`;
+  const hintIsAction = documentHintIsAction(auto.guidance.hint);
+
+  // Immersive insets its own controls (there is no header to sit under).
+  //
+  // The guide is sized from the MEASURED container, not the window: on iOS the
+  // modal is a pageSheet, which is inset from the top of the screen, so window
+  // dimensions overshoot — the frame would sit low and the bottom bar would run
+  // off the edge. onLayout gives the box this actually renders into.
+  const [box, setBox] = useState({ width: 0, height: 0 });
+  const boxRef = useRef(box);
+  boxRef.current = box;
+  const topInset = Platform.OS === 'ios' ? 56 : 32;
 
   return (
-    <View style={{ width: '100%', aspectRatio: 3 / 4, borderRadius: radius.lg, overflow: 'hidden', backgroundColor: '#111111' }}>
-      {ready ? (
-        <Camera style={{ flex: 1 }} device={device} isActive={active} outputs={[photoOutput, videoOutput]} />
+    <View
+      onLayout={
+        fill
+          ? (e) => {
+              const { width, height } = e.nativeEvent.layout;
+              if (width !== box.width || height !== box.height) setBox({ width, height });
+            }
+          : undefined
+      }
+      style={
+        fill
+          ? { flex: 1, overflow: 'hidden', backgroundColor: '#000000' }
+          : { width: '100%', aspectRatio: 3 / 4, borderRadius: radius.lg, overflow: 'hidden', backgroundColor: '#111111' }
+      }
+    >
+      {/* Mounted only once permission is GRANTED, not merely when a device
+          exists. VisionCamera configures its session on mount, and doing that
+          during the brief "requesting" window throws "Camera Permission not yet
+          granted!" as an uncaught rejection — `isActive={false}` does not
+          prevent the configuration. */}
+      {ready && active ? (
+        <Camera
+          ref={cameraRef}
+          style={{ flex: 1 }}
+          device={device}
+          isActive={active}
+          outputs={[photoOutput, videoOutput, auto.frameOutput]}
+        />
       ) : (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
           <ActivityIndicator color="#FFFFFF" />
         </View>
       )}
 
-      {/* Card-guide overlay (only over a live preview) */}
-      {ready ? (
+      {ready && active && fill && box.height > 0 ? (
+        <ImmersiveOverlay
+          side={side}
+          country={country ?? ''}
+          documentLabel={shortDocumentLabel(idType ?? null, documentLabel)}
+          guideAspect={guideAspect}
+          hint={hint}
+          hintIsAction={hintIsAction}
+          progress={auto.progress}
+          busy={busy}
+          torch={torch}
+          hasTorch={hasTorch}
+          onToggleTorch={() => void toggleTorch()}
+          onCapture={capture}
+          onBack={onBack ?? null}
+          onUpload={onUpload ?? null}
+          bottomInset={bottomInset}
+          width={box.width}
+          height={box.height}
+          topInset={topInset}
+          framing={auto.guidance.framing}
+          showMrzBand={idType === 'passport'}
+        />
+      ) : null}
+
+      {/* Framed (in-sheet) overlay */}
+      {ready && active && !fill ? (
         <>
-          <Svg style={{ position: 'absolute', inset: 0 }} viewBox={`0 0 ${VB_W} ${VB_H}`} preserveAspectRatio="none">
-            <Defs>
-              <Mask id="cardMask">
-                <Rect width={VB_W} height={VB_H} fill="white" />
-                <Rect x={GX} y={GY} width={GW} height={GH} rx={3} fill="black" />
-              </Mask>
-            </Defs>
-            <Rect width={VB_W} height={VB_H} fill="rgba(0,0,0,0.55)" mask="url(#cardMask)" />
-            <Rect x={GX} y={GY} width={GW} height={GH} rx={3} fill="none" stroke="rgba(255,255,255,0.85)" strokeWidth={0.6} strokeDasharray="5 3" />
-            <Path d={`M${GX},${GY + C} L${GX},${GY} L${GX + C},${GY}`} stroke={colors.primary} strokeWidth={1.6} fill="none" strokeLinecap="round" />
-            <Path d={`M${GX + GW - C},${GY} L${GX + GW},${GY} L${GX + GW},${GY + C}`} stroke={colors.primary} strokeWidth={1.6} fill="none" strokeLinecap="round" />
-            <Path d={`M${GX + GW},${GY + GH - C} L${GX + GW},${GY + GH} L${GX + GW - C},${GY + GH}`} stroke={colors.primary} strokeWidth={1.6} fill="none" strokeLinecap="round" />
-            <Path d={`M${GX + C},${GY + GH} L${GX},${GY + GH} L${GX},${GY + GH - C}`} stroke={colors.primary} strokeWidth={1.6} fill="none" strokeLinecap="round" />
-          </Svg>
-          <View style={{ position: 'absolute', top: spacing.md, left: 0, right: 0, alignItems: 'center' }}>
-            <View style={{ backgroundColor: 'rgba(0,0,0,0.4)', paddingHorizontal: spacing.sm + 4, paddingVertical: 6, borderRadius: radius.full }}>
-              <MyazaText variant="bodySmall" color="#FFFFFF">
-                {`Align the ${side === 'back' ? 'BACK' : 'FRONT'} of your ${documentLabel}`}
-              </MyazaText>
-            </View>
-          </View>
+          <CardGuide guideAspect={guideAspect} primary={colors.primary} />
+          <HintBanner
+            fill={false}
+            isAction={hintIsAction}
+            text={hint}
+          />
+
+          {hasTorch ? (
+            <OverlayButton
+              icon="lightbulb"
+              side="right"
+              fill={false}
+              active={torch}
+              label={torch ? 'Turn off the torch' : 'Turn on the torch'}
+              onPress={() => void toggleTorch()}
+            />
+          ) : null}
         </>
       ) : null}
 
-      {/* Shutter — disabled when the camera isn't ready */}
-      <View style={{ position: 'absolute', bottom: spacing.lg, left: 0, right: 0, alignItems: 'center' }}>
-        <Pressable
-          onPress={capture}
-          disabled={busy || !ready}
-          accessibilityRole="button"
-          accessibilityLabel="Capture photo"
-          style={({ pressed }) => ({
-            width: 64,
-            height: 64,
-            borderRadius: radius.full,
-            backgroundColor: ready ? '#FFFFFF' : colors.gray400,
-            borderWidth: 4,
-            borderColor: ready ? colors.primary : colors.gray300,
-            alignItems: 'center',
-            justifyContent: 'center',
-            opacity: busy ? 0.6 : 1,
-            transform: [{ scale: pressed ? 0.94 : 1 }],
-          })}
-        >
-          {busy ? <ActivityIndicator color={colors.primary} /> : <Icon name="camera" size={24} color={ready ? colors.primary : '#FFFFFF'} />}
-        </Pressable>
-      </View>
+      {/* Immersive draws its own shutter inside BottomBar (with the torch and
+          the upload escape), so only the framed variant needs this one. */}
+      {fill ? null : (
+        <Shutter onPress={capture} ready={ready} busy={busy} progress={auto.progress} />
+      )}
     </View>
   );
 }

package/src/components/ContactCodeEntry.tsx

@@ -0,0 +1,139 @@
+import React, { useRef } from 'react';
+import { Pressable, TextInput, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { MyazaInput } from './MyazaInput';
+import type { OtpInputStyle } from '../types/workflow';
+
+// ---------------------------------------------------------------------------
+// The OTP code field.
+//
+// Which one renders — segmented boxes or a plain field — is the ORG's choice in
+// the workflow builder (`inputStyle`), not the end user's.
+//
+// The segmented version is ONE hidden TextInput with boxes drawn over it, not
+// N inputs with focus-juggling between them. That is what makes SMS autofill
+// work (the platform fills a single field), makes paste work, and makes
+// backspace behave — a per-box implementation breaks all three, and they are
+// the three things people actually do with a code.
+// ---------------------------------------------------------------------------
+
+export function ContactCodeEntry({
+  code,
+  onChange,
+  codeLength,
+  style,
+  disabled,
+  onComplete,
+}: {
+  code: string;
+  onChange: (code: string) => void;
+  codeLength: number;
+  /** Config-driven field style ('segmented' default). */
+  style: OtpInputStyle;
+  disabled?: boolean;
+  /** Fires with the full code once the last slot fills (auto-submit). */
+  onComplete?: (code: string) => void;
+}): React.ReactElement {
+  const handle = (raw: string): void => {
+    const next = raw.replace(/\D/g, '').slice(0, codeLength);
+    onChange(next);
+    if (next.length === codeLength) onComplete?.(next);
+  };
+
+  if (style === 'text') {
+    return (
+      <MyazaInput
+        label="Verification code"
+        value={code}
+        onChangeText={handle}
+        placeholder={'0'.repeat(codeLength)}
+        keyboardType="number-pad"
+        maxLength={codeLength}
+        editable={!disabled}
+        autoFocus
+      />
+    );
+  }
+
+  return <SegmentedCode code={code} onChangeText={handle} codeLength={codeLength} disabled={disabled} />;
+}
+
+function SegmentedCode({
+  code,
+  onChangeText,
+  codeLength,
+  disabled,
+}: {
+  code: string;
+  onChangeText: (raw: string) => void;
+  codeLength: number;
+  disabled?: boolean;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const inputRef = useRef<TextInput>(null);
+
+  return (
+    <View>
+      {/* Boxes flex to fill the width at a fixed aspect ratio, and the FILLED
+          ones carry the primary border — same geometry and same signal as the
+          Flutter SDK's OtpInput, so the step reads identically on both. */}
+      <Pressable
+        onPress={() => inputRef.current?.focus()}
+        accessibilityRole="none"
+        style={{ flexDirection: 'row', gap: spacing.xs }}
+      >
+        {Array.from({ length: codeLength }, (_, i) => {
+          const filled = i < code.length;
+          return (
+            <View
+              key={i}
+              style={{
+                flex: 1,
+                aspectRatio: 0.82,
+                borderRadius: radius.md,
+                borderWidth: filled ? 1.5 : 1,
+                borderColor: filled ? colors.primary : colors.border,
+                backgroundColor: colors.background,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <MyazaText variant="heading2">{code[i] ?? ''}</MyazaText>
+            </View>
+          );
+        })}
+      </Pressable>
+
+      {/* One real input behind the boxes: the platform's SMS autofill targets a
+          single field, and paste/backspace only behave against one value. It is
+          positioned over the boxes (not display:none) because a zero-size or
+          hidden input is skipped by autofill on both platforms. */}
+      <TextInput
+        ref={inputRef}
+        value={code}
+        onChangeText={onChangeText}
+        keyboardType="number-pad"
+        textContentType="oneTimeCode"
+        autoComplete="one-time-code"
+        maxLength={codeLength}
+        editable={!disabled}
+        autoFocus
+        caretHidden
+        accessibilityLabel="Verification code"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          opacity: 0.01,
+          color: 'transparent',
+          textAlign: 'center',
+        }}
+      />
+    </View>
+  );
+}

package/src/components/CountryField.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { CountryFlag } from './CountryFlag';
+import { DialCodePicker, type DialCodeOption } from './DialCodePicker';
+import { Icon } from './Icon';
+
+// ---------------------------------------------------------------------------
+// A country select field: a MyazaSelect-styled collapsed trigger (flag + name
+// + chevron) that opens THE country sheet — the phone field's dial-code picker
+// minus the dial codes (keyboard-aware, autofocused search, results pinned
+// above the keys). Used wherever a country is picked from a flat list (the
+// key-person "where their ID was issued", the KYB "Country of registration"),
+// so every country picker in the flow feels identical.
+// ---------------------------------------------------------------------------
+
+export function CountryField({
+  value,
+  options,
+  onChange,
+  placeholder = 'Select a country',
+  searchPlaceholder = 'Search country',
+}: {
+  /** ISO-2 of the current pick; empty/null shows the placeholder. */
+  value: string | null;
+  /** The pickable countries — all ISO, or a workflow's registry subset. */
+  options: DialCodeOption[];
+  onChange: (code: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [open, setOpen] = useState(false);
+  const name = value ? (options.find((o) => o.code === value)?.name ?? value) : null;
+
+  return (
+    <>
+      <Pressable
+        onPress={() => setOpen(true)}
+        accessibilityRole="button"
+        accessibilityLabel={name ?? placeholder}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: spacing.md,
+          paddingVertical: spacing.md,
+          borderRadius: radius.sm,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.background,
+        }}
+      >
+        {value ? (
+          <>
+            <CountryFlag country={value} size={20} />
+            <View style={{ width: spacing.sm }} />
+          </>
+        ) : null}
+        <MyazaText
+          variant="body"
+          color={name ? undefined : colors.textMuted}
+          style={{ flex: 1 }}
+          numberOfLines={1}
+        >
+          {name ?? placeholder}
+        </MyazaText>
+        <View style={{ width: spacing.sm }} />
+        <Icon name="chevron-down" size={18} color={colors.textSecondary} />
+      </Pressable>
+
+      <DialCodePicker
+        visible={open}
+        options={options}
+        selected={value ?? ''}
+        searchPlaceholder={searchPlaceholder}
+        onPick={(code) => {
+          setOpen(false);
+          onChange(code);
+        }}
+        onClose={() => setOpen(false)}
+      />
+    </>
+  );
+}

package/src/components/CountryFlag.tsx

@@ -2,32 +2,32 @@ import React from 'react';
 import { View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 // Raw flag SVG strings — the SAME source the web SDK uses (`country-flag-icons`),
-// so the flags match. Only the supported countries are imported.
-import NG from 'country-flag-icons/string/3x2/NG';
-import GH from 'country-flag-icons/string/3x2/GH';
-import KE from 'country-flag-icons/string/3x2/KE';
-import ZA from 'country-flag-icons/string/3x2/ZA';
-import CI from 'country-flag-icons/string/3x2/CI';
+// so the flags match. The WHOLE set is imported, not a curated subset: Global
+// Documents let a workflow offer any ISO country, and a picker where some rows
+// have a flag and others fall back to a grey box looks broken rather than
+// incomplete. The strings are small and the bundler tree-shakes nothing here
+// anyway, since the lookup is by runtime code.
+import * as Flags from 'country-flag-icons/string/3x2';
 
 import { radius } from '../config/theme';
-import type { SupportedCountry } from '../types/config';
 
-// Circular country flag beside the step title — the RN mirror of the web SDK's
-// `CountryFlag` and Flutter's `MyazaCountryFlag`. Renders the country-flag-icons
-// 3:2 SVG via react-native-svg, cropped to a circle (cover-fit, like the web
-// SDK's `object-cover` + `rounded-full`). Works identically on iOS and Android
-// (no emoji-flag dependency, which Android doesn't render).
+// Circular country flag — the RN mirror of the web SDK's `CountryFlag` and
+// Flutter's `MyazaCountryFlag`. Renders the country-flag-icons 3:2 SVG via
+// react-native-svg, cropped to a circle (cover-fit, like the web SDK's
+// `object-cover` + `rounded-full`). Works identically on iOS and Android (no
+// emoji-flag dependency, which Android does not render).
 
-const FLAGS: Record<SupportedCountry, string> = { NG, GH, KE, ZA, CI };
+const FLAGS = Flags as unknown as Record<string, string | undefined>;
 
 export interface CountryFlagProps {
-  country?: SupportedCountry | null;
+  /** Any ISO-3166 alpha-2 code. */
+  country?: string | null;
   size?: number;
 }
 
 export function CountryFlag({ country, size = 20 }: CountryFlagProps): React.ReactElement | null {
   if (!country) return null;
-  const xml = FLAGS[country];
+  const xml = FLAGS[country.toUpperCase()];
   if (!xml) return null;
 
   // The flag is 3:2; to cover a square circle we render it wider than the circle