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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myazahq/kyc-sdk-react-native",
-  "version": "2.2.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,