@myazahq/kyc-sdk-react-native 2.0.0

package/src/components/KycFlow.tsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { ID_TYPES, requiresDocumentCapture } from '../config/idTypes';
+import { KYCError } from '../types/verification';
+import { safeReportError } from '../services/errors';
+import type { KYCStep, SupportedCountry } from '../types/config';
+import { useKyc, useKycConfig, useKycStore, useTheme } from './runtime';
+import { KycSheet } from './KycSheet';
+import { ToastProvider } from './toast';
+import { MyazaText } from './Typography';
+import { MyazaButton } from './MyazaButton';
+import { Icon } from './Icon';
+import { ConsentStep } from '../screens/ConsentStep';
+import { IdTypeStep } from '../screens/IdTypeStep';
+import { IdInputStep } from '../screens/IdInputStep';
+import { DocumentCaptureStep, documentCaptureMeta } from '../screens/DocumentCaptureStep';
+import { LivenessStep } from '../screens/LivenessStep';
+import { SubmittedStep } from '../screens/SubmittedStep';
+
+// The step router — 1:1 with the Flutter SDK's _KycFlowWidget. Computes per-step
+// header title/description, the 4-step indicator info, back/country, fetches the
+// server config on mount, and gates the flow on fatal auth failures.
+
+function labelFor(country: SupportedCountry, idType: string | null): string {
+  if (!idType) return 'Document';
+  return Object.values(ID_TYPES).flat().find((t) => t.key === idType)?.label ?? 'Document';
+}
+
+/**
+ * Result of a back request handled inside the flow:
+ *   'navigated' — went back a step; the caller should NOT close.
+ *   'blocked'   — nowhere to go back AND close is disabled; swallow it.
+ *   'close'     — at the first step with close allowed; the caller should close.
+ */
+export type BackResult = 'navigated' | 'blocked' | 'close';
+
+export function KycFlow({
+  onClose,
+  backRef,
+}: {
+  onClose: () => void;
+  /** Populated with the flow's back-aware handler so the Modal's onRequestClose
+   *  (Android hardware back) can navigate a step instead of dismissing. */
+  backRef?: React.MutableRefObject<(() => BackResult) | null>;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const config = useKycConfig();
+  const store = useKycStore();
+  const currentStep = useKyc((s) => s.currentStep);
+  const selectedIdType = useKyc((s) => s.selectedIdType);
+  const documentCapturePhase = useKyc((s) => s.documentCapturePhase);
+  const serverConfig = useKyc((s) => s.serverConfig);
+
+  const startedRef = useRef(false);
+  const reportedRef = useRef(false);
+
+  useEffect(() => {
+    if (!startedRef.current) {
+      startedRef.current = true;
+      config.onStart?.();
+      void store.getState().loadServerConfig();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const isFatal = serverConfig.status === 'error' && serverConfig.fatal;
+  useEffect(() => {
+    if (isFatal && !reportedRef.current) {
+      reportedRef.current = true;
+      const code = serverConfig.statusCode === 401 ? 'invalid_api_key' : 'feature_disabled';
+      safeReportError(config.onError, new KYCError(code, serverConfig.message ?? 'Unable to start verification.'));
+    }
+  }, [isFatal, serverConfig.statusCode, serverConfig.message, config.onError]);
+
+  // ── Per-step header meta ──────────────────────────────────────────────────
+  const meta = useMemo(() => {
+    const label = labelFor(config.country, selectedIdType);
+    switch (currentStep) {
+      case 'consent':
+        return { title: '', description: null as string | null };
+      case 'id-type':
+        return { title: 'Select ID Type', description: "Choose the type of identification document you'd like to use." };
+      case 'id-input':
+        return { title: 'Enter Your Details', description: `Provide your ${label} for verification.` };
+      case 'document-capture':
+        // Phase-aware title/description live in the header (synced from the
+        // capture screen via `documentCapturePhase`) — mirrors Flutter.
+        return documentCaptureMeta(documentCapturePhase, label);
+      case 'liveness':
+        return { title: 'Face Verification', description: 'Follow the on-screen instructions' };
+      case 'submitted':
+      default:
+        return { title: '', description: null };
+    }
+  }, [currentStep, config.country, selectedIdType, documentCapturePhase]);
+
+  // ── Step indicator info (consent, id-type, capture|input, liveness?) ───────
+  const stepInfo = useMemo(() => {
+    if (currentStep === 'submitted') return null;
+    const hasCapture =
+      config.enableDocumentCapture && (selectedIdType ? requiresDocumentCapture(selectedIdType) : true);
+    const hasLiveness = config.enableLiveness !== false && config.enableSelfie !== false;
+    const steps: KYCStep[] = ['consent', 'id-type', hasCapture ? 'document-capture' : 'id-input'];
+    if (hasLiveness) steps.push('liveness');
+    const idx = steps.indexOf(currentStep);
+    if (idx < 0) return null;
+    return { progress: (idx + 1) / steps.length, stepCount: steps.length };
+  }, [currentStep, config.enableDocumentCapture, config.enableLiveness, config.enableSelfie, selectedIdType]);
+
+  const country = currentStep === 'id-type' || currentStep === 'id-input' ? config.country : null;
+  const onBack = currentStep === 'consent' || currentStep === 'submitted' ? null : () => store.getState().previousStep();
+
+  // Android hardware back arrives via the <Modal>'s onRequestClose. Expose a
+  // back-aware handler through `backRef` so that handler navigates a step back
+  // when the flow can, instead of dismissing the whole SDK. It only reports
+  // 'close' from the first step (consent) with close allowed; with
+  // `disableClose` set it reports 'blocked' so back can never force the flow
+  // closed. (iOS has no hardware back; its swipe-down keeps the standard
+  // dismiss behaviour, handled by the Modal.)
+  const canGoBack = !isFatal && onBack != null;
+  const disableClose = config.disableClose === true;
+  useEffect(() => {
+    if (!backRef) return undefined;
+    backRef.current = (): BackResult => {
+      if (canGoBack) {
+        store.getState().previousStep();
+        return 'navigated';
+      }
+      return disableClose ? 'blocked' : 'close';
+    };
+    return () => {
+      backRef.current = null;
+    };
+  }, [backRef, canGoBack, disableClose, store]);
+
+  if (isFatal) {
+    return (
+      <KycSheet title="" onClose={onClose} hideBrand>
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+          <View
+            style={{
+              width: 80,
+              height: 80,
+              borderRadius: radius.full,
+              backgroundColor: `${colors.error}1A`,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Icon name="alert" size={40} color={colors.error} />
+          </View>
+          <View style={{ height: spacing.lg }} />
+          <MyazaText variant="heading2" style={{ textAlign: 'center' }}>
+            Unable to start verification
+          </MyazaText>
+          <View style={{ height: spacing.xs }} />
+          <MyazaText variant="bodyMedium" color={colors.textSecondary} style={{ textAlign: 'center' }}>
+            {serverConfig.message ?? 'Please check your API key and try again.'}
+          </MyazaText>
+          <View style={{ height: spacing.lg }} />
+          <View style={{ width: '100%' }}>
+            <MyazaButton label="Close" onPress={onClose} />
+          </View>
+        </View>
+      </KycSheet>
+    );
+  }
+
+  return (
+    <ToastProvider>
+      <KycSheet
+        title={meta.title}
+        description={meta.description}
+        progress={stepInfo?.progress ?? null}
+        stepCount={stepInfo?.stepCount ?? null}
+        country={country}
+        onBack={onBack}
+        onClose={onClose}
+      >
+        <StepView step={currentStep} onClose={onClose} />
+      </KycSheet>
+    </ToastProvider>
+  );
+}
+
+function StepView({ step, onClose }: { step: KYCStep; onClose: () => void }): React.ReactElement {
+  switch (step) {
+    case 'consent':
+      return <ConsentStep />;
+    case 'id-type':
+      return <IdTypeStep />;
+    case 'id-input':
+      return <IdInputStep />;
+    case 'document-capture':
+      return <DocumentCaptureStep />;
+    case 'liveness':
+      return <LivenessStep />;
+    case 'submitted':
+      return <SubmittedStep onClose={onClose} />;
+    default:
+      return <ConsentStep />;
+  }
+}

package/src/components/KycSheet.tsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react';
+import { Image, Platform, ScrollView, StatusBar, View } from 'react-native';
+import { StatusBarController } from './StatusBarController';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
+
+import { headerSurface, radius, spacing } from '../config/theme';
+import type { SupportedCountry } from '../types/config';
+import { useKycConfig, useTheme } from './runtime';
+import { useBranding } from './useBranding';
+import { MyazaText } from './Typography';
+import { StepHeader } from './StepHeader';
+import { StepIndicator } from './StepIndicator';
+import { GlassIconButton } from './GlassIconButton';
+import { GlassSurface } from './glass/GlassSurface';
+import { GlassGroup } from './glass/GlassGroup';
+
+// Full-screen sheet shell — 1:1 with the Flutter SDK's KycBottomSheet:
+//   • a tinted header block (Liquid Glass on iOS 26) with a bottom border:
+//       row 1 → brand bar (left) + theme toggle + close (glass icon buttons)
+//       row 2 → StepHeader (back + title + country flag, description)
+//       row 3 → segmented step indicator
+//   • scrollable step body below.
+
+export interface KycSheetProps {
+  children: React.ReactNode;
+  title: string;
+  description?: string | null;
+  /** 0–1 progress fraction; null hides the step indicator. */
+  progress?: number | null;
+  stepCount?: number | null;
+  country?: SupportedCountry | null;
+  onBack?: (() => void) | null;
+  onClose: () => void;
+  /** Hide the persistent brand bar (e.g. on a fatal config-error screen). */
+  hideBrand?: boolean;
+}
+
+export function KycSheet({
+  children,
+  title,
+  description,
+  progress,
+  stepCount,
+  country,
+  onBack,
+  onClose,
+  hideBrand,
+}: KycSheetProps): React.ReactElement {
+  const { colors, mode, toggle } = useTheme();
+  const config = useKycConfig();
+  const { logoUri, companyName } = useBranding();
+
+  const tint = headerSurface(colors, mode);
+  const showIndicator = progress != null && stepCount != null;
+  const showBrand = !hideBrand && !!logoUri;
+
+
+
+  // On iOS the modal is a pageSheet by default (sits below the status bar), but
+  // `disableClose` presents it full-screen (to drop the swipe-to-dismiss), so it
+  // then extends under the notch + over the home indicator and needs its own
+  // safe-area insets — the pageSheet provides them for free.
+  const iosFullScreen = Platform.OS === 'ios' && config.disableClose === true;
+
+  // Static safe-area snapshot (captured at app launch — no SafeAreaProvider
+  // needed). On Android 15+/API 35+ the modal is drawn EDGE-TO-EDGE, and
+  // `StatusBar.currentHeight` is unreliable there, so the real top inset comes
+  // from here.
+  const sa = initialWindowMetrics?.insets;
+
+  // Keep the header controls clear of the status bar / notch.
+  //   • Android: full-screen edge-to-edge modal → clear the status bar using the
+  //     safe-area top inset (fall back to StatusBar.currentHeight, then 28dp).
+  //   • iOS pageSheet: already below the status bar → no inset.
+  //   • iOS full-screen (disableClose): 56 covers the status bar + notch.
+  const topInset =
+    Platform.OS === 'android'
+      ? sa?.top || StatusBar.currentHeight || 28
+      : iosFullScreen
+        ? 56
+        : 0;
+
+  // Clear the home indicator / nav bar at the bottom of a full-screen modal.
+  const bottomInset =
+    Platform.OS === 'android' ? sa?.bottom ?? 0 : iosFullScreen ? 34 : 0;
+
+  return (
+    <View style={{ flex: 1, backgroundColor: colors.background }}>
+      {/* The SDK theme drives the status-bar glyph colour so it stays readable on
+          the modal background — light glyphs in dark mode, dark in light mode.
+          Android: JS StatusBar/SystemBars can't reach the <Modal>'s Dialog window,
+          so a native view (StatusBarController) themes it from inside the modal.
+          iOS: only the full-screen modal (disableClose) slides under the bar — the
+          default pageSheet keeps the host bar above the card. */}
+      {Platform.OS === 'android' ? (
+        <StatusBarController barStyle={mode === 'dark' ? 'light' : 'dark'} />
+      ) : iosFullScreen ? (
+        <StatusBar barStyle={mode === 'dark' ? 'light-content' : 'dark-content'} animated />
+      ) : null}
+      <View style={{ flex: 1 }}>
+        {/* Header block (glass on iOS 26, tinted surface otherwise) */}
+        <GlassSurface
+          glassStyle="regular"
+          fallbackColor={tint}
+          style={{ borderBottomWidth: 1, borderBottomColor: colors.border, paddingBottom: spacing.md }}
+        >
+          {/* Row 1 — brand + controls */}
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingHorizontal: spacing.md,
+              paddingTop: topInset + spacing.sm,
+            }}
+          >
+            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+              {showBrand ? <BrandBar logoUri={logoUri!} companyName={companyName} /> : null}
+            </View>
+
+            {/* Header controls. When BOTH the theme toggle and close show, they
+                share a single Liquid Glass capsule (each button `plain`). When
+                only one shows — the consumer disabled the other (`disableClose`
+                or `showThemeToggle: false`) — that button stands on its own
+                glass instead of a one-icon capsule. Neither → nothing. */}
+            {(() => {
+              const showToggle = config.showThemeToggle !== false;
+              const showClose = !config.disableClose;
+              const toggleBtn = showToggle ? (
+                <GlassIconButton
+                  icon={mode === 'dark' ? 'sun' : 'moon'}
+                  onPress={toggle}
+                  solid
+                  plain={showClose}
+                  accessibilityLabel="Toggle theme"
+                />
+              ) : null;
+              const closeBtn = showClose ? (
+                <GlassIconButton
+                  icon="close"
+                  onPress={onClose}
+                  plain={showToggle}
+                  accessibilityLabel="Close"
+                />
+              ) : null;
+
+              if (showToggle && showClose) {
+                return (
+                  <GlassGroup style={{ gap: 2 }}>
+                    {toggleBtn}
+                    {closeBtn}
+                  </GlassGroup>
+                );
+              }
+              // Exactly one (or zero) — render it standalone with its own glass.
+              return toggleBtn ?? closeBtn;
+            })()}
+          </View>
+
+          {/* Row 2 — title + back + flag */}
+          {title || onBack ? (
+            <View style={{ paddingHorizontal: spacing.md, paddingTop: spacing.sm }}>
+              <StepHeader title={title} description={description} onBack={onBack} country={country} />
+            </View>
+          ) : null}
+
+          {/* Row 3 — step indicator */}
+          {showIndicator ? (
+            <View style={{ marginTop: spacing.md }}>
+              <StepIndicator progress={progress!} stepCount={stepCount!} />
+            </View>
+          ) : null}
+        </GlassSurface>
+
+        {/* Step body */}
+        <ScrollView
+          contentContainerStyle={{ padding: spacing.md, paddingTop: spacing.md, paddingBottom: spacing.xl + bottomInset, flexGrow: 1 }}
+          keyboardShouldPersistTaps="handled"
+        >
+          {children}
+        </ScrollView>
+      </View>
+    </View>
+  );
+}
+
+// Persistent header brand — circular logo avatar + company name. A broken/missing
+// logo image collapses the whole brand bar (mirrors the web SDK's `onError` and
+// Flutter's `errorBuilder`), so the header never shows a broken-image box.
+function BrandBar({ logoUri, companyName }: { logoUri: string; companyName: string }): React.ReactElement | null {
+  const { colors } = useTheme();
+  const [broken, setBroken] = useState(false);
+  if (broken) return null;
+  return (
+    <>
+      <View
+        style={{
+          width: 28,
+          height: 28,
+          borderRadius: radius.full,
+          backgroundColor: '#FFFFFF',
+          borderWidth: 1,
+          borderColor: 'rgba(0,0,0,0.05)',
+          overflow: 'hidden',
+          marginRight: spacing.sm,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {/* Fill + cover-crop the circle. The borderRadius is repeated on the
+            Image itself because iOS doesn't reliably clip an Image child to a
+            parent's rounded corners (mirrors Flutter's ClipOval + cover). */}
+        <Image
+          source={{ uri: logoUri }}
+          style={{ width: '100%', height: '100%', borderRadius: radius.full }}
+          resizeMode="cover"
+          onError={() => setBroken(true)}
+        />
+      </View>
+      <MyazaText variant="heading3" numberOfLines={1} color={colors.textDark} style={{ flexShrink: 1, fontSize: 14 }}>
+        {companyName}
+      </MyazaText>
+    </>
+  );
+}

package/src/components/MyazaAlert.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+
+// Info / success / warning / error banner. Mirrors the Flutter SDK's MyazaAlert.
+
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+
+export interface MyazaAlertProps {
+  variant: AlertVariant;
+  title?: string;
+  message: string;
+}
+
+export function MyazaAlert({ variant, title, message }: MyazaAlertProps): React.ReactElement {
+  const { colors } = useTheme();
+  const bg =
+    variant === 'success'
+      ? colors.successBg
+      : variant === 'warning'
+        ? colors.warningBg
+        : variant === 'error'
+          ? colors.errorBg
+          : colors.infoBg;
+  const accent =
+    variant === 'success'
+      ? colors.success
+      : variant === 'warning'
+        ? colors.warning
+        : variant === 'error'
+          ? colors.error
+          : colors.info;
+
+  return (
+    <View
+      style={{
+        backgroundColor: bg,
+        borderRadius: radius.sm,
+        padding: spacing.md,
+        borderLeftWidth: 3,
+        borderLeftColor: accent,
+      }}
+    >
+      {title ? (
+        <MyazaText variant="label" color={accent} style={{ marginBottom: 2 }}>
+          {title}
+        </MyazaText>
+      ) : null}
+      <MyazaText variant="bodyMedium" color={colors.textDark}>
+        {message}
+      </MyazaText>
+    </View>
+  );
+}

package/src/components/MyazaButton.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { ActivityIndicator, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { radius, sizing, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { Icon, type IconName } from './Icon';
+
+// Branded button — 1:1 with the Flutter SDK's MyazaButton:
+//   • primary     — solid primary fill, onPrimary label
+//   • outline     — transparent, 1.5px primary border, primary label
+//   • ghost       — transparent, primary label
+//   • destructive — error fill, white label
+// Radius is `sm` (12px), height 48. No Liquid Glass on buttons (glass is reserved
+// for the modal chrome / icon buttons, per the design).
+
+export type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'destructive';
+
+export interface MyazaButtonProps {
+  label: string;
+  onPress?: () => void;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+  loading?: boolean;
+  leadingIcon?: IconName;
+  style?: StyleProp<ViewStyle>;
+  fullWidth?: boolean;
+}
+
+export function MyazaButton({
+  label,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  leadingIcon,
+  style,
+  fullWidth = true,
+}: MyazaButtonProps): React.ReactElement {
+  const { colors } = useTheme();
+  const isDisabled = disabled || loading || !onPress;
+
+  const fg =
+    variant === 'primary'
+      ? colors.onPrimary
+      : variant === 'destructive'
+        ? '#FFFFFF'
+        : colors.primary;
+  const effectiveFg = isDisabled ? `${fg}80` : fg; // 50% alpha when disabled
+
+  const bg =
+    variant === 'primary'
+      ? colors.primary
+      : variant === 'destructive'
+        ? colors.error
+        : 'transparent';
+
+  return (
+    <Pressable
+      onPress={isDisabled ? undefined : onPress}
+      disabled={isDisabled}
+      style={({ pressed }) => [
+        {
+          height: sizing.buttonHeight,
+          borderRadius: radius.sm,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingHorizontal: spacing.md,
+          width: fullWidth ? '100%' : undefined,
+          backgroundColor: isDisabled
+            ? variant === 'primary'
+              ? `${colors.primary}80`
+              : variant === 'destructive'
+                ? `${colors.error}80`
+                : 'transparent'
+            : bg,
+          borderWidth: variant === 'outline' ? 1.5 : 0,
+          borderColor: variant === 'outline' ? (isDisabled ? `${colors.primary}66` : colors.primary) : undefined,
+          opacity: pressed ? 0.9 : 1,
+        },
+        style,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator color={effectiveFg} size="small" />
+      ) : (
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {leadingIcon ? (
+            <View style={{ marginRight: 8 }}>
+              <Icon name={leadingIcon} size={18} color={effectiveFg} />
+            </View>
+          ) : null}
+          <MyazaText variant="button" color={effectiveFg}>
+            {label}
+          </MyazaText>
+        </View>
+      )}
+    </Pressable>
+  );
+}

package/src/components/MyazaCard.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { GlassSurface, supportsLiquidGlass } from './glass/GlassSurface';
+
+// Branded card. Tappable + selectable (selection draws a brand border + tint).
+// On iOS 26 the surface is Liquid Glass; otherwise a token-filled panel.
+
+export interface MyazaCardProps {
+  children: React.ReactNode;
+  onPress?: () => void;
+  selected?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function MyazaCard({ children, onPress, selected = false, style }: MyazaCardProps): React.ReactElement {
+  const { colors } = useTheme();
+
+  const container: ViewStyle = {
+    borderRadius: radius.md,
+    padding: spacing.md,
+    borderWidth: 1,
+    borderColor: selected ? colors.primary : colors.border,
+    overflow: 'hidden',
+  };
+
+  const selectedTint: ViewStyle = selected ? { backgroundColor: colors.primary100 } : {};
+
+  const inner = supportsLiquidGlass() ? (
+    <GlassSurface glassStyle="regular" style={[container, selectedTint]} tintColor={selected ? colors.primary : undefined}>
+      {children}
+    </GlassSurface>
+  ) : (
+    <View style={[container, { backgroundColor: selected ? colors.primary100 : colors.backgroundSecondary }]}>
+      {children}
+    </View>
+  );
+
+  if (!onPress) return <View style={style}>{inner}</View>;
+
+  return (
+    <Pressable onPress={onPress} style={style}>
+      {inner}
+    </Pressable>
+  );
+}