@myazahq/kyc-sdk-react-native 2.0.0

package/src/components/CountryFlag.tsx

@@ -0,0 +1,52 @@
+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';
+
+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).
+
+const FLAGS: Record<SupportedCountry, string> = { NG, GH, KE, ZA, CI };
+
+export interface CountryFlagProps {
+  country?: SupportedCountry | null;
+  size?: number;
+}
+
+export function CountryFlag({ country, size = 20 }: CountryFlagProps): React.ReactElement | null {
+  if (!country) return null;
+  const xml = FLAGS[country];
+  if (!xml) return null;
+
+  // The flag is 3:2; to cover a square circle we render it wider than the circle
+  // and let the circular clip crop the sides (matches the web's object-cover).
+  const flagWidth = size * 1.5;
+
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: radius.full,
+        overflow: 'hidden',
+        backgroundColor: 'rgba(0,0,0,0.04)',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <SvgXml xml={xml} width={flagWidth} height={size} preserveAspectRatio="xMidYMid slice" />
+    </View>
+  );
+}

package/src/components/DocumentCropper.tsx

@@ -0,0 +1,325 @@
+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 { cropImage, imageSize } from '../services/mediaCompress';
+import { MyazaText } from './Typography';
+import { MyazaButton } from './MyazaButton';
+import { Icon } from './Icon';
+import { Image } from 'react-native';
+
+// Interactive ID-card cropper — a 1:1 RN port of the Flutter SDK's
+// _DocumentCropperScreen. Shown after picking a document photo from the gallery:
+// a draggable, fixed-aspect (ISO ID-1) crop box over the image, with a dimmed
+// surround, white border, rule-of-thirds grid and L-shaped corner brackets.
+// Geometry, hit-testing and the confirm math all mirror the Flutter widget.
+
+// ISO/IEC 7810 ID-1: 85.6 mm × 53.98 mm → AR ≈ 1.5858 (fixed, like Flutter).
+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';
+// 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;
+
+interface Rectangle {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+type Handle = 'none' | 'move' | 'tl' | 'tr' | 'bl' | 'br';
+
+export interface DocumentCropperProps {
+  uri: string;
+  onCancel: () => void;
+  onConfirm: (croppedUri: string) => void;
+}
+
+function computeImgRect(natW: number, natH: number, cw: number, ch: number): Rectangle {
+  // object-contain rect of the image within the container.
+  const natAR = natW / natH;
+  const conAR = cw / ch;
+  let rw: number;
+  let rh: number;
+  if (natAR > conAR) {
+    rw = cw;
+    rh = cw / natAR;
+  } else {
+    rh = ch;
+    rw = ch * natAR;
+  }
+  return { x: (cw - rw) / 2, y: (ch - rh) / 2, w: rw, h: rh };
+}
+
+function initCropRect(img: Rectangle): Rectangle {
+  // 85% of image width, centered, respecting the ID aspect; capped at 90% height.
+  let w = img.w * 0.85;
+  let h = w / ID_AR;
+  if (h > img.h * 0.9) {
+    h = img.h * 0.9;
+    w = h * ID_AR;
+  }
+  return { x: img.x + (img.w - w) / 2, y: img.y + (img.h - h) / 2, w, h };
+}
+
+function clampCrop(crop: Rectangle, b: Rectangle): Rectangle {
+  let w = Math.min(Math.max(crop.w, 60), b.w);
+  let h = w / ID_AR;
+  if (h > b.h) {
+    h = b.h;
+    w = h * ID_AR;
+    if (w > b.w) {
+      w = b.w;
+      h = w / ID_AR;
+    }
+  }
+  const maxLeft = Math.max(b.x, b.x + b.w - w);
+  const maxTop = Math.max(b.y, b.y + b.h - h);
+  return {
+    x: Math.min(Math.max(crop.x, b.x), maxLeft),
+    y: Math.min(Math.max(crop.y, b.y), maxTop),
+    w,
+    h,
+  };
+}
+
+function dist(ax: number, ay: number, bx: number, by: number): number {
+  return Math.hypot(ax - bx, ay - by);
+}
+
+export function DocumentCropper({ uri, onCancel, onConfirm }: DocumentCropperProps): React.ReactElement {
+  const [natural, setNatural] = useState<{ w: number; h: number } | null>(null);
+  const [container, setContainer] = useState<{ w: number; h: number } | null>(null);
+  const [crop, setCrop] = useState<Rectangle | null>(null);
+  const [processing, setProcessing] = useState(false);
+
+  // Pan state held in refs so the PanResponder callbacks stay stable.
+  const handleRef = useRef<Handle>('none');
+  const cropAtStart = useRef<Rectangle | null>(null);
+  const cropRef = useRef<Rectangle | null>(null);
+  cropRef.current = crop;
+
+  useEffect(() => {
+    let alive = true;
+    imageSize(uri)
+      .then(({ width, height }) => {
+        if (alive) setNatural({ w: width, h: height });
+      })
+      .catch(() => {
+        /* fall through — confirm is gated on `natural` */
+      });
+    return () => {
+      alive = false;
+    };
+  }, [uri]);
+
+  const imgRect = useMemo<Rectangle | null>(() => {
+    if (!natural || !container) return null;
+    return computeImgRect(natural.w, natural.h, container.w, container.h);
+  }, [natural, container]);
+
+  // Initialise the crop box once the image rect is known.
+  useEffect(() => {
+    if (imgRect && !crop) setCrop(initCropRect(imgRect));
+  }, [imgRect, crop]);
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (evt) => {
+          const c = cropRef.current;
+          if (!c) return;
+          const px = evt.nativeEvent.locationX;
+          const py = evt.nativeEvent.locationY;
+          let h: Handle = 'none';
+          if (dist(px, py, c.x, c.y) < HANDLE_RADIUS) h = 'tl';
+          else if (dist(px, py, c.x + c.w, c.y) < HANDLE_RADIUS) h = 'tr';
+          else if (dist(px, py, c.x, c.y + c.h) < HANDLE_RADIUS) h = 'bl';
+          else if (dist(px, py, c.x + c.w, c.y + c.h) < HANDLE_RADIUS) h = 'br';
+          else if (px >= c.x - 8 && px <= c.x + c.w + 8 && py >= c.y - 8 && py <= c.y + c.h + 8) h = 'move';
+          handleRef.current = h;
+          cropAtStart.current = c;
+        },
+        onPanResponderMove: (_evt, g) => {
+          const start = cropAtStart.current;
+          const bounds = imgRect;
+          const h = handleRef.current;
+          if (!start || !bounds || h === 'none') return;
+          const dx = g.dx;
+          const dy = g.dy;
+          const bottom = start.y + start.h;
+          let next: Rectangle;
+          switch (h) {
+            case 'move':
+              next = { x: start.x + dx, y: start.y + dy, w: start.w, h: start.h };
+              break;
+            case 'br': {
+              const w = start.w + dx;
+              next = { x: start.x, y: start.y, w, h: w / ID_AR };
+              break;
+            }
+            case 'bl': {
+              const w = start.w - dx;
+              next = { x: start.x + dx, y: start.y, w, h: w / ID_AR };
+              break;
+            }
+            case 'tr': {
+              const w = start.w + dx;
+              const hh = w / ID_AR;
+              next = { x: start.x, y: bottom - hh, w, h: hh };
+              break;
+            }
+            case 'tl': {
+              const w = start.w - dx;
+              const hh = w / ID_AR;
+              next = { x: start.x + dx, y: bottom - hh, w, h: hh };
+              break;
+            }
+            default:
+              return;
+          }
+          setCrop(clampCrop(next, bounds));
+        },
+        onPanResponderRelease: () => {
+          handleRef.current = 'none';
+        },
+        onPanResponderTerminate: () => {
+          handleRef.current = 'none';
+        },
+      }),
+    [imgRect],
+  );
+
+  const onContainerLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setContainer((prev) => (prev && prev.w === width && prev.h === height ? prev : { w: width, h: height }));
+  };
+
+  const confirm = async () => {
+    if (!natural || !imgRect || !crop || processing) return;
+    setProcessing(true);
+    try {
+      const scaleX = natural.w / imgRect.w;
+      const scaleY = natural.h / imgRect.h;
+      const originX = Math.min(Math.max((crop.x - imgRect.x) * scaleX, 0), natural.w - 1);
+      const originY = Math.min(Math.max((crop.y - imgRect.y) * scaleY, 0), natural.h - 1);
+      const width = Math.min(crop.w * scaleX, natural.w - originX);
+      const height = Math.min(crop.h * scaleY, natural.h - originY);
+      const out = await cropImage(uri, { originX, originY, width, height });
+      onConfirm(out);
+    } catch {
+      setProcessing(false);
+    }
+  };
+
+  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" />
+          </Pressable>
+          <View>
+            <MyazaText variant="bodyMedium" color="#FFFFFF" style={{ fontWeight: '600' }}>
+              Crop to ID Card
+            </MyazaText>
+            <MyazaText variant="bodySmall" color="rgba(255,255,255,0.6)">
+              Drag to reposition · handles to resize
+            </MyazaText>
+          </View>
+        </View>
+
+        {/* Image + crop overlay */}
+        <View style={{ flex: 1 }} onLayout={onContainerLayout}>
+          {!natural ? (
+            <View style={StyleSheet.absoluteFill}>
+              <ActivityIndicator color="#FFFFFF" style={{ flex: 1 }} />
+            </View>
+          ) : (
+            <>
+              <Image source={{ uri }} resizeMode="contain" style={StyleSheet.absoluteFill} />
+              {container && crop ? (
+                <Svg style={StyleSheet.absoluteFill} width={container.w} height={container.h}>
+                  {/* Dim surround (4 rects) */}
+                  <Rect x={0} y={0} width={container.w} height={crop.y} fill="rgba(0,0,0,0.6)" />
+                  <Rect x={0} y={crop.y + crop.h} width={container.w} height={Math.max(0, container.h - crop.y - crop.h)} fill="rgba(0,0,0,0.6)" />
+                  <Rect x={0} y={crop.y} width={crop.x} height={crop.h} fill="rgba(0,0,0,0.6)" />
+                  <Rect x={crop.x + crop.w} y={crop.y} width={Math.max(0, container.w - crop.x - crop.w)} height={crop.h} fill="rgba(0,0,0,0.6)" />
+
+                  {/* White border */}
+                  <Rect x={crop.x} y={crop.y} width={crop.w} height={crop.h} fill="none" stroke="#FFFFFF" strokeWidth={2} />
+
+                  {/* Rule-of-thirds grid */}
+                  <Line x1={crop.x + crop.w / 3} y1={crop.y} x2={crop.x + crop.w / 3} y2={crop.y + crop.h} stroke="rgba(255,255,255,0.25)" strokeWidth={1} />
+                  <Line x1={crop.x + (crop.w * 2) / 3} y1={crop.y} x2={crop.x + (crop.w * 2) / 3} y2={crop.y + crop.h} stroke="rgba(255,255,255,0.25)" strokeWidth={1} />
+                  <Line x1={crop.x} y1={crop.y + crop.h / 3} x2={crop.x + crop.w} y2={crop.y + crop.h / 3} stroke="rgba(255,255,255,0.25)" strokeWidth={1} />
+                  <Line x1={crop.x} y1={crop.y + (crop.h * 2) / 3} x2={crop.x + crop.w} y2={crop.y + (crop.h * 2) / 3} stroke="rgba(255,255,255,0.25)" strokeWidth={1} />
+
+                  {/* L-shaped corner brackets */}
+                  {cornerLines(crop).map((l, i) => (
+                    <Line key={i} x1={l[0]} y1={l[1]} x2={l[2]} y2={l[3]} stroke="#FFFFFF" strokeWidth={3.5} strokeLinecap="round" />
+                  ))}
+                </Svg>
+              ) : null}
+              {/* Gesture layer on top */}
+              <View style={StyleSheet.absoluteFill} {...panResponder.panHandlers} />
+            </>
+          )}
+        </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)">
+                Processing…
+              </MyazaText>
+            </View>
+          ) : (
+            <MyazaButton label="Crop & Use" leadingIcon="check" onPress={confirm} disabled={!crop} />
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+function cornerLines(c: Rectangle): Array<[number, number, number, number]> {
+  const r = c.x + c.w;
+  const b = c.y + c.h;
+  return [
+    [c.x, c.y, c.x + ARM, c.y],
+    [c.x, c.y, c.x, c.y + ARM],
+    [r, c.y, r - ARM, c.y],
+    [r, c.y, r, c.y + ARM],
+    [c.x, b, c.x + ARM, b],
+    [c.x, b, c.x, b - ARM],
+    [r, b, r - ARM, b],
+    [r, b, r, b - ARM],
+  ];
+}
+
+const styles = StyleSheet.create({
+  appBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: APPBAR_BG,
+    paddingTop: TOP_INSET,
+    paddingBottom: spacing.sm,
+    paddingHorizontal: spacing.sm,
+  },
+  actionBar: {
+    backgroundColor: APPBAR_BG,
+    paddingHorizontal: spacing.md,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.lg,
+  },
+});

package/src/components/GlassIconButton.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { radius } from '../config/theme';
+import { useTheme } from './runtime';
+import { Icon, type IconName } from './Icon';
+import { GlassSurface, supportsLiquidGlass } from './glass/GlassSurface';
+
+// Circular icon button for the header chrome (back / theme toggle / close).
+// On iOS 26 it renders as an interactive Liquid Glass circle; elsewhere it's a
+// borderless ghost icon with a generous tap target. This is where the user
+// asked for Liquid Glass — the theme/close/back chrome icons.
+
+export interface GlassIconButtonProps {
+  icon: IconName;
+  onPress?: () => void;
+  size?: number;
+  iconSize?: number;
+  disabled?: boolean;
+  /** Render the glyph solid/filled (e.g. the theme toggle). */
+  solid?: boolean;
+  /**
+   * Skip this button's own glass surface — used when it sits inside a
+   * {@link GlassGroup} that already provides one shared glass capsule, so the
+   * group reads as a single piece of glass rather than two overlapping ones.
+   */
+  plain?: boolean;
+  /** Accessible label for screen readers. */
+  accessibilityLabel?: string;
+}
+
+export function GlassIconButton({
+  icon,
+  onPress,
+  size = 40,
+  iconSize = 20,
+  disabled = false,
+  solid = false,
+  plain = false,
+  accessibilityLabel,
+}: GlassIconButtonProps): React.ReactElement {
+  const { colors } = useTheme();
+  const enabled = !disabled && !!onPress;
+  const iconColor = enabled ? `${colors.textDark}CC` : colors.textMuted; // ~0.8 alpha
+
+  const glyph = (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: radius.full,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      <Icon name={icon} size={iconSize} color={iconColor} solid={solid} />
+    </View>
+  );
+
+  const content =
+    !plain && supportsLiquidGlass() && enabled ? (
+      <GlassSurface
+        glassStyle="regular"
+        interactive
+        style={{
+          width: size,
+          height: size,
+          borderRadius: radius.full,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Icon name={icon} size={iconSize} color={iconColor} solid={solid} />
+      </GlassSurface>
+    ) : (
+      glyph
+    );
+
+  return (
+    <Pressable
+      onPress={enabled ? onPress : undefined}
+      disabled={!enabled}
+      hitSlop={6}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1, transform: [{ scale: pressed ? 0.92 : 1 }] })}
+    >
+      {content}
+    </Pressable>
+  );
+}

package/src/components/Icon.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import {
+  BadgeCheck,
+  BookUser,
+  Camera,
+  CameraOff,
+  Car,
+  Check,
+  CircleAlert,
+  Contact,
+  CreditCard,
+  Fingerprint,
+  FileText,
+  IdCard,
+  Landmark,
+  Lightbulb,
+  Globe,
+  Lock,
+  Moon,
+  MoveLeft,
+  RefreshCw,
+  ScanFace,
+  ScanLine,
+  ShieldCheck,
+  Sun,
+  Upload,
+  UserRound,
+  VideoOff,
+  Vote,
+  X,
+  type LucideIcon,
+} from 'lucide-react-native';
+
+// Centralised icon set — the SAME Lucide icons the Flutter SDK uses
+// (`lucide_icons_flutter`) and the web SDK uses (`lucide-react`). Rendered via
+// lucide-react-native (react-native-svg), so the glyphs are pixel-identical
+// across all three platforms.
+
+export type IconName =
+  // chrome
+  | 'close'
+  | 'back'
+  | 'moon'
+  | 'sun'
+  | 'check'
+  | 'lock'
+  | 'alert'
+  | 'refresh'
+  // consent hero + process steps
+  | 'shield'
+  | 'badge-check'
+  | 'user'
+  | 'scan-line'
+  | 'scan-face'
+  // id-type glyphs
+  | 'fingerprint'
+  | 'credit-card'
+  | 'globe'
+  | 'car'
+  | 'vote'
+  | 'file-text'
+  | 'landmark'
+  | 'id-card'
+  | 'contact'
+  | 'passport'
+  | 'camera'
+  | 'camera-off'
+  | 'video-off'
+  | 'upload'
+  | 'lightbulb';
+
+// Maps each name to its Lucide component. Names mirror the Flutter SDK exactly:
+//   shieldCheck · badgeCheck · userRound · scanLine · scanFace · fingerprint ·
+//   creditCard · globe · car · vote · fileText  (+ chrome: X / ArrowLeft /
+//   Moon / Sun / Check / Lock / CircleAlert / RefreshCw / Camera).
+const ICONS: Record<IconName, LucideIcon> = {
+  close: X,
+  back: MoveLeft, // longer-shaft left arrow, matching Flutter's keyboard_backspace
+  moon: Moon,
+  sun: Sun,
+  check: Check,
+  lock: Lock,
+  alert: CircleAlert,
+  refresh: RefreshCw,
+  shield: ShieldCheck,
+  'badge-check': BadgeCheck,
+  user: UserRound,
+  'scan-line': ScanLine,
+  'scan-face': ScanFace,
+  fingerprint: Fingerprint,
+  'credit-card': CreditCard,
+  globe: Globe,
+  car: Car,
+  vote: Vote,
+  'file-text': FileText,
+  landmark: Landmark,
+  'id-card': IdCard,
+  contact: Contact,
+  passport: BookUser,
+  camera: Camera,
+  'camera-off': CameraOff,
+  'video-off': VideoOff,
+  upload: Upload,
+  lightbulb: Lightbulb,
+};
+
+export interface IconProps {
+  name: IconName;
+  size?: number;
+  color: string;
+  strokeWidth?: number;
+  /** Render a solid/filled glyph (used for the theme toggle, matching Flutter's filled moon/sun). */
+  solid?: boolean;
+}
+
+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} />;
+}