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

package/nitrogen/generated/ios/c++/HybridMyazaFaceDetectorSpecSwift.hpp

@@ -20,6 +20,7 @@ namespace margelo::nitro::camera { class HybridFrameSpec; }
 #include "FaceResult.hpp"
 #include <memory>
 #include <VisionCamera/HybridFrameSpec.hpp>
+#include <NitroModules/Promise.hpp>
 
 #include "KycSdkReactNative-Swift-Cxx-Umbrella.hpp"
 
@@ -79,6 +80,22 @@ namespace margelo::nitro::myazakyc {
       auto __value = std::move(__result.value());
       return __value;
     }
+    inline bool isModelReady() override {
+      auto __result = _swiftPart.isModelReady();
+      if (__result.hasError()) [[unlikely]] {
+        std::rethrow_exception(__result.error());
+      }
+      auto __value = std::move(__result.value());
+      return __value;
+    }
+    inline std::shared_ptr<Promise<bool>> prepareModel() override {
+      auto __result = _swiftPart.prepareModel();
+      if (__result.hasError()) [[unlikely]] {
+        std::rethrow_exception(__result.error());
+      }
+      auto __value = std::move(__result.value());
+      return __value;
+    }
 
   private:
     KycSdkReactNative::HybridMyazaFaceDetectorSpec_cxx _swiftPart;

package/nitrogen/generated/ios/swift/Func_void_bool.swift

@@ -0,0 +1,46 @@
+///
+/// Func_void_bool.swift
+/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+/// https://github.com/mrousavy/nitro
+/// Copyright © Marc Rousavy @ Margelo
+///
+
+import NitroModules
+
+/**
+ * Wraps a Swift `(_ value: Bool) -> Void` as a class.
+ * This class can be used from C++, e.g. to wrap the Swift closure as a `std::function`.
+ */
+public final class Func_void_bool {
+  public typealias bridge = margelo.nitro.myazakyc.bridge.swift
+
+  private let closure: (_ value: Bool) -> Void
+
+  public init(_ closure: @escaping (_ value: Bool) -> Void) {
+    self.closure = closure
+  }
+
+  @inline(__always)
+  public func call(value: Bool) -> Void {
+    self.closure(value)
+  }
+
+  /**
+   * Casts this instance to a retained unsafe raw pointer.
+   * This acquires one additional strong reference on the object!
+   */
+  @inline(__always)
+  public func toUnsafe() -> UnsafeMutableRawPointer {
+    return Unmanaged.passRetained(self).toOpaque()
+  }
+
+  /**
+   * Casts an unsafe pointer to a `Func_void_bool`.
+   * The pointer has to be a retained opaque `Unmanaged<Func_void_bool>`.
+   * This removes one strong reference from the object!
+   */
+  @inline(__always)
+  public static func fromUnsafe(_ pointer: UnsafeMutableRawPointer) -> Func_void_bool {
+    return Unmanaged<Func_void_bool>.fromOpaque(pointer).takeRetainedValue()
+  }
+}

package/nitrogen/generated/ios/swift/HybridMyazaFaceDetectorSpec.swift

@@ -15,6 +15,8 @@ public protocol HybridMyazaFaceDetectorSpec_protocol: HybridObject {
 
   // Methods
   func detectFace(frame: (any HybridFrameSpec)) throws -> FaceResult
+  func isModelReady() throws -> Bool
+  func prepareModel() throws -> Promise<Bool>
 }
 
 public extension HybridMyazaFaceDetectorSpec_protocol {

package/nitrogen/generated/ios/swift/HybridMyazaFaceDetectorSpec_cxx.swift

@@ -140,4 +140,35 @@ open class HybridMyazaFaceDetectorSpec_cxx {
       return bridge.create_Result_FaceResult_(__exceptionPtr)
     }
   }
+  
+  @inline(__always)
+  public final func isModelReady() -> bridge.Result_bool_ {
+    do {
+      let __result = try self.__implementation.isModelReady()
+      let __resultCpp = __result
+      return bridge.create_Result_bool_(__resultCpp)
+    } catch (let __error) {
+      let __exceptionPtr = __error.toCpp()
+      return bridge.create_Result_bool_(__exceptionPtr)
+    }
+  }
+  
+  @inline(__always)
+  public final func prepareModel() -> bridge.Result_std__shared_ptr_Promise_bool___ {
+    do {
+      let __result = try self.__implementation.prepareModel()
+      let __resultCpp = { () -> bridge.std__shared_ptr_Promise_bool__ in
+        let __promise = bridge.create_std__shared_ptr_Promise_bool__()
+        let __promiseHolder = bridge.wrap_std__shared_ptr_Promise_bool__(__promise)
+        __result
+          .then({ __result in __promiseHolder.resolve(__result) })
+          .catch({ __error in __promiseHolder.reject(__error.toCpp()) })
+        return __promise
+      }()
+      return bridge.create_Result_std__shared_ptr_Promise_bool___(__resultCpp)
+    } catch (let __error) {
+      let __exceptionPtr = __error.toCpp()
+      return bridge.create_Result_std__shared_ptr_Promise_bool___(__exceptionPtr)
+    }
+  }
 }

package/nitrogen/generated/shared/c++/HybridMyazaFaceDetectorSpec.cpp

@@ -15,6 +15,8 @@ namespace margelo::nitro::myazakyc {
     // load custom methods/properties
     registerHybrids(this, [](Prototype& prototype) {
       prototype.registerHybridMethod("detectFace", &HybridMyazaFaceDetectorSpec::detectFace);
+      prototype.registerHybridMethod("isModelReady", &HybridMyazaFaceDetectorSpec::isModelReady);
+      prototype.registerHybridMethod("prepareModel", &HybridMyazaFaceDetectorSpec::prepareModel);
     });
   }
 

package/nitrogen/generated/shared/c++/HybridMyazaFaceDetectorSpec.hpp

@@ -21,6 +21,7 @@ namespace margelo::nitro::camera { class HybridFrameSpec; }
 #include "FaceResult.hpp"
 #include <memory>
 #include <VisionCamera/HybridFrameSpec.hpp>
+#include <NitroModules/Promise.hpp>
 
 namespace margelo::nitro::myazakyc {
 
@@ -54,6 +55,8 @@ namespace margelo::nitro::myazakyc {
     public:
       // Methods
       virtual FaceResult detectFace(const std::shared_ptr<margelo::nitro::camera::HybridFrameSpec>& frame) = 0;
+      virtual bool isModelReady() = 0;
+      virtual std::shared_ptr<Promise<bool>> prepareModel() = 0;
 
     protected:
       // Hybrid Setup

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myazahq/kyc-sdk-react-native",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "Myaza KYC SDK for React Native (Expo) — ID verification, liveness detection, and document capture",
   "author": "Flitstack Technologies Inc.",
   "repository": {
@@ -49,6 +49,8 @@
   "license": "MIT",
   "peerDependencies": {
     "expo": ">=56",
+    "expo-task-manager": ">=14",
+    "react-native-webview": ">=13",
     "react": ">=19",
     "react-native": ">=0.83",
     "react-native-nitro-image": ">=0.15",
@@ -58,6 +60,14 @@
     "react-native-vision-camera-worklets": ">=5",
     "react-native-worklets": ">=0.8"
   },
+  "peerDependenciesMeta": {
+    "expo-task-manager": {
+      "optional": true
+    },
+    "react-native-webview": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@expo-google-fonts/karla": "^0.4.2",
     "@expo-google-fonts/space-grotesk": "^0.4.1",
@@ -74,11 +84,13 @@
     "expo-image-manipulator": "~56.0.17",
     "expo-image-picker": "~56.0.16",
     "expo-localization": "~56.0.6",
+    "expo-location": "~56.0.24",
     "expo-speech": "~56.0.3",
     "lucide-react-native": "^1.17.0",
     "react-native-compressor": "^1.19.0",
     "react-native-vision-camera": "^5.0.11",
-    "zustand": "^5.0.2"
+    "zustand": "^5.0.2",
+    "expo-file-system": "~56.0.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",

package/src/MyazaBiometricAuth.tsx

@@ -0,0 +1,119 @@
+import React, { useCallback, useState } from 'react';
+import { Modal, Platform } from 'react-native';
+
+import { KycRuntimeProvider, MyazaThemeProvider } from './components/runtime';
+import { MyazaButton } from './components/MyazaButton';
+import { BiometricAuthFlow } from './screens/biometric/BiometricAuthFlow';
+import { primeFaceModel } from './liveness/visionCameraFaceDetector';
+import { defaultReauthLabel } from './lib/biometric-auth';
+import type { KYCAppearance, ResolvedKYCConfig, SupportedCountry } from './types/config';
+import type { KYCError } from './types/verification';
+import type { BiometricAuthResponse } from './services/api-types-biometric';
+
+// ---------------------------------------------------------------------------
+// MyazaBiometricAuth — returning-user face re-authentication ("prove it's
+// still you"). Mirrors the web SDK's MyazaBiometricAuth: a verified user
+// re-authenticates with a live selfie matched 1:1 against their enrollment
+// reference (no gov-DB call, no re-KYC). Self-contained: its own trigger +
+// modal, hosting the SDK's real liveness step inside a scoped runtime.
+// ---------------------------------------------------------------------------
+
+export interface MyazaBiometricAuthProps {
+  /** Publishable API key (`pk_…`). The environment is derived from its prefix. */
+  apiKey: string;
+  /** Dev-only base-URL override for `pk_dev_` keys. */
+  devUrl?: string;
+  /** The org's user reference (Entity.externalUserId) to re-authenticate. */
+  externalUserId: string;
+  /** Presence Intelligence method (default 'gestures'). */
+  livenessMode?: 'gestures' | 'flash' | 'both';
+  flashSequenceLength?: number;
+  appearance?: KYCAppearance;
+  disableClose?: boolean;
+  /** Open the modal on mount (no trigger button is rendered). */
+  defaultOpen?: boolean;
+  /** Custom trigger label (default "Verify it's you"). */
+  children?: string;
+  disabled?: boolean;
+  onOpen?: () => void;
+  /** The user re-authenticated. `token` is a single-use proof — verify it from
+   *  your backend with a secret key at `/biometric/verify-proof`. */
+  onAuthenticated?: (result: { attemptId: string; confidence: number | null; token?: string }) => void;
+  /** The check ran but the user did not pass (no match / liveness failed). */
+  onFailed?: (result: { status: BiometricAuthResponse['status']; attemptId: string; confidence: number | null }) => void;
+  /** A technical error (network, not enrolled, insufficient credits, …). */
+  onError?: (error: KYCError) => void;
+  onClose?: () => void;
+}
+
+const MODAL_PRESENTATION = Platform.OS === 'ios' ? 'pageSheet' : 'fullScreen';
+
+export function MyazaBiometricAuth(props: MyazaBiometricAuthProps): React.ReactElement {
+  const { children, disabled, defaultOpen, onOpen, onAuthenticated, onFailed, onError, onClose } = props;
+  const [open, setOpen] = useState(defaultOpen === true);
+
+  // The liveness step reads exactly the keys a KYC flow's config carries; the
+  // scope parks the step order on consent → liveness → submitted, and the
+  // flow only ever mounts the middle one. `country` is required by the
+  // resolved shape but nothing on this path reads it.
+  const config: ResolvedKYCConfig = {
+    apiKey: props.apiKey,
+    devUrl: props.devUrl,
+    country: 'NG' as SupportedCountry,
+    scope: 'biometric-authentication',
+    enableSelfie: true,
+    livenessMode: props.livenessMode ?? 'gestures',
+    flashSequenceLength: props.flashSequenceLength,
+    appearance: props.appearance,
+    disableClose: props.disableClose,
+    userId: props.externalUserId,
+    onError,
+  };
+
+  const openFlow = useCallback(() => {
+    void primeFaceModel();
+    setOpen(true);
+    onOpen?.();
+  }, [onOpen]);
+  const close = useCallback(() => {
+    setOpen(false);
+    onClose?.();
+  }, [onClose]);
+  const blockDismiss = props.disableClose === true;
+
+  return (
+    <MyazaThemeProvider appearance={props.appearance}>
+      {defaultOpen !== true && (
+        <MyazaButton
+          label={children ?? defaultReauthLabel(props.appearance?.companyName)}
+          disabled={disabled}
+          fullWidth={false}
+          onPress={openFlow}
+        />
+      )}
+      <Modal
+        visible={open}
+        animationType="slide"
+        presentationStyle={blockDismiss ? 'fullScreen' : MODAL_PRESENTATION}
+        statusBarTranslucent
+        navigationBarTranslucent
+        onRequestClose={blockDismiss ? () => undefined : close}
+        onDismiss={blockDismiss ? undefined : close}
+      >
+        {open ? (
+          // A fresh store per open: the runtime provider creates it once per
+          // mount, and the modal's children mount once per open.
+          <KycRuntimeProvider config={config}>
+            <BiometricAuthFlow
+              externalUserId={props.externalUserId}
+              onAuthenticated={(r) => onAuthenticated?.({ attemptId: r.attemptId, confidence: r.confidence, token: r.token })}
+              onFailed={(r) => onFailed?.({ status: r.status, attemptId: r.attemptId, confidence: r.confidence })}
+              onError={onError}
+              onClose={close}
+            />
+          </KycRuntimeProvider>
+        ) : null}
+      </Modal>
+    </MyazaThemeProvider>
+  );
+}

package/src/MyazaKYC.tsx

@@ -16,6 +16,7 @@ import { KycRuntimeProvider, MyazaThemeProvider } from './components/runtime';
 import { WorkflowGate } from './components/WorkflowGate';
 import { useWorkflowMount } from './components/useWorkflowMount';
 import { safeReportError } from './services/errors';
+import { primeFaceModel } from './liveness/visionCameraFaceDetector';
 import { KycFlow, type BackResult } from './components/KycFlow';
 import { MyazaButton } from './components/MyazaButton';
 
@@ -98,6 +99,17 @@ function MyazaKYCTrigger({
   const settled = state.status !== 'resolving';
   const open = wantOpen && settled;
 
+  // Start fetching the face model the moment the user opens the flow, so the
+  // download overlaps consent and ID-type selection rather than stalling in
+  // front of the camera. Mirrors the web SDK's primeFaceMesh() on mount; the
+  // liveness step still gates on isFaceModelReady(), so this is best-effort.
+  const primedRef = useRef(false);
+  useEffect(() => {
+    if (!wantOpen || primedRef.current) return;
+    primedRef.current = true;
+    primeFaceModel();
+  }, [wantOpen]);
+
   // Reported only once the user has actually tried to start. Prefetching must
   // not fire a consumer's error handler for a flow they never opened.
   const reportedRef = useRef(false);

package/src/components/CountryField.tsx

@@ -21,6 +21,8 @@ export function CountryField({
   value,
   options,
   onChange,
+  geoCountry,
+  grouped,
   placeholder = 'Select a country',
   searchPlaceholder = 'Search country',
 }: {
@@ -29,6 +31,10 @@ export function CountryField({
   /** The pickable countries — all ISO, or a workflow's registry subset. */
   options: DialCodeOption[];
   onChange: (code: string) => void;
+  /** The visitor's inferred country, pinned on top of the sheet as "Your location". */
+  geoCountry?: string | null;
+  /** Region headers between the rows, the country-select step's way. */
+  grouped?: boolean;
   placeholder?: string;
   searchPlaceholder?: string;
 }): React.ReactElement {
@@ -75,6 +81,8 @@ export function CountryField({
         visible={open}
         options={options}
         selected={value ?? ''}
+        pinned={geoCountry}
+        grouped={grouped}
         searchPlaceholder={searchPlaceholder}
         onPick={(code) => {
           setOpen(false);

package/src/components/CountryRegionPicker.tsx

@@ -0,0 +1,184 @@
+import React, { useMemo, useState } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { groupCountriesByRegion, pinGeoRow, regionCountryName } from '../config/regions';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { MyazaInput } from './MyazaInput';
+import { CountryFlag } from './CountryFlag';
+import { Icon } from './Icon';
+import { GeoBadge } from './GeoBadge';
+
+// ---------------------------------------------------------------------------
+// Searchable, region-grouped country picker for the country-select step. Used
+// when a workflow offers many countries (Global Documents): a flat 200-country
+// list is a scroll, not a chooser, so this adds a pinned search box and
+// continent headers over a bounded scroll area. Mirrors the web SDK's
+// CountryRegionPicker and Flutter's country_region_picker.dart.
+//
+// Split from CountrySelectStep (200-line rule); the step keeps the flat list
+// and the threshold that decides between the two.
+// ---------------------------------------------------------------------------
+
+export function CountryRegionPicker({
+  countries,
+  selected,
+  geoCountry,
+  onPick,
+}: {
+  countries: string[];
+  selected: string | null;
+  /**
+   * The visitor's IP country. Lifted out of its continent to the very top and
+   * tagged, so the one country most likely to be theirs is the first thing
+   * they see rather than something to scroll for.
+   */
+  geoCountry?: string | null;
+  onPick: (country: string) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [query, setQuery] = useState('');
+
+  const { pinned, groups } = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    const visible = needle
+      ? countries.filter(
+          (code) =>
+            code.toLowerCase().includes(needle) ||
+            regionCountryName(code).toLowerCase().includes(needle),
+        )
+      : countries;
+    const split = pinGeoRow(visible, geoCountry, (code) => code);
+    return { pinned: split.pinned, groups: groupCountriesByRegion(split.rest) };
+  }, [countries, query, geoCountry]);
+
+  const empty = groups.length === 0 && pinned === null;
+
+  return (
+    // The search box stays put and the list owns its own scroll, so a
+    // ~240-country flow does not scroll the search field off the top. That
+    // relies on the SHEET rendering this step with `fillsViewport` — inside a
+    // scroll view the nested list below would take an unbounded height, outgrow
+    // the viewport, and drag the search box off the top with it.
+    <View style={{ flex: 1 }}>
+      <MyazaInput
+        value={query}
+        onChangeText={setQuery}
+        placeholder="Search countries…"
+        autoCapitalize="none"
+        prefix={<Icon name="search" size={18} color={colors.textSecondary} />}
+      />
+      <View style={{ height: spacing.md }} />
+
+      {empty ? (
+        <MyazaText variant="bodyMedium" style={{ textAlign: 'center', marginTop: spacing.lg }}>
+          No countries match your search.
+        </MyazaText>
+      ) : (
+        // `nestedScrollEnabled` stays: Android refuses to scroll a nested
+        // same-direction list without it, and this is still nested on the
+        // flat-list path and inside any future scrolling parent.
+        <ScrollView
+          nestedScrollEnabled
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          {pinned ? (
+            <CountryRow
+              code={pinned}
+              name={regionCountryName(pinned)}
+              selected={pinned === selected}
+              badge="Your location"
+              onPress={() => onPick(pinned)}
+            />
+          ) : null}
+          {groups.map((group) => (
+            <View key={group.region}>
+              {/* Uppercase, tracked-out section label — Flutter's region
+                  header. Lowercase text at the default weight read as another
+                  list row rather than a divider. */}
+              <MyazaText
+                variant="bodySmall"
+                color={colors.textSecondary}
+                style={{
+                  fontWeight: '700',
+                  letterSpacing: 0.6,
+                  paddingHorizontal: spacing.xs,
+                  paddingVertical: spacing.sm,
+                }}
+              >
+                {group.region.toUpperCase()}
+              </MyazaText>
+              {group.countries.map((entry) => (
+                <CountryRow
+                  key={entry.code}
+                  code={entry.code}
+                  name={entry.name}
+                  selected={entry.code === selected}
+                  onPress={() => onPick(entry.code)}
+                />
+              ))}
+            </View>
+          ))}
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+/**
+ * One selectable country row, shared by the flat list and the region picker
+ * so the two cannot drift apart. `badge` tags the pinned geo row; it is the
+ * same control in a second position, differing only by the tag.
+ */
+export function CountryRow({
+  code,
+  name,
+  selected,
+  badge,
+  onPress,
+}: {
+  code: string;
+  name: string;
+  selected: boolean;
+  badge?: string;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected }}
+      accessibilityLabel={badge ? `${name}, ${badge.toLowerCase()}` : name}
+      // Matches the Flutter SDK's CountryOptionTile exactly — the two had
+      // drifted (24px flag / 12px padding here vs 32 / 16 there), which is why
+      // the same screen looked like a different component on each platform. The
+      // spacing and radius scales are identical across the SDKs, so there is
+      // nothing platform-specific to reconcile: `md` means 16 on both.
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: spacing.md,
+        borderRadius: radius.md,
+        borderWidth: selected ? 1.5 : 1,
+        borderColor: selected ? colors.primary : colors.border,
+        backgroundColor: selected ? colors.primary50 : colors.background,
+        marginBottom: spacing.sm,
+      }}
+    >
+      <CountryFlag country={code} size={32} />
+      <View style={{ width: 12 }} />
+      <MyazaText variant="label" style={{ flex: 1, fontWeight: '500' }}>
+        {name}
+      </MyazaText>
+      {badge ? <GeoBadge label={badge} /> : null}
+      <Icon
+        name="chevron-right"
+        size={18}
+        color={selected ? colors.primary : colors.textSecondary}
+      />
+    </Pressable>
+  );
+}

package/src/components/DashedBorder.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import Svg, { Rect } from 'react-native-svg';
+
+// ─── A dashed card border the platform cannot restyle ─────────────────────────
+//
+// Native `borderStyle: 'dashed'` is drawn by the OS, and iOS draws it with
+// long dashes and wide gaps that nothing can tune — beside the web SDK's
+// tight CSS pattern the same card looked hand-drawn. This draws the same
+// rectangle with SVG, where the dash pattern is ours to set; the defaults
+// match the web look (and the Flutter SDK's DashedRoundedBorder). Overlay it
+// inside a relatively-positioned card and drop the native border props.
+
+export function DashedBorder({
+  color,
+  radius,
+  strokeWidth = 2,
+  dash = 4,
+  gap = 3,
+}: {
+  color: string;
+  radius: number;
+  strokeWidth?: number;
+  dash?: number;
+  gap?: number;
+}): React.ReactElement {
+  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
+  return (
+    <View
+      pointerEvents="none"
+      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+      onLayout={(e) =>
+        setSize({ w: e.nativeEvent.layout.width, h: e.nativeEvent.layout.height })
+      }
+    >
+      {size && size.w > strokeWidth && size.h > strokeWidth ? (
+        <Svg width={size.w} height={size.h}>
+          {/* Inset by half the stroke so the line sits fully inside the card,
+              where a native border would have been. */}
+          <Rect
+            x={strokeWidth / 2}
+            y={strokeWidth / 2}
+            width={size.w - strokeWidth}
+            height={size.h - strokeWidth}
+            rx={radius}
+            fill="none"
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeDasharray={[dash, gap]}
+          />
+        </Svg>
+      ) : null}
+    </View>
+  );
+}