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

package/src/components/KycSheet.tsx

@@ -1,22 +1,23 @@
-import React, { useEffect, useState } from 'react';
-import { Image, Platform, ScrollView, StatusBar, View } from 'react-native';
-import { SvgXml } from 'react-native-svg';
-import { StatusBarController } from './StatusBarController';
-import { initialWindowMetrics } from 'react-native-safe-area-context';
+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 { 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 { PoweredBy } from './PoweredBy';
-import { StepHeader } from './StepHeader';
-import { StepIndicator } from './StepIndicator';
-import { GlassIconButton } from './GlassIconButton';
-import { GlassSurface } from './glass/GlassSurface';
-import { GlassGroup } from './glass/GlassGroup';
-import { FlashOverlay } from './FlashOverlay';
+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 { 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";
 
 // Full-screen sheet shell — 1:1 with the Flutter SDK's KycBottomSheet:
 //   • a tinted header block (Liquid Glass on iOS 26) with a bottom border:
@@ -83,16 +84,38 @@ export function KycSheet({
   const keyboardInset = useKeyboardInset();
 
   const tint = headerSurface(colors, mode);
-  const showIndicator = progress != null && stepCount != null;
-  const showBrand = !hideBrand && !!logoUri;
-
+  // 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 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
   // `disableClose` presents it full-screen (to drop the swipe-to-dismiss), so it
   // then extends under the notch + over the home indicator and needs its own
   // safe-area insets — the pageSheet provides them for free.
-  const iosFullScreen = Platform.OS === 'ios' && config.disableClose === true;
+  const iosFullScreen = Platform.OS === "ios" && config.disableClose === true;
 
   // Static safe-area snapshot (captured at app launch — no SafeAreaProvider
   // needed). On Android 15+/API 35+ the modal is drawn EDGE-TO-EDGE, and
@@ -106,7 +129,7 @@ export function KycSheet({
   //   • iOS pageSheet: already below the status bar → no inset.
   //   • iOS full-screen (disableClose): 56 covers the status bar + notch.
   const topInset =
-    Platform.OS === 'android'
+    Platform.OS === "android"
       ? sa?.top || StatusBar.currentHeight || 28
       : iosFullScreen
         ? 56
@@ -114,95 +137,139 @@ export function KycSheet({
 
   // Clear the home indicator / nav bar at the bottom of a full-screen modal.
   const bottomInset =
-    Platform.OS === 'android' ? sa?.bottom ?? 0 : iosFullScreen ? 34 : 0;
+    Platform.OS === "android" ? (sa?.bottom ?? 0) : iosFullScreen ? 34 : 0;
 
   return (
-    <View style={{ flex: 1, backgroundColor: immersive ? '#000000' : colors.background }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: immersive ? "#000000" : colors.background,
+      }}
+    >
       {/* The SDK theme drives the status-bar glyph colour so it stays readable on
           the modal background — light glyphs in dark mode, dark in light mode.
           Android: JS StatusBar/SystemBars can't reach the <Modal>'s Dialog window,
           so a native view (StatusBarController) themes it from inside the modal.
           iOS: only the full-screen modal (disableClose) slides under the bar — the
           default pageSheet keeps the host bar above the card. */}
-      {Platform.OS === 'android' ? (
-        <StatusBarController barStyle={mode === 'dark' ? 'light' : 'dark'} />
+      {Platform.OS === "android" ? (
+        <StatusBarController barStyle={mode === "dark" ? "light" : "dark"} />
       ) : iosFullScreen ? (
-        <StatusBar barStyle={mode === 'dark' ? 'light-content' : 'dark-content'} animated />
+        <StatusBar
+          barStyle={mode === "dark" ? "light-content" : "dark-content"}
+          animated
+        />
       ) : 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 : <GlassSurface
-          glassStyle="regular"
-          fallbackColor={tint}
-          style={{ borderBottomWidth: 1, borderBottomColor: colors.border, paddingBottom: spacing.md }}
-        >
-          {/* Row 1 — brand + controls */}
-          <View
+        {immersive ? null : (
+          <GlassSurface
+            glassStyle="regular"
+            fallbackColor={tint}
             style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingHorizontal: spacing.md,
-              paddingTop: topInset + spacing.sm,
+              // The bar sits ON this edge and paints its own track, so the
+              // border would double it.
+              borderBottomWidth: showBar ? 0 : 1,
+              borderBottomColor: colors.border,
+              paddingBottom: headerPaddingBottom,
             }}
           >
-            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
-              {showBrand ? <BrandBar logoUri={logoUri!} companyName={companyName} /> : null}
-            </View>
+            {/* Row 1 — brand + controls */}
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                paddingHorizontal: spacing.md,
+                // 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
+                style={{ flex: 1, flexDirection: "row", alignItems: "center" }}
+              >
+                {showBrand ? (
+                  <BrandBar logoUri={logoUri!} companyName={companyName} />
+                ) : null}
+              </View>
 
-            {/* Header controls. When BOTH the theme toggle and close show, they
+              {/* Header controls. When BOTH the theme toggle and close show, they
                 share a single Liquid Glass capsule (each button `plain`). When
                 only one shows — the consumer disabled the other (`disableClose`
                 or `showThemeToggle: false`) — that button stands on its own
                 glass instead of a one-icon capsule. Neither → nothing. */}
-            {(() => {
-              const showToggle = config.showThemeToggle !== false;
-              const showClose = !config.disableClose;
-              const toggleBtn = showToggle ? (
-                <GlassIconButton
-                  icon={mode === 'dark' ? 'sun' : 'moon'}
-                  onPress={toggle}
-                  solid
-                  plain={showClose}
-                  accessibilityLabel="Toggle theme"
-                />
-              ) : null;
-              const closeBtn = showClose ? (
-                <GlassIconButton
-                  icon="close"
-                  onPress={onClose}
-                  plain={showToggle}
-                  accessibilityLabel="Close"
-                />
-              ) : null;
+              {(() => {
+                const showToggle = config.showThemeToggle !== false;
+                const showClose = !config.disableClose;
+                const toggleBtn = showToggle ? (
+                  <GlassIconButton
+                    icon={mode === "dark" ? "sun" : "moon"}
+                    onPress={toggle}
+                    solid
+                    plain={showClose}
+                    accessibilityLabel="Toggle theme"
+                  />
+                ) : null;
+                const closeBtn = showClose ? (
+                  <GlassIconButton
+                    icon="close"
+                    onPress={onClose}
+                    plain={showToggle}
+                    accessibilityLabel="Close"
+                  />
+                ) : null;
 
-              if (showToggle && showClose) {
-                return (
-                  <GlassGroup style={{ gap: 2 }}>
-                    {toggleBtn}
-                    {closeBtn}
-                  </GlassGroup>
-                );
-              }
-              // Exactly one (or zero) — render it standalone with its own glass.
-              return toggleBtn ?? closeBtn;
-            })()}
-          </View>
-
-          {/* Row 2 — title + back + flag */}
-          {title || onBack ? (
-            <View style={{ paddingHorizontal: spacing.md, paddingTop: spacing.sm }}>
-              <StepHeader title={title} description={description} onBack={onBack} country={country} />
+                if (showToggle && showClose) {
+                  return (
+                    <GlassGroup style={{ gap: 2 }}>
+                      {toggleBtn}
+                      {closeBtn}
+                    </GlassGroup>
+                  );
+                }
+                // Exactly one (or zero) — render it standalone with its own glass.
+                return toggleBtn ?? closeBtn;
+              })()}
             </View>
-          ) : null}
 
-          {/* Row 3 — step indicator */}
-          {showIndicator ? (
-            <View style={{ marginTop: spacing.md }}>
-              <StepIndicator progress={progress!} stepCount={stepCount!} />
-            </View>
-          ) : null}
-        </GlassSurface>}
+            {/* Row 2 — title + back + flag */}
+            {title || onBack ? (
+              <View
+                style={{
+                  paddingHorizontal: spacing.md,
+                  paddingTop: spacing.sm,
+                }}
+              >
+                <StepHeader
+                  title={title}
+                  description={description}
+                  onBack={onBack}
+                  country={country}
+                />
+              </View>
+            ) : null}
+
+            {/* Row 3 — step indicator */}
+            {showIndicator ? (
+              <View style={{ marginTop: spacing.md }}>
+                <StepIndicator progress={progress!} stepCount={stepCount!} />
+              </View>
+            ) : null}
+
+            {/* Absolutely positioned, so it overlays the header's bottom edge
+                instead of adding a row — the whole reason to prefer it. */}
+            {showBar ? (
+              <ProgressBar progress={progress!} stepCount={stepCount!} />
+            ) : null}
+          </GlassSurface>
+        )}
 
         {/* Step body */}
         {fillsViewport ? (
@@ -210,7 +277,9 @@ export function KycSheet({
           // padding exists so scrolled content clears the home indicator, but
           // in a fixed-height body it just lifts the list off the footer and
           // reads as a dead band. PoweredBy owns the safe-area inset already.
-          <View style={{ flex: 1, padding: spacing.md, paddingBottom: spacing.md }}>
+          <View
+            style={{ flex: 1, padding: spacing.md, paddingBottom: spacing.md }}
+          >
             {children}
           </View>
         ) : (
@@ -236,7 +305,9 @@ export function KycSheet({
             // input into view — the platform's own handling, which a
             // KeyboardAvoidingView only approximates. Without this the
             // keyboard simply covered the bottom of every input step.
-            automaticallyAdjustKeyboardInsets={Platform.OS === 'ios' && !immersive}
+            automaticallyAdjustKeyboardInsets={
+              Platform.OS === "ios" && !immersive
+            }
           >
             {children}
           </ScrollView>
@@ -262,93 +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 (
-    <>
-      <View
-        style={{
-          width: 28,
-          height: 28,
-          borderRadius: radius.full,
-          backgroundColor: '#FFFFFF',
-          // Light border + 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,
-          overflow: 'hidden',
-          marginRight: spacing.sm,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        {/* Fill + cover-crop the circle. The borderRadius is repeated on the
-            Image itself because iOS doesn't reliably clip an Image child to a
-            parent's rounded corners (mirrors Flutter's ClipOval + cover).
-            SVG logos (common — the brand import picks up site favicons) can't
-            be decoded by <Image>; the fetched markup renders via SvgXml at
-            the chip's inner size (26 = 28 minus the 1px border each side),
-            slice = cover-crop. */}
-        {svg ? (
-          xml ? (
-            <SvgXml
-              xml={xml}
-              width={26}
-              height={26}
-              preserveAspectRatio="xMidYMid slice"
-            />
-          ) : null
-        ) : (
-          <Image
-            source={{ uri: logoUri }}
-            style={{ width: '100%', height: '100%', borderRadius: radius.full }}
-            resizeMode="cover"
-            onError={() => setBroken(true)}
-          />
-        )}
-      </View>
-      <MyazaText variant="heading3" numberOfLines={1} color={colors.textDark} style={{ flexShrink: 1, fontSize: 14 }}>
-        {companyName}
-      </MyazaText>
-    </>
-  );
-}

package/src/components/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>
   );
 }

package/src/components/MyazaInput.tsx

@@ -11,6 +11,7 @@ type BlurHandler = NonNullable<TextInputProps['onBlur']>;
 
 import { radius, sizing, spacing } from '../config/theme';
 import { useTheme } from './runtime';
+import { useInputFontFamily } from './fonts';
 import { MyazaText } from './Typography';
 
 // Branded text input with label, helper, and error states. Mirrors the Flutter
@@ -60,6 +61,9 @@ export function MyazaInput({
   onBlur,
 }: MyazaInputProps): React.ReactElement {
   const { colors } = useTheme();
+  // TextInput does not inherit fontFamily in RN — set it or the field (and its
+  // placeholder) renders in the system face beside brand-font text.
+  const fontFamily = useInputFontFamily();
   const [focused, setFocused] = useState(false);
 
   // Mirror the Flutter SDK's MyazaInput border states:
@@ -113,7 +117,7 @@ export function MyazaInput({
             autoFocus={autoFocus}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: 16 }}
+            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: 16, fontFamily }}
           />
           {suffix ? <View style={{ width: spacing.sm }} /> : null}
           {suffix}
@@ -142,6 +146,7 @@ export function MyazaInput({
             color: colors.textDark,
             backgroundColor: colors.background,
             fontSize: 16,
+            fontFamily,
           }}
         />
       )}