@myazahq/kyc-sdk-react-native 2.6.0 → 3.0.0

package/src/components/DocumentCropper.tsx

@@ -2,11 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, LayoutChangeEvent, Modal, PanResponder, Platform, Pressable, StatusBar, StyleSheet, View } from 'react-native';
 import Svg, { Line, Rect } from 'react-native-svg';
 
-import { spacing } from '../config/theme';
+import { headerSurface, spacing } from '../config/theme';
 import { cropImage, imageSize } from '../services/mediaCompress';
 import { MyazaText } from './Typography';
 import { MyazaButton } from './MyazaButton';
 import { Icon } from './Icon';
+import { useTheme } from './runtime';
 import { Image } from 'react-native';
 
 // Interactive ID-card cropper — a 1:1 RN port of the Flutter SDK's
@@ -19,7 +20,11 @@ import { Image } from 'react-native';
 const ID_AR = 85.6 / 53.98;
 const HANDLE_RADIUS = 28; // touch radius for the corner handles
 const ARM = 22; // corner-bracket arm length
-const APPBAR_BG = '#1A1A2E';
+// The photo sits on a neutral dark stage in both themes (the web SDK's
+// neutral-900): it is the backdrop a document photo reads well against, and it
+// keeps the white crop strokes legible. Everything around the photo takes the
+// workflow's own colours.
+export const CROPPER_STAGE = '#171717';
 // Keep the title clear of the status bar / notch on the full-screen cropper Modal.
 const TOP_INSET = Platform.OS === 'ios' ? 56 : (StatusBar.currentHeight ?? 24) + 8;
 
@@ -95,6 +100,7 @@ export function DocumentCropper({ uri, onCancel, onConfirm }: DocumentCropperPro
   const [container, setContainer] = useState<{ w: number; h: number } | null>(null);
   const [crop, setCrop] = useState<Rectangle | null>(null);
   const [processing, setProcessing] = useState(false);
+  const { colors, mode } = useTheme();
 
   // Pan state held in refs so the PanResponder callbacks stay stable.
   const handleRef = useRef<Handle>('none');
@@ -219,17 +225,18 @@ export function DocumentCropper({ uri, onCancel, onConfirm }: DocumentCropperPro
 
   return (
     <Modal visible animationType="slide" presentationStyle="fullScreen" onRequestClose={onCancel}>
-      <View style={{ flex: 1, backgroundColor: '#000' }}>
-        {/* App bar */}
-        <View style={styles.appBar}>
-          <Pressable onPress={onCancel} accessibilityRole="button" accessibilityLabel="Cancel" hitSlop={8} style={{ padding: 4, marginRight: 4 }}>
-            <Icon name="close" size={20} color="#FFFFFF" />
+      <StatusBar barStyle={mode === 'dark' ? 'light-content' : 'dark-content'} />
+      <View style={{ flex: 1, backgroundColor: CROPPER_STAGE }}>
+        {/* App bar: the band the flow's steps sit under */}
+        <View style={[styles.appBar, { backgroundColor: headerSurface(colors, mode), borderBottomColor: colors.border }]}>
+          <Pressable onPress={onCancel} accessibilityRole="button" accessibilityLabel="Cancel" hitSlop={8} style={styles.close}>
+            <Icon name="close" size={20} color={colors.textDark} />
           </Pressable>
-          <View>
-            <MyazaText variant="bodyMedium" color="#FFFFFF" style={{ fontWeight: '600' }}>
+          <View style={{ flexShrink: 1 }}>
+            <MyazaText variant="bodyMedium" color={colors.textDark} style={{ fontWeight: '600' }}>
               Crop to ID Card
             </MyazaText>
-            <MyazaText variant="bodySmall" color="rgba(255,255,255,0.6)">
+            <MyazaText variant="bodySmall" color={colors.textMuted}>
               Drag to reposition · handles to resize
             </MyazaText>
           </View>
@@ -274,18 +281,9 @@ export function DocumentCropper({ uri, onCancel, onConfirm }: DocumentCropperPro
         </View>
 
         {/* Action bar */}
-        <View style={styles.actionBar}>
-          {processing ? (
-            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', height: 48 }}>
-              <ActivityIndicator color="#FFFFFF" />
-              <View style={{ width: 10 }} />
-              <MyazaText variant="bodyMedium" color="rgba(255,255,255,0.8)" style={{ flexShrink: 1 }}>
-                Processing…
-              </MyazaText>
-            </View>
-          ) : (
-            <MyazaButton label="Crop & Use" leadingIcon="check" onPress={confirm} disabled={!crop} />
-          )}
+        <View style={[styles.actionBar, { backgroundColor: colors.background, borderTopColor: colors.border }]}>
+          {/* The flow's own button: primary from the workflow, its loading state while the crop runs. */}
+          <MyazaButton label="Crop & Use" leadingIcon="check" onPress={confirm} disabled={!crop} loading={processing} />
         </View>
       </View>
     </Modal>
@@ -311,15 +309,23 @@ const styles = StyleSheet.create({
   appBar: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: APPBAR_BG,
     paddingTop: TOP_INSET,
     paddingBottom: spacing.sm,
     paddingHorizontal: spacing.sm,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  // 44pt: the tap target the platforms ask for, around a 20pt glyph.
+  close: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 4,
   },
   actionBar: {
-    backgroundColor: APPBAR_BG,
     paddingHorizontal: spacing.md,
     paddingTop: spacing.sm,
     paddingBottom: spacing.lg,
+    borderTopWidth: StyleSheet.hairlineWidth,
   },
 });

package/src/components/DocumentReview.tsx

@@ -6,6 +6,7 @@ import { Icon } from './Icon';
 import { MyazaText } from './Typography';
 import { DocumentReviewThumb, type ReviewSide } from './DocumentReviewSide';
 import { DocumentReviewZoom } from './DocumentReviewZoom';
+import { documentReviewCopy, type DocumentCaptureMode } from './documentReviewCopy';
 import { radius, spacing } from '../config/theme';
 
 // ─── Document review ──────────────────────────────────────────────────────────
@@ -33,6 +34,9 @@ import { radius, spacing } from '../config/theme';
 // Unlike Flutter, the step here sits inside the sheet's own ScrollView (which
 // already carries the bottom safe-area inset), so the footer is pushed down by
 // a flexible spacer rather than pinned with a hand-computed inset.
+//
+// The words follow `mode` (see documentReviewCopy): an upload-only workflow
+// never showed a camera, so it says "Replace" and "added".
 
 export function DocumentReview({
   frontUri,
@@ -43,6 +47,7 @@ export function DocumentReview({
   footer,
   onRetakeFront,
   onRetakeBack,
+  mode = 'scan',
 }: {
   frontUri: string;
   backUri?: string | null;
@@ -56,6 +61,8 @@ export function DocumentReview({
   footer: React.ReactNode;
   onRetakeFront?: () => void;
   onRetakeBack?: () => void;
+  /** How the photos got in: the camera (default) or chosen from the device. */
+  mode?: DocumentCaptureMode;
 }): React.ReactElement {
   const { colors } = useTheme();
   const [zoomed, setZoomed] = useState<ReviewSide | null>(null);
@@ -65,6 +72,7 @@ export function DocumentReview({
     ...(backUri ? [{ id: 'back' as const, label: 'Back', uri: backUri, onRetake: onRetakeBack }] : []),
   ];
   const twoSided = sides.length > 1;
+  const copy = documentReviewCopy(mode, twoSided);
 
   return (
     <View style={{ flex: 1 }}>
@@ -85,7 +93,7 @@ export function DocumentReview({
         </View>
         <View style={{ width: spacing.xs }} />
         <MyazaText variant="bodySmall" style={{ fontWeight: '600' }}>
-          {twoSided ? 'Both sides captured' : 'Photo captured'}
+          {copy.status}
         </MyazaText>
       </View>
 
@@ -108,6 +116,7 @@ export function DocumentReview({
                 // the screen read as permanently stuck.
                 busyOverlay={isBusy ? busyOverlay : null}
                 onZoom={() => setZoomed(side)}
+                copy={copy}
               />
             </View>
           </React.Fragment>
@@ -129,6 +138,7 @@ export function DocumentReview({
         <DocumentReviewZoom
           side={zoomed}
           isBusy={isBusy}
+          copy={copy}
           onClose={() => setZoomed(null)}
           onRetake={() => {
             const retake = zoomed.onRetake;

package/src/components/DocumentReviewSide.tsx

@@ -6,6 +6,7 @@ import { Icon } from './Icon';
 import { MyazaText } from './Typography';
 import { radius, spacing } from '../config/theme';
 import { CHROME_SCRIM, ChromeGlass } from './glass/ChromeGlass';
+import type { DocumentReviewCopy } from './documentReviewCopy';
 
 /** The chip's flat backing, and still the fallback off iOS 26. */
 const CHIP_SCRIM = CHROME_SCRIM;
@@ -34,12 +35,15 @@ export function DocumentReviewThumb({
   isBusy,
   busyOverlay,
   onZoom,
+  copy,
 }: {
   side: ReviewSide;
   aspect: number;
   isBusy: boolean;
   busyOverlay?: React.ReactNode;
   onZoom: () => void;
+  /** The review's words for the capture mode (documentReviewCopy). */
+  copy: DocumentReviewCopy;
 }): React.ReactElement {
   const { colors } = useTheme();
   return (
@@ -90,7 +94,7 @@ export function DocumentReviewThumb({
         onPress={isBusy ? undefined : side.onRetake}
         disabled={isBusy}
         accessibilityRole="button"
-        accessibilityLabel={`Retake ${side.label.toLowerCase()}`}
+        accessibilityLabel={copy.redoAccessibility(side.label)}
         style={{
           flexDirection: 'row',
           alignItems: 'center',
@@ -103,7 +107,7 @@ export function DocumentReviewThumb({
         <Icon name="refresh" size={14} color={colors.primary} />
         <View style={{ width: 6 }} />
         <MyazaText variant="bodySmall" color={colors.primary} style={{ flexShrink: 1 }}>
-          Retake
+          {copy.redo}
         </MyazaText>
       </Pressable>
     </View>

package/src/components/DocumentReviewZoom.tsx

@@ -7,6 +7,7 @@ import { Icon } from './Icon';
 import { MyazaText } from './Typography';
 import { MyazaButton } from './MyazaButton';
 import { Chip, CHIP_TEXT, type ReviewSide } from './DocumentReviewSide';
+import type { DocumentReviewCopy } from './documentReviewCopy';
 
 /**
  * Full-bleed view of one side, with retake to hand — checking a capture and
@@ -43,11 +44,14 @@ function bottomInset(): number {
 export function DocumentReviewZoom({
   side,
   isBusy,
+  copy,
   onClose,
   onRetake,
 }: {
   side: ReviewSide;
   isBusy: boolean;
+  /** The review's words for the capture mode (documentReviewCopy). */
+  copy: DocumentReviewCopy;
   onClose: () => void;
   onRetake: () => void;
 }): React.ReactElement {
@@ -107,7 +111,7 @@ export function DocumentReviewZoom({
 
         <View style={{ height: spacing.sm }} />
         <MyazaButton
-          label={`Retake ${side.label.toLowerCase()}`}
+          label={copy.redoSide(side.label)}
           leadingIcon="refresh"
           variant="outline"
           disabled={isBusy}

package/src/components/Icon.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Ionicons from '@expo/vector-icons/Ionicons';
 
 import { ICONS, type IconName } from './icon-map';
 
@@ -15,11 +14,13 @@ export interface IconProps {
 }
 
 export function Icon({ name, size = 20, color, strokeWidth = 2, solid = false }: IconProps): React.ReactElement {
-  // Solid moon/sun for the theme toggle — Lucide has no filled variants, so use
-  // Ionicons' purpose-built solid glyphs (matches Flutter's dark_mode/light_mode).
-  if (solid && (name === 'moon' || name === 'sun')) {
-    return <Ionicons name={name === 'moon' ? 'moon' : 'sunny'} size={size} color={color} />;
-  }
   const Glyph = ICONS[name];
-  return <Glyph size={size} color={color} strokeWidth={strokeWidth} />;
+  // The theme toggle's filled moon/sun (Flutter's dark_mode/light_mode). Lucide
+  // ships no filled variants, so the glyph's own body takes the colour: the
+  // moon's crescent and the sun's disc fill, the sun's rays stay strokes. This
+  // replaced an Ionicons import that was the SDK's ONLY use of
+  // @expo/vector-icons, a package whose icon fonts still reached every
+  // integrator's app for those two glyphs (1.35 MB on a real release APK).
+  const fill = solid && (name === 'moon' || name === 'sun') ? color : 'none';
+  return <Glyph size={size} color={color} strokeWidth={strokeWidth} fill={fill} />;
 }

package/src/components/KycFlow.tsx

@@ -134,9 +134,16 @@ export function KycFlow({
     return { progress: (idx + 1) / steps.length, stepCount: steps.length };
   }, [currentStep, order]);
 
-  // The flag beside the title names the country whose IDs are on screen.
+  // The flag beside the title names the country whose IDs are on screen. The
+  // document steps ask for a country's document just as directly as the ID
+  // ones do, so they carry the same flag rather than a second treatment.
   const headerCountry =
-    currentStep === 'id-type' || currentStep === 'id-input' ? country : null;
+    currentStep === 'id-type' ||
+    currentStep === 'id-input' ||
+    currentStep === 'document-capture' ||
+    currentStep === 'nfc'
+      ? country
+      : null;
   // Back is hidden on the flow's OPENING step (consent, or the first real step
   // when the workflow switched the consent screen off), not on consent by
   // name. A multi-ID run returns to the ID picker for its next check, where

package/src/components/MyazaButton.tsx

@@ -25,6 +25,10 @@ export interface MyazaButtonProps {
   leadingIcon?: IconName;
   style?: StyleProp<ViewStyle>;
   fullWidth?: boolean;
+  /** Screen reader label, when the visible label alone is ambiguous. */
+  accessibilityLabel?: string;
+  /** Screen reader hint describing what the press does. */
+  accessibilityHint?: string;
 }
 
 export function MyazaButton({
@@ -36,6 +40,8 @@ export function MyazaButton({
   leadingIcon,
   style,
   fullWidth = true,
+  accessibilityLabel,
+  accessibilityHint,
 }: MyazaButtonProps): React.ReactElement {
   const { colors } = useTheme();
   const isDisabled = disabled || loading || !onPress;
@@ -59,6 +65,9 @@ export function MyazaButton({
     <Pressable
       onPress={isDisabled ? undefined : onPress}
       disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
       style={({ pressed }) => [
         {
           height: sizing.buttonHeight,

package/src/components/RequiredDocumentPill.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { Icon } from './Icon';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+
+/**
+ * "Required: <document>" — which document this step expects, on the screens
+ * either side of the camera (the ready primer and the review).
+ *
+ * The header names the document too, but this is the last thing in view when
+ * the applicant is deciding whether they have the right one in hand, and on a
+ * two-sided ID it is the only place that says which SIDE is being asked for
+ * and how far through they are.
+ *
+ * Mirrors the web SDK's badge in DocumentCaptureStep and Flutter's
+ * `_RequiredPill`: same Lucide glyph, same primary tint, same wording.
+ */
+export function RequiredDocumentPill({
+  idTypeLabel,
+  sideBadge,
+  stepLabel,
+}: {
+  idTypeLabel: string;
+  /** "Front Side" / "Back Side" — two-sided documents only. */
+  sideBadge?: string | null;
+  /** "Step 1 of 2" — two-sided documents only. */
+  stepLabel?: string | null;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const hasMeta = Boolean(sideBadge || stepLabel);
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        // Column and row gaps are set separately: when this wraps, the two
+        // groups need breathing room vertically too, and a single `gap` gives
+        // the wrapped row the same spacing as the inline one by accident.
+        columnGap: spacing.sm,
+        rowGap: spacing.xs,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.primary200,
+        backgroundColor: colors.primary50,
+      }}
+      // One statement to a screen reader; the parts read as a sentence
+      // rather than three disconnected fragments.
+      accessible
+      accessibilityLabel={[`Required: ${idTypeLabel}`, sideBadge, stepLabel]
+        .filter(Boolean)
+        .join(', ')}
+    >
+      {/* What the applicant has to be holding. Shrinks and wraps within its
+          own box before it pushes anything else off the line, because the
+          document name is the one part of this that cannot be abbreviated —
+          "Permanent Voter's Card" truncated is a different document. */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: spacing.xs,
+          flexShrink: 1,
+          minWidth: 0,
+        }}
+      >
+        <Icon name="credit-card" size={16} color={colors.primary} />
+        <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '600' }}>
+          Required:
+        </MyazaText>
+        <MyazaText variant="bodySmall" color={colors.primary} style={{ flexShrink: 1 }}>
+          {idTypeLabel}
+        </MyazaText>
+      </View>
+      {/* Side and progress travel TOGETHER. They are one thought — which half
+          of a two-sided document this is — and on a narrow screen they drop to
+          a second line as a pair.
+          The step label used to carry `marginLeft: 'auto'`, which fights
+          `flexWrap`: auto-margin assumes spare space on the line, wrapping
+          means there is none. So on a long document name it wrapped alone and
+          was then flung to the right edge, leaving an orphaned "Step 1 of 2"
+          under an empty gap. Seen on a Galaxy S24 with "Permanent Voter's
+          Card". Grouping them makes the wrap look deliberate instead. */}
+      {hasMeta ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.xs }}>
+          {sideBadge ? (
+            <View
+              style={{
+                paddingHorizontal: spacing.sm,
+                paddingVertical: 2,
+                borderRadius: radius.full,
+                backgroundColor: colors.primary100,
+              }}
+            >
+              <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '600' }}>
+                {sideBadge}
+              </MyazaText>
+            </View>
+          ) : null}
+          {stepLabel ? (
+            <MyazaText variant="bodySmall" color={colors.textSecondary}>
+              {stepLabel}
+            </MyazaText>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/StepHeader.tsx

@@ -17,6 +17,10 @@ import { CountryFlag } from './CountryFlag';
 const BACK_SIZE = 40;
 const BACK_FOOTPRINT = BACK_SIZE + spacing.sm;
 
+// One line of heading2 (fontSize 20). The flag is centred inside a box of this
+// height so it lands on the first line whether the title wraps or not.
+const FLAG_LINE_HEIGHT = 26;
+
 export interface StepHeaderProps {
   title: string;
   description?: string | null;
@@ -44,13 +48,29 @@ export function StepHeader({ title, description, onBack, country }: StepHeaderPr
             />
           </View>
         ) : null}
-        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+        {/* `flex-start`, not `center`. A long document name wraps to two lines
+            on a small screen ("Capture Your Permanent Voter's Card" does at
+            360dp), and centring the flag against the whole block floated it in
+            the gap between the lines, attached to neither. Anchored to the top
+            it reads as a marker on the title, wherever the text wraps.
+            Seen on a Galaxy S24. */}
+        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-start' }}>
           <MyazaText variant="heading2" numberOfLines={2} style={{ flexShrink: 1 }}>
             {title}
           </MyazaText>
           {country ? (
-            <View style={{ marginLeft: spacing.sm }}>
-              <CountryFlag country={country} size={20} />
+            // The flag box is the height of one line of heading2, with the flag
+            // centred in it — so it sits on the first line's optical centre
+            // rather than its top edge, and does not have to be re-nudged if
+            // the type scale moves.
+            <View
+              style={{
+                marginLeft: spacing.sm,
+                height: FLAG_LINE_HEIGHT,
+                justifyContent: 'center',
+              }}
+            >
+              <CountryFlag country={country} size={18} />
             </View>
           ) : null}
         </View>

package/src/components/documentReviewCopy.ts

@@ -0,0 +1,39 @@
+// ─── The review screen's words, per capture mode ──────────────────────────────
+//
+// The document review is shared by both ways a document gets in. "Retake" and
+// "captured" describe a camera, which an upload-only workflow
+// (`allowDocumentScan: false`) never shows the applicant, so that mode says
+// "Replace" and "added" instead, matching the web SDK. Scan mode (scan-only and
+// both-on) keeps its words exactly.
+//
+// Pure, so the wording is pinned by a test without mounting React Native.
+
+export type DocumentCaptureMode = 'scan' | 'upload';
+
+export interface DocumentReviewCopy {
+  /** The line above the thumbnails saying the capture is complete. */
+  status: string;
+  /** The labelled action under each thumbnail. */
+  redo: string;
+  /** The screen reader label for that action, naming the side. */
+  redoAccessibility: (sideLabel: string) => string;
+  /** The enlarged view's button, naming the side. */
+  redoSide: (sideLabel: string) => string;
+}
+
+export function documentReviewCopy(mode: DocumentCaptureMode, twoSided: boolean): DocumentReviewCopy {
+  if (mode === 'upload') {
+    return {
+      status: twoSided ? 'Both sides added' : 'Photo added',
+      redo: 'Replace',
+      redoAccessibility: (side) => `Replace the ${side.toLowerCase()} photo`,
+      redoSide: (side) => `Replace ${side.toLowerCase()}`,
+    };
+  }
+  return {
+    status: twoSided ? 'Both sides captured' : 'Photo captured',
+    redo: 'Retake',
+    redoAccessibility: (side) => `Retake ${side.toLowerCase()}`,
+    redoSide: (side) => `Retake ${side.toLowerCase()}`,
+  };
+}

package/src/components/fonts.ts

@@ -1,26 +1,29 @@
 import type { TextStyle } from 'react-native';
 import { useFonts } from 'expo-font';
-import { SpaceGrotesk_500Medium, SpaceGrotesk_600SemiBold, SpaceGrotesk_700Bold } from '@expo-google-fonts/space-grotesk';
-import { Karla_400Regular, Karla_500Medium, Karla_600SemiBold, Karla_700Bold } from '@expo-google-fonts/karla';
 import { fontFamilyFor } from '../config/font-resolve';
 import { useTheme } from './theme-provider';
 
 export { fontFamilyFor, markFamilyName, brandFamilyName, BRAND_WEIGHTS } from '../config/font-resolve';
 
-
 // Typography fonts — the SAME families the Flutter SDK uses via google_fonts:
 // Space Grotesk for headings, Karla for body. Loaded at runtime through
 // expo-font (already natively linked), so no native rebuild is needed. Each
 // weight is its own RN font family, so we resolve family-by-weight below.
-
+//
+// The files are VENDORED under src/assets/fonts and required one by one (see
+// the README there). They used to be named imports from the
+// @expo-google-fonts packages, whose index requires EVERY weight the family
+// ships — and Metro bundles every `require` it can see, used or not — so 19
+// font files reached every integrator's app for the seven faces the SDK draws
+// with. Measured at 1.85 MB on a real integrator's release APK.
 export const MYAZA_FONTS = {
-  SpaceGrotesk_500Medium,
-  SpaceGrotesk_600SemiBold,
-  SpaceGrotesk_700Bold,
-  Karla_400Regular,
-  Karla_500Medium,
-  Karla_600SemiBold,
-  Karla_700Bold,
+  SpaceGrotesk_500Medium: require('../assets/fonts/SpaceGrotesk_500Medium.ttf'),
+  SpaceGrotesk_600SemiBold: require('../assets/fonts/SpaceGrotesk_600SemiBold.ttf'),
+  SpaceGrotesk_700Bold: require('../assets/fonts/SpaceGrotesk_700Bold.ttf'),
+  Karla_400Regular: require('../assets/fonts/Karla_400Regular.ttf'),
+  Karla_500Medium: require('../assets/fonts/Karla_500Medium.ttf'),
+  Karla_600SemiBold: require('../assets/fonts/Karla_600SemiBold.ttf'),
+  Karla_700Bold: require('../assets/fonts/Karla_700Bold.ttf'),
 };
 
 /** Loads the Myaza fonts. Returns true once they're ready (system font until then). */
@@ -29,12 +32,6 @@ export function useMyazaFonts(): boolean {
   return loaded;
 }
 
-/**
- * Resolves the concrete RN font family for a (heading vs body, weight) pair.
- * Returns `undefined` until fonts are loaded so text falls back to the system
- * font + `fontWeight` without triggering an "unrecognized font" warning.
- */
-
 /**
  * The body font family for a TEXT INPUT, at the given weight.
  *

package/src/components/stepHeaderMeta.tsx

@@ -1,6 +1,7 @@
 import { ID_TYPES } from '../config/idTypes';
 import { poaDocumentTypes, poaMaxAgeDays, poaNamePolicy } from '../config/proofOfAddress';
 import { documentCaptureMeta } from '../screens/DocumentCaptureStep';
+import { documentCaptureMethods } from '../config/documentCaptureMethods';
 import { questionnaireMeta } from '../screens/QuestionnaireStep';
 import { contactCodeLength, contactMeta, type ContactChallenge } from '../config/contact';
 
@@ -77,7 +78,11 @@ export function stepHeaderMeta(
       case 'document-capture':
         // Phase-aware title/description live in the header (synced from the
         // capture screen via `documentCapturePhase`) — mirrors Flutter.
-        return documentCaptureMeta(documentCapturePhase, label);
+        return documentCaptureMeta(
+          documentCapturePhase,
+          label,
+          documentCaptureMethods(config).scan ? 'scan' : 'upload',
+        );
       case 'liveness':
         return { title: 'Face Verification', description: 'Follow the on-screen instructions' };
       case 'questionnaire':

package/src/config/documentCaptureMethods.ts

@@ -0,0 +1,31 @@
+// ---------------------------------------------------------------------------
+// How the applicant may put a document in front of us.
+//
+// Two workflow switches, each on unless set to `false`: `allowDocumentScan`
+// (photograph it with the live camera) and `allowDocumentUpload` (choose a
+// photo of it from the device). The server refuses to publish a workflow with
+// both off, but a stored or prop-supplied config can still carry that, and a
+// document step with no way in is a dead end. So the camera comes back on in
+// that case: it is the method the step was built around.
+//
+// Screens read the pair through here and never the raw keys, so the fallback
+// is one rule rather than a check every screen has to remember. Mirrors the
+// web and Flutter SDKs.
+// ---------------------------------------------------------------------------
+
+export interface DocumentCaptureMethods {
+  /** Photograph the document with the live camera. */
+  scan: boolean;
+  /** Choose a photo of the document from the device. */
+  upload: boolean;
+}
+
+export function documentCaptureMethods(config: {
+  allowDocumentScan?: boolean;
+  allowDocumentUpload?: boolean;
+}): DocumentCaptureMethods {
+  const upload = config.allowDocumentUpload !== false;
+  // With upload off the camera is the only way left, whatever its flag says.
+  const scan = upload ? config.allowDocumentScan !== false : true;
+  return { scan, upload };
+}

package/src/config/workflowMerge.ts

@@ -25,6 +25,7 @@ export const WORKFLOW_KEYS = [
   'enableSelfie',
   'enableDocumentCapture',
   'allowDocumentUpload',
+  'allowDocumentScan',
   'enableLiveness',
   'livenessMode',
   'flashSequenceLength',
@@ -110,6 +111,7 @@ const APPLICANT_LEG_KEYS = [
   'enableSelfie',
   'enableDocumentCapture',
   'allowDocumentUpload',
+  'allowDocumentScan',
   'enableLiveness',
   'livenessMode',
   'flashSequenceLength',