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

package/android/build.gradle

@@ -109,8 +109,40 @@ dependencies {
   // CameraX core — for the ImageProxy / ExperimentalGetImage APIs.
   compileOnly 'androidx.camera:camera-core:1.3.4'
 
-  // Google ML Kit face detection — Android only. Same version as the Flutter SDK.
-  implementation 'com.google.mlkit:face-detection:16.1.6'
-  // On-device text recognition, for reading the MRZ off a passport or ID card.
+  // ── ML Kit: models fetched on demand by default ──────────────────────────
+  //
+  // Two variants of the same API exist. The `com.google.mlkit:*` artifacts embed
+  // the models in the APK; the `com.google.android.gms:play-services-mlkit-*`
+  // ones fetch them through Google Play Services on first use.
+  //
+  // Measured on a real integrator's release APK, the bundled pair cost
+  // **18.5 MB per device** (arm64: ocr_pipeline 10.55 MB + face_detector 7.95 MB)
+  // plus the .tflite files in assets/, which ship to EVERY device because assets
+  // are not split by ABI. Unbundled, that is ~0.4 MB of shims.
+  //
+  // The trade-off is real and is why the flag exists: the unbundled variants need
+  // Google Play Services, so they do not work on Huawei or AOSP builds without
+  // GMS. An org shipping to those devices sets `myazaKycBundledMlKit = true` in
+  // its root build.gradle ext and gets today's fully-offline behaviour back.
+  //
+  // Availability is NOT inferred per frame — `isModelReady()` is checked once
+  // before the camera opens (see HybridMyazaFaceDetector.kt), because a missing
+  // model would otherwise be indistinguishable from "no face in frame".
+  if (safeExtGet('myazaKycBundledMlKit', false).toString().toBoolean()) {
+    implementation 'com.google.mlkit:face-detection:16.1.6'
+  } else {
+    implementation 'com.google.android.gms:play-services-mlkit-face-detection:17.1.0'
+  }
+
+  // Text recognition is STILL BUNDLED, deliberately, and it is the larger of the
+  // two (10.55 MB vs 7.95 MB on arm64) — so this is the bigger half of the win,
+  // deferred rather than abandoned.
+  //
+  // Unbundling it needs the same isModelReady()/prepareModel() contract the face
+  // detector just gained. Without that, a missing OCR model is indistinguishable
+  // from "no text in frame": document auto-capture would simply never fire and
+  // MRZ scanning would never produce a key for the chip read, with nothing shown
+  // to the user. Shipping the dependency swap ahead of the availability handling
+  // would trade 10 MB for a silent failure on every fresh install.
   implementation 'com.google.mlkit:text-recognition:16.0.1'
 }

package/android/src/main/java/com/margelo/nitro/myazakyc/HybridMyazaFaceDetector.kt

@@ -9,6 +9,10 @@ import com.google.mlkit.vision.face.Face
 import com.google.mlkit.vision.face.FaceDetection
 import com.google.mlkit.vision.face.FaceDetector
 import com.google.mlkit.vision.face.FaceDetectorOptions
+import com.google.android.gms.common.moduleinstall.ModuleInstall
+import com.google.android.gms.common.moduleinstall.ModuleInstallRequest
+import com.margelo.nitro.NitroModules
+import com.margelo.nitro.core.Promise
 import java.util.concurrent.CountDownLatch
 import java.util.concurrent.TimeUnit
 
@@ -39,6 +43,67 @@ class HybridMyazaFaceDetector : HybridMyazaFaceDetectorSpec() {
       .build(),
   )
 
+  // ── Model availability ───────────────────────────────────────────────────
+  //
+  // The default build fetches ML Kit's models through Play Services instead of
+  // bundling them (android/build.gradle), which is what keeps ~18.5 MB per
+  // device out of the APK. The cost is a window where detection cannot run:
+  // first launch before the download completes, or a device with no GMS at all.
+  //
+  // `detectFace` CANNOT report that. Its only channel is FaceResult, where a
+  // missing model and an empty frame are both `faceCount: 0` — so a user on a
+  // fresh install would watch "position your face" forever with nothing to
+  // explain it. Hence a separate, explicit contract, checked before the camera
+  // opens rather than inferred per frame.
+  //
+  // Cached rather than queried live: `areModulesAvailable` is asynchronous and
+  // `isModelReady` is a synchronous Nitro call, so blocking the worklet thread
+  // to answer it would be worse than the problem. The flag starts false and is
+  // set by prepareModel(), which the SDK primes at flow start.
+  @Volatile private var modelReady = false
+
+  override fun isModelReady(): Boolean = modelReady
+
+  override fun prepareModel(): Promise<Boolean> = Promise.async {
+    if (modelReady) return@async true
+
+    val ctx = NitroModules.applicationContext
+      ?: return@async false // No context — cannot ask Play Services anything.
+
+    val latch = CountDownLatch(1)
+    var ok = false
+    try {
+      val client = ModuleInstall.getClient(ctx)
+      // areModulesAvailable() answers "is it already here"; deferredInstall()
+      // asks Play Services to fetch it in the background if not. Requesting the
+      // install unconditionally is simpler AND correct — it is a no-op when the
+      // module is already present, and starting it early is the entire point.
+      client.areModulesAvailable(detector)
+        .addOnSuccessListener { response ->
+          ok = response.areModulesAvailable()
+          if (!ok) {
+            client.deferredInstall(
+              ModuleInstallRequest.newBuilder().addApi(detector).build(),
+            )
+          }
+          latch.countDown()
+        }
+        .addOnFailureListener {
+          // Thrown on devices without Google Play Services at all (Huawei, bare
+          // AOSP). Not an error to retry — it will never succeed on this device.
+          // Such orgs should build with `myazaKycBundledMlKit = true`.
+          ok = false
+          latch.countDown()
+        }
+      latch.await(MODEL_CHECK_TIMEOUT_MS, TimeUnit.MILLISECONDS)
+    } catch (_: Throwable) {
+      ok = false
+    }
+
+    modelReady = ok
+    ok
+  }
+
   @ExperimentalGetImage
   override fun detectFace(frame: HybridFrameSpec): FaceResult {
     // Same access pattern as iOS (cast to the public NativeFrame): VisionCamera's
@@ -218,4 +283,14 @@ class HybridMyazaFaceDetector : HybridMyazaFaceDetectorSpec() {
     faceG = -1.0,
     faceB = -1.0,
   )
+
+  private companion object {
+    /**
+     * Bound on the availability query. It is a local Play Services call, not the
+     * model download — the download runs in the background afterwards. Generous
+     * enough for a cold Play Services process, short enough that a wedged one
+     * cannot stall flow start.
+     */
+    const val MODEL_CHECK_TIMEOUT_MS = 3_000L
+  }
 }

package/ios/HybridMyazaFaceDetector.swift

@@ -28,6 +28,14 @@ import NitroModules
 // ---------------------------------------------------------------------------
 
 final class HybridMyazaFaceDetector: HybridMyazaFaceDetectorSpec {
+  // Apple Vision ships with the OS — there is no model to fetch, no Play
+  // Services equivalent, and no window in which detection is unavailable. These
+  // exist only because Android fetches ML Kit's models on demand; iOS answers
+  // "ready" unconditionally so the shared TS flow needs no platform branch.
+  func isModelReady() throws -> Bool { true }
+
+  func prepareModel() throws -> Promise<Bool> { Promise.resolved(withResult: true) }
+
   func detectFace(frame: any HybridFrameSpec) throws -> FaceResult {
     guard
       let nativeFrame = frame as? NativeFrame,

package/nitrogen/generated/android/c++/JHybridMyazaFaceDetectorSpec.cpp

@@ -14,6 +14,8 @@ namespace margelo::nitro::camera { class HybridFrameSpec; }
 
 #include "FaceResult.hpp"
 #include "JFaceResult.hpp"
+#include <NitroModules/Promise.hpp>
+#include <NitroModules/JPromise.hpp>
 #include <memory>
 #include <VisionCamera/HybridFrameSpec.hpp>
 #include <VisionCamera/JHybridFrameSpec.hpp>
@@ -56,5 +58,26 @@ namespace margelo::nitro::myazakyc {
     auto __result = method(_javaPart, std::dynamic_pointer_cast<margelo::nitro::camera::JHybridFrameSpec>(frame)->getJavaPart());
     return __result->toCpp();
   }
+  bool JHybridMyazaFaceDetectorSpec::isModelReady() {
+    static const auto method = _javaPart->javaClassStatic()->getMethod<jboolean()>("isModelReady");
+    auto __result = method(_javaPart);
+    return static_cast<bool>(__result);
+  }
+  std::shared_ptr<Promise<bool>> JHybridMyazaFaceDetectorSpec::prepareModel() {
+    static const auto method = _javaPart->javaClassStatic()->getMethod<jni::local_ref<JPromise::javaobject>()>("prepareModel");
+    auto __result = method(_javaPart);
+    return [&]() {
+      auto __promise = Promise<bool>::create();
+      __result->cthis()->addOnResolvedListener([=](const jni::alias_ref<jni::JObject>& __boxedResult) {
+        auto __result = jni::static_ref_cast<jni::JBoolean>(__boxedResult);
+        __promise->resolve(static_cast<bool>(__result->value()));
+      });
+      __result->cthis()->addOnRejectedListener([=](const jni::alias_ref<jni::JThrowable>& __throwable) {
+        jni::JniException __jniError(__throwable);
+        __promise->reject(std::make_exception_ptr(__jniError));
+      });
+      return __promise;
+    }();
+  }
 
 } // namespace margelo::nitro::myazakyc

package/nitrogen/generated/android/c++/JHybridMyazaFaceDetectorSpec.hpp

@@ -55,6 +55,8 @@ namespace margelo::nitro::myazakyc {
   public:
     // Methods
     FaceResult detectFace(const std::shared_ptr<margelo::nitro::camera::HybridFrameSpec>& frame) override;
+    bool isModelReady() override;
+    std::shared_ptr<Promise<bool>> prepareModel() override;
 
   private:
     jni::global_ref<JHybridMyazaFaceDetectorSpec::JavaPart> _javaPart;

package/nitrogen/generated/android/kotlin/com/margelo/nitro/myazakyc/HybridMyazaFaceDetectorSpec.kt

@@ -11,6 +11,7 @@ import androidx.annotation.Keep
 import com.facebook.jni.HybridData
 import com.facebook.proguard.annotations.DoNotStrip
 import com.margelo.nitro.camera.HybridFrameSpec
+import com.margelo.nitro.core.Promise
 import com.margelo.nitro.core.HybridObject
 
 /**
@@ -32,6 +33,14 @@ abstract class HybridMyazaFaceDetectorSpec: HybridObject() {
   @DoNotStrip
   @Keep
   abstract fun detectFace(frame: com.margelo.nitro.camera.HybridFrameSpec): FaceResult
+  
+  @DoNotStrip
+  @Keep
+  abstract fun isModelReady(): Boolean
+  
+  @DoNotStrip
+  @Keep
+  abstract fun prepareModel(): Promise<Boolean>
 
   // Default implementation of `HybridObject.toString()`
   override fun toString(): String {

package/nitrogen/generated/ios/KycSdkReactNative-Swift-Cxx-Bridge.cpp

@@ -84,6 +84,14 @@ namespace margelo::nitro::myazakyc::bridge::swift {
     return margelo::nitro::camera::bridge::swift::get_std__shared_ptr_HybridFrameSpec_(cppType);
   }
   
+  // pragma MARK: std::function<void(bool /* result */)>
+  Func_void_bool create_Func_void_bool(void* NON_NULL swiftClosureWrapper) noexcept {
+    auto swiftClosure = KycSdkReactNative::Func_void_bool::fromUnsafe(swiftClosureWrapper);
+    return [swiftClosure = std::move(swiftClosure)](bool result) mutable -> void {
+      swiftClosure.call(result);
+    };
+  }
+  
   // pragma MARK: std::shared_ptr<HybridMyazaFaceDetectorSpec>
   std::shared_ptr<HybridMyazaFaceDetectorSpec> create_std__shared_ptr_HybridMyazaFaceDetectorSpec_(void* NON_NULL swiftUnsafePointer) noexcept {
     KycSdkReactNative::HybridMyazaFaceDetectorSpec_cxx swiftPart = KycSdkReactNative::HybridMyazaFaceDetectorSpec_cxx::fromUnsafe(swiftUnsafePointer);

package/nitrogen/generated/ios/KycSdkReactNative-Swift-Cxx-Bridge.hpp

@@ -303,6 +303,40 @@ namespace margelo::nitro::myazakyc::bridge::swift {
   using std__weak_ptr_margelo__nitro__camera__HybridFrameSpec_ = std::weak_ptr<margelo::nitro::camera::HybridFrameSpec>;
   inline std__weak_ptr_margelo__nitro__camera__HybridFrameSpec_ weakify_std__shared_ptr_margelo__nitro__camera__HybridFrameSpec_(const std::shared_ptr<margelo::nitro::camera::HybridFrameSpec>& strong) noexcept { return strong; }
   
+  // pragma MARK: std::shared_ptr<Promise<bool>>
+  /**
+   * Specialized version of `std::shared_ptr<Promise<bool>>`.
+   */
+  using std__shared_ptr_Promise_bool__ = std::shared_ptr<Promise<bool>>;
+  inline std::shared_ptr<Promise<bool>> create_std__shared_ptr_Promise_bool__() noexcept {
+    return Promise<bool>::create();
+  }
+  inline PromiseHolder<bool> wrap_std__shared_ptr_Promise_bool__(std::shared_ptr<Promise<bool>> promise) noexcept {
+    return PromiseHolder<bool>(std::move(promise));
+  }
+  
+  // pragma MARK: std::function<void(bool /* result */)>
+  /**
+   * Specialized version of `std::function<void(bool)>`.
+   */
+  using Func_void_bool = std::function<void(bool /* result */)>;
+  /**
+   * Wrapper class for a `std::function<void(bool / * result * /)>`, this can be used from Swift.
+   */
+  class Func_void_bool_Wrapper final {
+  public:
+    explicit Func_void_bool_Wrapper(std::function<void(bool /* result */)>&& func): _function(std::make_unique<std::function<void(bool /* result */)>>(std::move(func))) {}
+    inline void call(bool result) const noexcept {
+      _function->operator()(result);
+    }
+  private:
+    std::unique_ptr<std::function<void(bool /* result */)>> _function;
+  } SWIFT_NONCOPYABLE;
+  Func_void_bool create_Func_void_bool(void* NON_NULL swiftClosureWrapper) noexcept;
+  inline Func_void_bool_Wrapper wrap_Func_void_bool(Func_void_bool value) noexcept {
+    return Func_void_bool_Wrapper(std::move(value));
+  }
+  
   // pragma MARK: std::shared_ptr<HybridMyazaFaceDetectorSpec>
   /**
    * Specialized version of `std::shared_ptr<HybridMyazaFaceDetectorSpec>`.
@@ -324,6 +358,15 @@ namespace margelo::nitro::myazakyc::bridge::swift {
     return Result<FaceResult>::withError(error);
   }
   
+  // pragma MARK: Result<std::shared_ptr<Promise<bool>>>
+  using Result_std__shared_ptr_Promise_bool___ = Result<std::shared_ptr<Promise<bool>>>;
+  inline Result_std__shared_ptr_Promise_bool___ create_Result_std__shared_ptr_Promise_bool___(const std::shared_ptr<Promise<bool>>& value) noexcept {
+    return Result<std::shared_ptr<Promise<bool>>>::withValue(value);
+  }
+  inline Result_std__shared_ptr_Promise_bool___ create_Result_std__shared_ptr_Promise_bool___(const std::exception_ptr& error) noexcept {
+    return Result<std::shared_ptr<Promise<bool>>>::withError(error);
+  }
+  
   // pragma MARK: std::shared_ptr<HybridMyazaRectDetectorSpec>
   /**
    * Specialized version of `std::shared_ptr<HybridMyazaRectDetectorSpec>`.

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.5.0",
   "description": "Myaza KYC SDK for React Native (Expo) — ID verification, liveness detection, and document capture",
   "author": "Flitstack Technologies Inc.",
   "repository": {

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/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>
+  );
+}

package/src/components/DialCodePicker.tsx

@@ -106,12 +106,16 @@ export function DialCodePicker({
       bottomOffset={keyboard}
       closeLabel="Close country picker"
     >
-        <View style={{ paddingHorizontal: spacing.md, paddingBottom: spacing.sm }}>
+        {/* Clear air between the header row (handle + close) and the search
+            field — flush against the close button they read as one control. */}
+        <View style={{ paddingHorizontal: spacing.md, paddingTop: spacing.md, paddingBottom: spacing.sm }}>
+          {/* Deliberately NOT autofocused: springing the keyboard the instant
+              the sheet opens hides half the list before the person has even
+              seen it — search is one tap away for whoever wants it. */}
           <MyazaInput
             value={query}
             onChangeText={setQuery}
             placeholder={searchPlaceholder}
-            autoFocus
             prefix={<Icon name="search" size={18} color={colors.textSecondary} />}
           />
         </View>
@@ -159,19 +163,22 @@ function CountryRow({
         flexDirection: 'row',
         alignItems: 'center',
         paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
+        // Roomier rows: a country list is a long scan, and cramped rows make
+        // every tap a precision job. Matches the web dropdown's row height.
+        paddingVertical: 12,
         backgroundColor: isSelected ? colors.primary50 : 'transparent',
       }}
     >
-      <CountryFlag country={option.code} size={24} />
+      <CountryFlag country={option.code} size={28} />
       <View style={{ width: spacing.md }} />
       {/* No line clamp: "Bosnia & Herzegovina" and the like must read in full,
-          which is what Flutter's Expanded(Text) gives. */}
-      <MyazaText variant="bodyMedium" style={{ flex: 1 }}>
+          which is what Flutter's Expanded(Text) gives. Full body size (16),
+          the web dropdown's reading size — 14 read small against the flags. */}
+      <MyazaText variant="body" style={{ flex: 1 }}>
         {option.name}
       </MyazaText>
       {option.dialCode != null ? (
-        <MyazaText variant="label" color={colors.textSecondary}>
+        <MyazaText variant="bodyMedium" color={colors.textSecondary}>
           {option.dialCode}
         </MyazaText>
       ) : null}

package/src/components/Icon.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import {
+  Info,
   BadgeCheck,
   BookUser,
   Building2,
@@ -31,6 +32,7 @@ import {
   Moon,
   MoveLeft,
   Nfc,
+  Filter,
   Pencil,
   Smartphone,
   RefreshCw,
@@ -43,6 +45,7 @@ import {
   Sun,
   Timer,
   Upload,
+  Plus,
   UserRound,
   UserRoundPlus,
   Link2,
@@ -83,10 +86,13 @@ export type IconName =
   | 'building-2'
   | 'user'
   | 'user-plus'
+  | 'plus'
+  | 'info'
   | 'users'
   | 'scan-line'
   | 'scan-face'
   | 'nfc'
+  | 'filter'
   | 'pencil'
   | 'search'
   | 'zap'
@@ -144,7 +150,9 @@ const ICONS: Record<IconName, LucideIcon> = {
   'badge-check': BadgeCheck,
   'building-2': Building2,
   user: UserRound,
+  info: Info,
   'user-plus': UserRoundPlus,
+  plus: Plus,
   link: Link2,
   copy: Copy,
   share: Share2,
@@ -152,6 +160,7 @@ const ICONS: Record<IconName, LucideIcon> = {
   'scan-line': ScanLine,
   'scan-face': ScanFace,
   nfc: Nfc,
+  filter: Filter,
   pencil: Pencil,
   search: Search,
   zap: Zap,