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

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

@@ -2,19 +2,19 @@ import React, { useEffect, useMemo, useState } from 'react';
 import {
   FlatList,
   Keyboard,
-  Modal,
   Platform,
   Pressable,
   useWindowDimensions,
   View,
 } from 'react-native';
 
-import { radius, spacing } from '../config/theme';
+import { spacing } from '../config/theme';
 import { useTheme } from './runtime';
 import { MyazaText } from './Typography';
 import { MyazaInput } from './MyazaInput';
 import { Icon } from './Icon';
 import { CountryFlag } from './CountryFlag';
+import { FloatingSheet } from './glass/FloatingSheet';
 
 // ---------------------------------------------------------------------------
 // THE country sheet — the phone field's dial-code picker, generalised.
@@ -98,25 +98,24 @@ export function DialCodePicker({
   };
 
   return (
-    <Modal visible={visible} animationType="slide" transparent onRequestClose={close}>
-      <Pressable style={{ flex: 1, backgroundColor: '#00000066' }} onPress={close} />
-      <View
-        style={{
-          maxHeight,
-          marginBottom: keyboard,
-          backgroundColor: colors.background,
-          borderTopLeftRadius: radius.lg,
-          borderTopRightRadius: radius.lg,
-          paddingTop: spacing.md,
-          paddingBottom: spacing.sm,
-        }}
-      >
-        <View style={{ paddingHorizontal: spacing.md, paddingBottom: spacing.sm }}>
+    <FloatingSheet
+      visible={visible}
+      onClose={close}
+      maxHeight={maxHeight}
+      // Ride above a raised keyboard — this sheet's whole job is a search box.
+      bottomOffset={keyboard}
+      closeLabel="Close country picker"
+    >
+        {/* 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>
@@ -141,8 +140,7 @@ export function DialCodePicker({
             />
           )}
         />
-      </View>
-    </Modal>
+    </FloatingSheet>
   );
 }
 
@@ -165,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/DocumentReviewSide.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
-import { Image, Pressable, View } from 'react-native';
+import { Image, Pressable, View, type ViewStyle } from 'react-native';
 
 import { useTheme } from './runtime';
 import { Icon } from './Icon';
 import { MyazaText } from './Typography';
 import { radius, spacing } from '../config/theme';
+import { CHROME_SCRIM, ChromeGlass } from './glass/ChromeGlass';
+
+/** The chip's flat backing, and still the fallback off iOS 26. */
+const CHIP_SCRIM = CHROME_SCRIM;
 
 // ─── One captured side, and its enlarged view ─────────────────────────────────
 //
@@ -67,7 +71,7 @@ export function DocumentReviewThumb({
         {/* Enlarging is a tap on the image, which nothing announces — so the
             image says so itself. */}
         <View style={{ position: 'absolute', right: spacing.md, bottom: spacing.md }} pointerEvents="none">
-          <Chip icon>
+          <Chip icon glass>
             <Icon name="maximize" size={18} color="#FFFFFF" />
           </Chip>
         </View>
@@ -116,20 +120,36 @@ export function Chip({
   children,
   /** Icon chips are square and need room around the glyph, not text padding. */
   icon = false,
+  /**
+   * Render on Liquid Glass instead of the flat scrim.
+   *
+   * Only for a chip that ANNOUNCES AN ACTION. It looks like an exception to the
+   * "glass is for controls" rule, since the chip itself is `pointerEvents:
+   * none` — but the photo behind it is the button, and the chip sits inside
+   * that target, so a tap on it really does fire. The promise is kept.
+   *
+   * A chip that only labels something (FRONT / BACK) stays flat: glass would
+   * offer a tap it cannot honour.
+   */
+  glass = false,
 }: {
   children: React.ReactNode;
   icon?: boolean;
+  glass?: boolean;
 }): React.ReactElement {
-  return (
-    <View
-      style={{
-        paddingHorizontal: icon ? 8 : 10,
-        paddingVertical: icon ? 8 : 5,
-        borderRadius: radius.full,
-        backgroundColor: 'rgba(0,0,0,0.55)',
-      }}
-    >
-      {children}
-    </View>
-  );
+  const shape: ViewStyle = {
+    paddingHorizontal: icon ? 8 : 10,
+    paddingVertical: icon ? 8 : 5,
+    borderRadius: radius.full,
+  };
+  // Not `interactive`: the chip never receives the touch (the image below it
+  // does), so asking the glass to react to one would be asking for nothing.
+  if (glass) {
+    return (
+      <ChromeGlass scrim={CHIP_SCRIM} style={shape}>
+        {children}
+      </ChromeGlass>
+    );
+  }
+  return <View style={[shape, { backgroundColor: CHIP_SCRIM }]}>{children}</View>;
 }

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,
@@ -17,6 +18,7 @@ import {
   CreditCard,
   Fingerprint,
   FileText,
+  FlaskConical,
   IdCard,
   Image as ImageIcon,
   Landmark,
@@ -30,6 +32,7 @@ import {
   Moon,
   MoveLeft,
   Nfc,
+  Filter,
   Pencil,
   Smartphone,
   RefreshCw,
@@ -42,6 +45,7 @@ import {
   Sun,
   Timer,
   Upload,
+  Plus,
   UserRound,
   UserRoundPlus,
   Link2,
@@ -68,6 +72,7 @@ export type IconName =
   | 'check'
   | 'lock'
   | 'alert'
+  | 'flask'
   | 'refresh'
   | 'maximize'
   | 'calendar'
@@ -81,10 +86,13 @@ export type IconName =
   | 'building-2'
   | 'user'
   | 'user-plus'
+  | 'plus'
+  | 'info'
   | 'users'
   | 'scan-line'
   | 'scan-face'
   | 'nfc'
+  | 'filter'
   | 'pencil'
   | 'search'
   | 'zap'
@@ -128,6 +136,9 @@ const ICONS: Record<IconName, LucideIcon> = {
   check: Check,
   lock: Lock,
   alert: CircleAlert,
+  // The environment banner's mark, shared with the web SDK (same lucide glyph)
+  // and mirrored by Flutter's Icons.science_outlined.
+  flask: FlaskConical,
   refresh: RefreshCw,
   maximize: Maximize2,
   calendar: Calendar,
@@ -139,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,
@@ -147,6 +160,7 @@ const ICONS: Record<IconName, LucideIcon> = {
   'scan-line': ScanLine,
   'scan-face': ScanFace,
   nfc: Nfc,
+  filter: Filter,
   pencil: Pencil,
   search: Search,
   zap: Zap,

package/src/components/KycSheet.tsx

@@ -1,21 +1,21 @@
-import React, { useEffect, useState } from "react";
-import { Image, Platform, ScrollView, StatusBar, View } from "react-native";
-import { SvgXml } from "react-native-svg";
+import React from "react";
+import { 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 { headerSurface, spacing } from "../config/theme";
 import { useKeyboardInset } from "../lib/use-keyboard-inset";
 import type { SupportedCountry } from "../types/config";
 import { useKycConfig, useTheme } from "./runtime";
 import { useBranding } from "./useBranding";
-import { MyazaText } from "./Typography";
+import { BrandBar } from "./BrandBar";
 import { PoweredBy } from "./PoweredBy";
 import { StepHeader } from "./StepHeader";
 import { StepIndicator } from "./StepIndicator";
 import { ProgressBar } from "./ProgressBar";
 import { GlassIconButton } from "./GlassIconButton";
 import { GlassSurface } from "./glass/GlassSurface";
+import { SandboxBanner, useSandboxBannerVisible } from "./SandboxBanner";
 import { GlassGroup } from "./glass/GlassGroup";
 import { FlashOverlay } from "./FlashOverlay";
 
@@ -84,13 +84,31 @@ export function KycSheet({
   const keyboardInset = useKeyboardInset();
 
   const tint = headerSurface(colors, mode);
+  // Decides who absorbs the status-bar inset: the banner sits above the header,
+  // so when it renders it is the topmost element and takes it instead.
+  const bannerVisible = useSandboxBannerVisible();
   const hasProgress = progress != null && stepCount != null;
-  // The bar REPLACES the step row rather than joining it: two progress
-  // indicators on one header would be noise, and the point of the bar is that
-  // it costs no height.
-  const asBar = config.progressStyle === "bar";
-  const showIndicator = hasProgress && !asBar;
-  const showBar = hasProgress && asBar;
+  // The three styles are mutually exclusive: the bar REPLACES the step row
+  // rather than joining it (two progress indicators on one header would be
+  // noise, and the point of the bar is that it costs no height), and 'none'
+  // drops both. Switching on the resolved style rather than negating flags
+  // keeps a future fourth style from silently falling into the 'steps' branch.
+  const progressStyle = config.progressStyle ?? "steps";
+  const showIndicator = hasProgress && progressStyle === "steps";
+  const showBar = hasProgress && progressStyle === "bar";
+
+  // The header's bottom padding is the GAP to whatever sits under the brand
+  // row — the title block or the step row. With neither (a step that owns its
+  // own title, and progress off or drawn as the edge bar), that padding is
+  // space to a row that never renders, and the brand + controls read as
+  // sitting high in the band rather than centred on one line. Fall back to the
+  // row's own top padding so the two edges match.
+  //
+  // The bar is exempt: it is absolutely positioned ON the bottom edge, so the
+  // wider padding is what keeps it clear of the controls.
+  const hasRowBelowBrand = !!(title || onBack) || showIndicator;
+  const headerPaddingBottom =
+    hasRowBelowBrand || showBar ? spacing.md : spacing.sm;
   const showBrand = !hideBrand && !!logoUri;
 
   // On iOS the modal is a pageSheet by default (sits below the status bar), but
@@ -143,6 +161,11 @@ export function KycSheet({
         />
       ) : null}
       <View style={{ flex: 1 }}>
+        {/* Above the header block (and outside the immersive branch) so a
+            capture step that hides the chrome still says it is not live. It is
+            then the topmost element, so it — not the header — absorbs the
+            status-bar inset. */}
+        <SandboxBanner topInset={topInset} />
         {/* Header block (glass on iOS 26, tinted surface otherwise) — dropped
             entirely when the step owns the display. */}
         {immersive ? null : (
@@ -154,7 +177,7 @@ export function KycSheet({
               // border would double it.
               borderBottomWidth: showBar ? 0 : 1,
               borderBottomColor: colors.border,
-              paddingBottom: spacing.md,
+              paddingBottom: headerPaddingBottom,
             }}
           >
             {/* Row 1 — brand + controls */}
@@ -163,7 +186,10 @@ export function KycSheet({
                 flexDirection: "row",
                 alignItems: "center",
                 paddingHorizontal: spacing.md,
-                paddingTop: topInset + spacing.sm,
+                // The banner, when shown, already cleared the status bar above
+                // us — padding for it again would leave a gap the width of the
+                // notch between the strip and the brand row.
+                paddingTop: (bannerVisible ? 0 : topInset) + spacing.sm,
               }}
             >
               <View
@@ -307,130 +333,3 @@ export function KycSheet({
     </View>
   );
 }
-
-/** Whether a logo URI points at an SVG (extension check, query-safe). */
-function isSvgUri(uri: string): boolean {
-  const path = uri.split("?")[0] ?? uri;
-  return path.toLowerCase().endsWith(".svg");
-}
-
-// 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);
-  const svg = isSvgUri(logoUri);
-  // SVG logos render through SvgXml with SELF-FETCHED markup — the exact
-  // pipeline the country flags use, which is proven on-device. SvgUri's own
-  // fetch/sizing was flaky here (the favicon rendered at intrinsic size
-  // instead of filling the chip).
-  const [xml, setXml] = useState<string | null>(null);
-  useEffect(() => {
-    if (!svg) return;
-    let cancelled = false;
-    fetch(logoUri)
-      .then((r) =>
-        r.ok ? r.text() : Promise.reject(new Error(String(r.status))),
-      )
-      .then((text) => {
-        if (!cancelled) setXml(text);
-      })
-      .catch(() => {
-        if (!cancelled) setBroken(true);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [logoUri, svg]);
-  if (broken) return null;
-  return (
-    <>
-      {/* TWO layers, deliberately.
-
-          A shadow and `overflow: 'hidden'` CANNOT live on the same view on iOS:
-          overflow-hidden compiles to `masksToBounds`, which clips the shadow
-          away with everything else outside the bounds. Android draws `elevation`
-          outside the view, so it survived there — which is why the chip lost its
-          ring on iPhone only.
-
-          So the outer view owns the border and shadow and does NOT clip, and the
-          inner one clips the logo. Same split Flutter gets for free by putting
-          the border on the Container's decoration and the crop in a ClipOval. */}
-      <View
-        style={{
-          width: 28,
-          height: 28,
-          borderRadius: radius.full,
-          backgroundColor: "#FFFFFF",
-          // Light ring + soft shadow — the same treatment as the Flutter SDK's
-          // brand chip (black 5% ring, black 6% blur-4 y-1 shadow) and the web
-          // SDK's ring-1 ring-black/5.
-          borderWidth: 1,
-          borderColor: "rgba(0,0,0,0.05)",
-          shadowColor: "#000000",
-          shadowOpacity: 0.06,
-          shadowRadius: 4,
-          shadowOffset: { width: 0, height: 1 },
-          elevation: 1,
-          marginRight: spacing.sm,
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <View
-          style={{
-            // Fills the parent's CONTENT box (inside its 1px border) and is the
-            // only thing that clips, so the logo reaches the ring on every side.
-            alignSelf: "stretch",
-            flex: 1,
-            borderRadius: radius.full,
-            overflow: "hidden",
-          }}
-        >
-          {/* Fill + cover-crop, matching Flutter's SizedBox.expand + BoxFit.cover.
-
-            Sized in PERCENTAGES, not the literal 26 this used to hardcode: that
-            number was "28 minus the 1px border on each side", so it silently
-            went wrong the moment either value changed, and it left the logo a
-            pixel short of the ring. The clipping parent now owns the geometry.
-
-            SVG logos are common here because the brand import picks up site
-            favicons, and <Image> cannot decode SVG at all — hence the fetched
-            markup through SvgXml. `slice` is the SVG spelling of cover-crop. */}
-          {svg ? (
-            xml ? (
-              <SvgXml
-                xml={xml}
-                width="100%"
-                height="100%"
-                preserveAspectRatio="xMidYMid slice"
-              />
-            ) : null
-          ) : (
-            <Image
-              source={{ uri: logoUri }}
-              style={{ width: "100%", height: "100%" }}
-              resizeMode="cover"
-              onError={() => setBroken(true)}
-            />
-          )}
-        </View>
-      </View>
-      <MyazaText
-        variant="heading3"
-        numberOfLines={1}
-        color={colors.textDark}
-        style={{ flexShrink: 1, fontSize: 14 }}
-      >
-        {companyName}
-      </MyazaText>
-    </>
-  );
-}

package/src/components/MediaSourceSheet.tsx

@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
-import { Modal, Platform, Pressable, View } from 'react-native';
+import { Platform, Pressable, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
 import { Icon, type IconName } from './Icon';
 import { useTheme } from './runtime';
 import { MyazaText } from './Typography';
+import { FloatingSheet } from './glass/FloatingSheet';
 
 /**
  * The SDK's own "where is the document?" sheet.
@@ -61,46 +62,16 @@ export function MediaSourceSheet({
   };
 
   return (
-    <Modal
-      transparent
+    <FloatingSheet
       visible={open}
-      animationType="fade"
-      onRequestClose={onClose}
+      onClose={onClose}
       onDismiss={() => {
         const run = pendingRef.current;
         pendingRef.current = null;
         run?.();
       }}
     >
-      <Pressable
-        onPress={onClose}
-        style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' }}
-      >
-        {/* Swallow taps on the card so only the backdrop dismisses. */}
-        <Pressable
-          onPress={() => undefined}
-          style={{
-            backgroundColor: colors.background,
-            borderTopLeftRadius: radius.xl,
-            borderTopRightRadius: radius.xl,
-            padding: spacing.md,
-            paddingBottom: spacing.xl,
-          }}
-        >
-          {/* Grab handle — the affordance that says "sheet", and therefore
-              "swipe-away-able", without a close button competing with the
-              options. */}
-          <View
-            style={{
-              alignSelf: 'center',
-              width: 36,
-              height: 4,
-              borderRadius: 2,
-              backgroundColor: colors.border,
-              marginBottom: spacing.md,
-            }}
-          />
-
+      <View style={{ padding: spacing.md, paddingTop: spacing.sm }}>
           <MyazaText variant="heading3" style={{ textAlign: 'center', marginBottom: spacing.md }}>
             {title}
           </MyazaText>
@@ -156,8 +127,7 @@ export function MediaSourceSheet({
               Cancel
             </MyazaText>
           </Pressable>
-        </Pressable>
-      </Pressable>
-    </Modal>
+      </View>
+    </FloatingSheet>
   );
 }