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

package/src/components/MultiIdProgress.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { resolveIdTypeDefinition } from '../config/idTypes';
+import type { MultiIdPlan } from '../lib/multi-id';
+import type { MultiIdSlot } from '../store/state';
+import { useEffectiveCountry, useKyc, useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { Icon } from './Icon';
+
+// The multi-ID run's position strip: one chip per check, filling in with the
+// picked ID's name as each check commits, the current one highlighted.
+//
+// A PORT of the web SDK's MultiIdProgress. Rendered above the picker, the
+// evidence steps and liveness so a reader always knows which of the run's IDs
+// the screen is about and how many remain — without it a three-ID run is three
+// visits to the same-looking screen with nothing saying which is which.
+
+export function MultiIdProgress({ plan }: { plan: MultiIdPlan }): React.ReactElement {
+  const { colors } = useTheme();
+  const country = useEffectiveCountry();
+  const serverConfig = useKyc((s) => s.serverConfig);
+  const slots: MultiIdSlot[] = useKyc((s) => s.multiIdSlots);
+
+  const labelFor = (idType: string): string => {
+    const row = serverConfig.idTypes.find(
+      (r) => r.country === country && r.idType === idType,
+    );
+    return resolveIdTypeDefinition(country, idType, {
+      label: row?.label,
+      requiresDocumentCapture: row?.requiresDocumentCapture,
+      scanSides: row?.scanSides,
+      supportsNfc: row?.supportsNfc,
+    }).label;
+  };
+
+  return (
+    <View
+      accessibilityLabel={`ID ${Math.min(plan.index + 1, plan.count)} of ${plan.count}`}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm,
+        marginBottom: spacing.md,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.backgroundSecondary,
+      }}
+    >
+      {Array.from({ length: plan.count }, (_, i) => {
+        const committed = slots[i];
+        const active = i === plan.index;
+        return (
+          <View
+            key={i}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm, minWidth: 0 }}
+          >
+            {i > 0 && (
+              <View
+                style={{
+                  height: 1,
+                  width: 16,
+                  backgroundColor: committed || active ? colors.primary : colors.border,
+                  opacity: committed || active ? 0.5 : 1,
+                }}
+              />
+            )}
+            <View
+              style={{
+                height: 20,
+                width: 20,
+                borderRadius: 10,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: committed ? colors.primary : 'transparent',
+                borderWidth: committed ? 0 : active ? 2 : 1,
+                borderColor: active ? colors.primary : colors.border,
+              }}
+            >
+              {committed ? (
+                <Icon name="check" size={12} color={colors.onPrimary} />
+              ) : (
+                <MyazaText
+                  variant="bodySmall"
+                  color={active ? colors.primary : colors.textMuted}
+                >
+                  {String(i + 1)}
+                </MyazaText>
+              )}
+            </View>
+            <MyazaText
+              variant="bodySmall"
+              color={active ? colors.textDark : colors.textMuted}
+              numberOfLines={1}
+            >
+              {committed ? labelFor(committed.idType) : `ID ${i + 1}`}
+            </MyazaText>
+          </View>
+        );
+      })}
+    </View>
+  );
+}

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

@@ -39,6 +39,18 @@ export interface MyazaInputProps {
   /** Rendered inside the field, after the text — a unit like "%". Same
    *  bordered-row treatment as `prefix`. */
   suffix?: React.ReactNode;
+  /** Field height override — the results filter runs at 40 where every other
+   *  input is 48, matching the web SDK's h-10 filter beside h-12 inputs. */
+  height?: number;
+  /** Text size override, for the compact filter (web: text-sm = 14). */
+  fontSize?: number;
+  /**
+   * Off for proper-noun fields (company names, registration numbers): iOS
+   * autocorrect rewrites them right before the person submits, so a search
+   * for the company they typed silently becomes a search for a word the
+   * keyboard preferred. Defaults on, like the platform.
+   */
+  autoCorrect?: boolean;
   onFocus?: FocusHandler;
   onBlur?: BlurHandler;
 }
@@ -57,6 +69,9 @@ export function MyazaInput({
   autoFocus = false,
   prefix,
   suffix,
+  height,
+  fontSize,
+  autoCorrect = true,
   onFocus,
   onBlur,
 }: MyazaInputProps): React.ReactElement {
@@ -95,7 +110,7 @@ export function MyazaInput({
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            height: sizing.inputHeight,
+            height: height ?? sizing.inputHeight,
             borderWidth,
             borderColor,
             borderRadius: radius.sm,
@@ -112,12 +127,14 @@ export function MyazaInput({
             placeholderTextColor={colors.textMuted}
             keyboardType={keyboardType}
             autoCapitalize={autoCapitalize}
+            autoCorrect={autoCorrect}
+            spellCheck={autoCorrect}
             maxLength={maxLength}
             editable={editable}
             autoFocus={autoFocus}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: 16, fontFamily }}
+            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: fontSize ?? 16, fontFamily }}
           />
           {suffix ? <View style={{ width: spacing.sm }} /> : null}
           {suffix}
@@ -130,13 +147,15 @@ export function MyazaInput({
           placeholderTextColor={colors.textMuted}
           keyboardType={keyboardType}
           autoCapitalize={autoCapitalize}
+          autoCorrect={autoCorrect}
+          spellCheck={autoCorrect}
           maxLength={maxLength}
           editable={editable}
           autoFocus={autoFocus}
           onFocus={handleFocus}
           onBlur={handleBlur}
           style={{
-            height: sizing.inputHeight,
+            height: height ?? sizing.inputHeight,
             borderWidth,
             borderColor,
             borderRadius: radius.sm,
@@ -145,7 +164,7 @@ export function MyazaInput({
             paddingHorizontal: spacing.md + (2 - borderWidth),
             color: colors.textDark,
             backgroundColor: colors.background,
-            fontSize: 16,
+            fontSize: fontSize ?? 16,
             fontFamily,
           }}
         />

package/src/components/MyazaSelect.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { Modal, Pressable, ScrollView, TextInput, useWindowDimensions, View } from 'react-native';
+import { Pressable, ScrollView, TextInput, useWindowDimensions, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
 import { useTheme } from './runtime';
 import { useInputFontFamily } from './fonts';
 import { MyazaText } from './Typography';
 import { Icon } from './Icon';
+import { FloatingSheet } from './glass/FloatingSheet';
 
 // ---------------------------------------------------------------------------
 // The select field — a collapsed value that opens a sheet of options.
@@ -131,51 +132,23 @@ export function MyazaSelect<T extends string | number>({
         <Icon name="chevron-down" size={18} color={colors.textSecondary} />
       </Pressable>
 
-      <Modal
+      <FloatingSheet
         visible={open}
-        transparent
-        animationType="slide"
-        onRequestClose={() => {
+        onClose={() => {
           setOpen(false);
           setQuery('');
         }}
+        // Long option lists stay inside the sheet and scroll.
+        maxHeight={windowHeight * 0.6}
+        closeLabel={`Close ${sheetTitle ?? hint}`}
       >
-        {/* Tapping the backdrop dismisses, matching the platform sheet. */}
-        <Pressable
-          onPress={() => {
-            setOpen(false);
-            setQuery('');
-          }}
-          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'flex-end' }}
-        >
-          {/* Stops a tap inside the sheet from closing it. */}
-          <Pressable
-            onPress={() => {}}
-            style={{
-              backgroundColor: colors.background,
-              borderTopLeftRadius: radius.lg,
-              borderTopRightRadius: radius.lg,
-              paddingBottom: spacing.lg,
-              // Long option lists stay inside the sheet and scroll.
-              maxHeight: windowHeight * 0.6,
-            }}
-          >
-            <View
-              style={{
-                alignSelf: 'center',
-                width: 36,
-                height: 4,
-                borderRadius: radius.full,
-                backgroundColor: colors.border,
-                marginTop: spacing.sm,
-              }}
-            />
             <MyazaText
               variant="body"
               style={{
                 fontWeight: '700',
                 paddingHorizontal: spacing.md,
-                paddingTop: spacing.md,
+                // Tight under the handle, the way the system sheet titles sit.
+                paddingTop: spacing.xs,
                 paddingBottom: spacing.sm,
               }}
             >
@@ -222,7 +195,13 @@ export function MyazaSelect<T extends string | number>({
               </View>
             ) : null}
 
-            <ScrollView bounces={false} keyboardShouldPersistTaps="handled">
+            <ScrollView
+              bounces={false}
+              keyboardShouldPersistTaps="handled"
+              // The floating shell has no bottom padding of its own, so the
+              // last option must not sit flush against the rounded corner.
+              contentContainerStyle={{ paddingBottom: spacing.lg }}
+            >
               {visible.length === 0 ? (
                 <MyazaText
                   variant="bodySmall"
@@ -280,9 +259,7 @@ export function MyazaSelect<T extends string | number>({
                 );
               })}
             </ScrollView>
-          </Pressable>
-        </Pressable>
-      </Modal>
+      </FloatingSheet>
     </>
   );
 }

package/src/components/OwnershipSlider.tsx

@@ -0,0 +1,102 @@
+import React, { useRef, useState } from 'react';
+import { PanResponder, View } from 'react-native';
+
+import { useTheme } from './runtime';
+
+// ─── A 0–100 slider for the ownership field ──────────────────────────────────
+//
+// The fast coarse gesture beside the exact box: dragging writes whole numbers
+// into the same field, and a register stake like 48.42 is still typed (no
+// thumb lands on it). Dependency-free — a track, a fill and a thumb under one
+// PanResponder — because a native slider module is a heavy import for one
+// field. Mirrors the web SDK's range input under the same box.
+
+const THUMB = 22;
+const TRACK = 5;
+
+export function OwnershipSlider({
+  value,
+  onChange,
+}: {
+  /** The current stake 0–100; an undeclared one rests the thumb at 0. */
+  value: number;
+  onChange: (next: number) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [width, setWidth] = useState(0);
+  const widthRef = useRef(0);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const setFromX = (x: number): void => {
+    const usable = widthRef.current - THUMB;
+    if (usable <= 0) return;
+    const ratio = (x - THUMB / 2) / usable;
+    const next = Math.round(Math.min(1, Math.max(0, ratio)) * 100);
+    onChangeRef.current(next);
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (e) => setFromX(e.nativeEvent.locationX),
+      onPanResponderMove: (e) => setFromX(e.nativeEvent.locationX),
+    }),
+  ).current;
+
+  const clamped = Math.min(100, Math.max(0, value));
+  const left = width > 0 ? (clamped / 100) * (width - THUMB) : 0;
+
+  return (
+    <View
+      {...pan.panHandlers}
+      onLayout={(e) => {
+        widthRef.current = e.nativeEvent.layout.width;
+        setWidth(e.nativeEvent.layout.width);
+      }}
+      accessibilityRole="adjustable"
+      accessibilityLabel="Ownership percentage"
+      accessibilityValue={{ min: 0, max: 100, now: clamped }}
+      // Tall hit area; the visible track stays thin.
+      style={{ height: 32, justifyContent: 'center' }}
+    >
+      <View
+        style={{
+          height: TRACK,
+          borderRadius: TRACK / 2,
+          backgroundColor: colors.border,
+        }}
+      />
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          left: 0,
+          width: left + THUMB / 2,
+          height: TRACK,
+          borderRadius: TRACK / 2,
+          backgroundColor: colors.primary,
+        }}
+      />
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          left,
+          width: THUMB,
+          height: THUMB,
+          borderRadius: THUMB / 2,
+          backgroundColor: colors.primary,
+          borderWidth: 3,
+          borderColor: colors.background,
+          shadowColor: '#000',
+          shadowOpacity: 0.15,
+          shadowRadius: 3,
+          shadowOffset: { width: 0, height: 1 },
+          elevation: 2,
+        }}
+      />
+    </View>
+  );
+}

package/src/components/PhoneNumberInput.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
 import {
@@ -34,13 +34,25 @@ import { COUNTRY_NAMES } from '../config/countryNames.g';
 // ---------------------------------------------------------------------------
 
 export function PhoneNumberInput({
+  value,
   defaultCountry,
   disabled,
+  autoFocus = false,
   onChange,
 }: {
+  /**
+   * E.164 seed. The field itself stays uncontrolled (the formatter owns the
+   * text), but a value arriving after mount — the register's, prefilled a
+   * moment later — has to reach the field, or we hold a number the applicant
+   * can neither see nor correct and submit it as though they gave it.
+   */
+  value?: string;
   /** Seeds the picker (ISO-2). Falls back to NG. */
   defaultCountry?: string;
   disabled?: boolean;
+  /** Focus + keyboard on mount. Opt-in: right for a single-field OTP screen,
+   *  wrong for a row in a company-profile form. */
+  autoFocus?: boolean;
   /** Fires on every edit with the E.164 value ('' until parseable) + validity. */
   onChange: (value: { e164: string; isValid: boolean; country: string }) => void;
 }): React.ReactElement {
@@ -64,11 +76,32 @@ export function PhoneNumberInput({
     [],
   );
 
-  const seed = (defaultCountry?.toUpperCase() ?? 'NG') as CountryCode;
+  // A supplied number decides its OWN dial code — it is a fact, where the
+  // country prop is a guess. Falls through to the guess when there is no
+  // number or it cannot be parsed.
+  const supplied = value ? parsePhoneNumberFromString(value) : null;
+  const seed = (supplied?.country ??
+    defaultCountry?.toUpperCase() ??
+    'NG') as CountryCode;
   const [country, setCountry] = useState<CountryCode>(
     options.some((o) => o.code === seed) ? seed : ('NG' as CountryCode),
   );
-  const [national, setNational] = useState('');
+  const [national, setNational] = useState(() =>
+    supplied ? formatNationalNumber(supplied.nationalNumber, seed) : '',
+  );
+  // A number that arrives AFTER mount — the register's, prefilled a moment
+  // later — has to reach the field. Seeding is one-way and keyed on the value,
+  // so the applicant's own edits are never fought.
+  const seededRef = useRef(value ?? '');
+  useEffect(() => {
+    if (!value || value === seededRef.current) return;
+    seededRef.current = value;
+    const parsed = parsePhoneNumberFromString(value);
+    if (!parsed) return;
+    const next = (parsed.country ?? country) as CountryCode;
+    setCountry(next);
+    setNational(formatNationalNumber(parsed.nationalNumber, next));
+  }, [value, country]);
   const [open, setOpen] = useState(false);
 
   const selected = options.find((o) => o.code === country);
@@ -132,7 +165,7 @@ export function PhoneNumberInput({
             placeholder="803 123 4567"
             keyboardType="phone-pad"
             editable={!disabled}
-            autoFocus
+            autoFocus={autoFocus}
           />
         </View>
       </View>

package/src/components/SandboxBanner.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import type { KycState } from '../store/state';
+import { useKyc } from './runtime';
+import { Icon } from './Icon';
+import { MyazaText } from './Typography';
+
+/**
+ * "You are not in production" strip, shown above the sheet's header.
+ *
+ * A sandbox flow is pixel-identical to a live one, which is the point — you are
+ * testing the real thing — and also the hazard: screenshots get mistaken for
+ * production incidents, testers wonder why a real passport was rejected, and a
+ * `pk_test_` key shipped to production looks like it works right up until
+ * nobody is actually verified.
+ *
+ * Environment comes from the SERVER (`/config`), not the API key prefix. Hosted
+ * sessions authenticate with an `hs_` handoff token that carries no environment
+ * slot, so key-sniffing would leave exactly the surface an end user sees
+ * unlabelled.
+ *
+ * DEVELOPMENT is labelled too, and differently: it runs the real pipeline
+ * against staging provider credentials, so "test data only" would be a lie
+ * there. 1:1 with the web and Flutter SDKs.
+ */
+/**
+ * Whether the banner will render. The sheet needs this to decide who owns the
+ * safe-area top inset: the banner sits ABOVE the header, so when it shows it is
+ * the topmost element and must clear the status bar itself — otherwise the
+ * header pads for an inset the banner already crossed, and the strip is drawn
+ * under the clock on Android's edge-to-edge modals.
+ */
+export function useSandboxBannerVisible(): boolean {
+  const environment = useKyc((s: KycState) => s.serverConfig.environment);
+  return environment === 'SANDBOX' || environment === 'DEVELOPMENT';
+}
+
+export function SandboxBanner({
+  topInset = 0,
+}: {
+  /** Safe-area top inset to absorb, when the banner is the topmost element. */
+  topInset?: number;
+}): React.ReactElement | null {
+  const environment = useKyc((s: KycState) => s.serverConfig.environment);
+  if (environment !== 'SANDBOX' && environment !== 'DEVELOPMENT') return null;
+
+  const sandbox = environment === 'SANDBOX';
+
+  return (
+    <View
+      accessibilityRole="alert"
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: spacing.xs + 2,
+        // Amber, not the brand colour: this is an out-of-band status about the
+        // session, and the org's palette would read as part of their flow.
+        backgroundColor: AMBER_TINT,
+        paddingHorizontal: spacing.md,
+        // The tint extends up through the status bar so the strip reads as one
+        // band rather than floating below a bare gap.
+        paddingTop: topInset + spacing.xs + 2,
+        paddingBottom: spacing.xs + 2,
+      }}
+    >
+      {/* Flask, not an alert mark: nothing is wrong — this is a statement about
+          WHICH environment you are in ("test environment", "test data only").
+          An alert glyph reads as a fault and sends testers hunting for one.
+          Same lucide icon the web SDK uses; Flutter mirrors it with
+          Icons.science_outlined. */}
+      <Icon name="flask" size={13} color={AMBER_INK} />
+      <MyazaText
+        variant="bodySmall"
+        color={AMBER_INK}
+        style={{ fontSize: 11, fontWeight: '700', letterSpacing: 1, textTransform: 'uppercase' }}
+      >
+        {sandbox ? 'Sandbox' : 'Development'}
+      </MyazaText>
+      <MyazaText variant="bodySmall" color={AMBER_INK} style={{ fontSize: 11, flexShrink: 1 }}>
+        {sandbox ? 'Test data only, no real checks run' : 'Test environment, results are not live'}
+      </MyazaText>
+    </View>
+  );
+}
+
+// Fixed rather than themed: the strip must read identically in light and dark,
+// and it deliberately does not belong to the org's palette.
+const AMBER_TINT = 'rgba(245, 158, 11, 0.18)';
+const AMBER_INK = '#B45309';

package/src/components/StaggerIn.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated } from 'react-native';
+
+/**
+ * Whether the OS asks for reduced motion. Shared by the entrance/skeleton
+ * animations so a system-level preference silences all of them at once.
+ */
+export function useReduceMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    void AccessibilityInfo.isReduceMotionEnabled().then((r) => {
+      if (!cancelled) setReduced(r);
+    });
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduced);
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+  }, []);
+  return reduced;
+}
+
+/**
+ * Rise-and-fade entrance for list items, mirroring the web SDK's staggered
+ * `animate-slide-up`: each card enters in reading order, ~45ms apart, so a
+ * resolved list reads as the skeleton before it settling into place rather
+ * than a screen swap. Reduced motion renders children statically.
+ */
+export function StaggerIn({
+  delayMs = 0,
+  children,
+}: {
+  delayMs?: number;
+  children: React.ReactNode;
+}): React.ReactElement {
+  const reduceMotion = useReduceMotion();
+  const progress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: 300,
+      delay: delayMs,
+      useNativeDriver: true,
+    }).start();
+  }, [progress, delayMs]);
+
+  if (reduceMotion) return <>{children}</>;
+
+  return (
+    <Animated.View
+      style={{
+        opacity: progress,
+        transform: [
+          { translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [16, 0] }) },
+        ],
+      }}
+    >
+      {children}
+    </Animated.View>
+  );
+}