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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myazahq/kyc-sdk-react-native",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Myaza KYC SDK for React Native (Expo) — ID verification, liveness detection, and document capture",
   "author": "Flitstack Technologies Inc.",
   "repository": {
@@ -61,7 +61,6 @@
   "dependencies": {
     "@expo-google-fonts/karla": "^0.4.2",
     "@expo-google-fonts/space-grotesk": "^0.4.1",
-    "@expo/ui": "~56.0.16",
     "@expo/vector-icons": "^14.0.4",
     "country-flag-icons": "^1.6.17",
     "expo-application": "~56.0.3",

package/src/components/BrandBar.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react';
+import { Image, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+
+/** Whether a logo URI points at an SVG (extension check, query-safe). */
+export function isSvgUri(uri: string): boolean {
+  const path = uri.split('?')[0] ?? uri;
+  return path.toLowerCase().endsWith('.svg');
+}
+
+// Deliberately NOT on a Liquid Glass capsule, though it would balance the
+// theme/close capsule opposite it. Glass at capsule scale is the material for
+// controls — something that floats and responds to touch. The brand is a label,
+// so a pill around it promises a tap that never does anything. The header block
+// behind it is glass, which is the correct use: a surface, not a control.
+//
+// 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.
+export 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.
+
+          The white plate is load-bearing, not decoration: brand logos are
+          routinely dark artwork on a transparent background (the import picks up
+          favicons), which would vanish against a dark header. */}
+      <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/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,19 +98,14 @@ 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,
-        }}
-      >
+    <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"
+    >
         <View style={{ paddingHorizontal: spacing.md, paddingBottom: spacing.sm }}>
           <MyazaInput
             value={query}
@@ -141,8 +136,7 @@ export function DialCodePicker({
             />
           )}
         />
-      </View>
-    </Modal>
+    </FloatingSheet>
   );
 }
 

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

@@ -17,6 +17,7 @@ import {
   CreditCard,
   Fingerprint,
   FileText,
+  FlaskConical,
   IdCard,
   Image as ImageIcon,
   Landmark,
@@ -68,6 +69,7 @@ export type IconName =
   | 'check'
   | 'lock'
   | 'alert'
+  | 'flask'
   | 'refresh'
   | 'maximize'
   | 'calendar'
@@ -128,6 +130,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,

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

package/src/components/MyazaDateField.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Modal, Pressable, ScrollView, View } from 'react-native';
+import { Pressable, ScrollView, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
 import {
@@ -13,6 +13,7 @@ import {
 import { Icon } from './Icon';
 import { useTheme } from './runtime';
 import { MyazaText } from './Typography';
+import { FloatingSheet } from './glass/FloatingSheet';
 
 /**
  * A date field that opens a REAL calendar picker, replacing the "type
@@ -117,22 +118,8 @@ function DatePickerSheet({
     !!initial && initial.year === cursor.year && initial.month0 === cursor.month0 && initial.day === d;
 
   return (
-    <Modal transparent animationType="fade" onRequestClose={onClose}>
-      <Pressable
-        onPress={onClose}
-        style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' }}
-      >
-        {/* Stop the backdrop press from closing when the card itself is tapped. */}
-        <Pressable
-          onPress={() => undefined}
-          style={{
-            backgroundColor: colors.background,
-            borderTopLeftRadius: radius.xl,
-            borderTopRightRadius: radius.xl,
-            padding: spacing.md,
-            paddingBottom: spacing.xl,
-          }}
-        >
+    <FloatingSheet visible onClose={onClose} closeLabel="Close date picker">
+          <View style={{ padding: spacing.md, paddingTop: spacing.sm }}>
           {/* Month header: step, or tap the title to jump years. */}
           <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: spacing.sm }}>
             <Pressable
@@ -233,8 +220,7 @@ function DatePickerSheet({
               ))}
             </>
           )}
-        </Pressable>
-      </Pressable>
-    </Modal>
+          </View>
+    </FloatingSheet>
   );
 }