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

package/src/components/PresenceBlocks.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+
+import { MyazaText } from './Typography';
+import { MilestoneTrack, type Milestone } from './MilestoneTrack';
+import { useReduceMotion } from './StaggerIn';
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './theme-provider';
+
+// ---------------------------------------------------------------------------
+// The success screen's presence card, drawn as a LIVE PROCESS rather than a
+// notice: the check began the moment they submitted, so the card should feel
+// like something is already quietly working, because it is.
+//
+// Its milestones are the same three the intro gate promises, one frame later —
+// keep the two, and the web and Flutter SDKs, in lockstep.
+//
+// The standalone "presence consent notice" that used to live here is gone: the
+// disclosures belong on the intro gate, and a second copy on the address step
+// was one more place for the consent wording to drift.
+// ---------------------------------------------------------------------------
+
+const MILESTONES: readonly Milestone[] = [
+  {
+    icon: 'map-pin-check',
+    stage: 'Today',
+    title: 'Check started',
+    caption: 'Your pin is saved. Keep location on.',
+    state: 'active',
+  },
+  {
+    icon: 'radar',
+    stage: 'Next few days',
+    title: 'Quiet check-ins',
+    caption: 'Your phone confirms it is at your address now and then.',
+    state: 'ahead',
+  },
+  {
+    icon: 'bell-ring',
+    stage: 'Then',
+    title: 'Confirmed',
+    caption: 'You get a notification. That is it.',
+    state: 'ahead',
+  },
+];
+
+export function PresenceExpectations(): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={{
+        alignSelf: 'stretch',
+        marginTop: spacing.lg,
+        borderWidth: 1,
+        borderColor: `${colors.primary}26`,
+        borderRadius: radius.md,
+        overflow: 'hidden',
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: `${colors.primary}0F`,
+          paddingHorizontal: spacing.md,
+          paddingTop: spacing.md,
+          paddingBottom: spacing.sm + 4,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            alignSelf: 'flex-start',
+            gap: spacing.sm,
+            paddingHorizontal: spacing.sm + 2,
+            paddingVertical: 4,
+            borderRadius: radius.full,
+            backgroundColor: `${colors.primary}1A`,
+          }}
+        >
+          <LiveDot />
+          <MyazaText
+            variant="bodySmall"
+            color={colors.primary}
+            style={{
+              fontSize: 11,
+              fontWeight: '600',
+              letterSpacing: 0.6,
+              textTransform: 'uppercase',
+            }}
+          >
+            Address check active
+          </MyazaText>
+        </View>
+        <MyazaText variant="bodyMedium" style={{ fontWeight: '600', marginTop: spacing.sm }}>
+          Your address confirms itself from here
+        </MyazaText>
+        <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 2 }}>
+          Nothing else for you to do. Carry on as normal.
+        </MyazaText>
+      </View>
+
+      {/* Web's h-8 nodes here, against the primer's h-10. */}
+      <MilestoneTrack milestones={MILESTONES} nodeSize={32} />
+    </View>
+  );
+}
+
+/** The badge's pulse — the one thing on the card that says "running now". */
+function LiveDot(): React.ReactElement {
+  const { colors } = useTheme();
+  const reduceMotion = useReduceMotion();
+  const pulse = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (reduceMotion) return undefined;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 1, duration: 900, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 0, duration: 0, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse, reduceMotion]);
+
+  return (
+    <View style={{ width: 8, height: 8, alignItems: 'center', justifyContent: 'center' }}>
+      {reduceMotion ? null : (
+        <Animated.View
+          style={{
+            position: 'absolute',
+            width: 8,
+            height: 8,
+            borderRadius: radius.full,
+            backgroundColor: colors.primary,
+            opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.6, 0] }),
+            transform: [
+              { scale: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 2.2] }) },
+            ],
+          }}
+        />
+      )}
+      <View
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: radius.full,
+          backgroundColor: colors.primary,
+        }}
+      />
+    </View>
+  );
+}

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

package/src/components/StepView.tsx

@@ -12,12 +12,20 @@ import { SubmittedStep } from '../screens/SubmittedStep';
 import { QuestionnaireStep } from '../screens/QuestionnaireStep';
 import { ContactVerificationStep } from '../screens/ContactVerificationStep';
 import { ProofOfAddressStep } from '../screens/ProofOfAddressStep';
+import {
+  AddressEntranceStep,
+  AddressPinStep,
+  AddressReviewStep,
+  AddressSearchStep,
+} from '../screens/address';
 import { CountrySelectStep } from '../screens/CountrySelectStep';
 import { BusinessDetailsStep } from '../screens/BusinessDetailsStep';
 import { BusinessKeyPeopleStep } from '../screens/BusinessKeyPeopleStep';
 import { BusinessDocumentsStep } from '../screens/BusinessDocumentsStep';
 import { ApplicantRoleStep } from '../screens/ApplicantRoleStep';
 import { NfcStep } from '../screens/NfcStep';
+import { MultiIdProgress } from './MultiIdProgress';
+import { useMultiIdPlan } from '../lib/use-multi-id-plan';
 
 // ---------------------------------------------------------------------------
 // The step router — which screen a step renders.
@@ -26,7 +34,31 @@ import { NfcStep } from '../screens/NfcStep';
 // and the step order, and nothing else.
 // ---------------------------------------------------------------------------
 
+/** The steps a multi-ID run walks once PER ID — the ones whose screen is about
+ *  one particular check and therefore needs the position strip above it. */
+const MULTI_ID_STEPS: readonly KYCStep[] = [
+  'id-type',
+  'id-input',
+  'document-capture',
+  'nfc',
+  'liveness',
+];
+
+/** Wraps a step's screen with the multi-ID position strip when a run is active. */
 export function StepView({ step, onClose }: { step: KYCStep; onClose: () => void }): React.ReactElement {
+  const plan = useMultiIdPlan();
+  if (plan && MULTI_ID_STEPS.includes(step)) {
+    return (
+      <View style={{ flex: 1 }}>
+        <MultiIdProgress plan={plan} />
+        <View style={{ flex: 1 }}>{stepScreen(step, onClose)}</View>
+      </View>
+    );
+  }
+  return stepScreen(step, onClose);
+}
+
+function stepScreen(step: KYCStep, onClose: () => void): React.ReactElement {
   switch (step) {
     case 'consent':
       return <ConsentStep />;
@@ -52,6 +84,17 @@ export function StepView({ step, onClose }: { step: KYCStep; onClose: () => void
       return <ContactVerificationStep key="contact-phone" channel="phone" />;
     case 'proof-of-address':
       return <ProofOfAddressStep />;
+    // The address flow, in order: find it, confirm it, show it, commit it.
+    // 'address-collection' is the PIN step and keeps that wire name so older
+    // session progress restores cleanly.
+    case 'address-search':
+      return <AddressSearchStep />;
+    case 'address-collection':
+      return <AddressPinStep />;
+    case 'address-entrance':
+      return <AddressEntranceStep />;
+    case 'address-review':
+      return <AddressReviewStep />;
     case 'country-select':
       return <CountrySelectStep />;
     case 'business-details':

package/src/components/StickyActions.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useTheme } from './runtime';
+
+/**
+ * A step's primary actions, held at the bottom edge of a viewport-filling
+ * body. Mirrors the web SDK's StickyActions.
+ *
+ * A step that carries a map or a street panorama fills a phone with a surface
+ * that OWNS every touch: dragging it moves the map, never the page, so on a
+ * small screen the Continue button beneath it could only be reached by finding
+ * a strip of margin to scroll on. Holding the actions under a bounded scroll
+ * view means the applicant never has to get past the map to move on, and
+ * everything else still scrolls under them.
+ *
+ * Needs a BOUNDED parent: the step must be listed in KycFlow's fillsViewport
+ * set, where the sheet hands it a flex:1 box padded `spacing.md`. The footer's
+ * negative margins cancel that padding so the bar meets the sheet's edge, and
+ * the same padding is restored inside so the buttons keep their gutter.
+ */
+export function StickyActions({
+  children,
+  actions,
+}: {
+  children: React.ReactNode;
+  actions: React.ReactNode;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View style={{ flex: 1 }}>
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingBottom: spacing.sm }}
+        keyboardShouldPersistTaps="handled"
+      >
+        {children}
+      </ScrollView>
+      <View
+        style={{
+          marginHorizontal: -spacing.md,
+          marginBottom: -spacing.md,
+          paddingHorizontal: spacing.md,
+          paddingTop: spacing.sm,
+          paddingBottom: spacing.md,
+          backgroundColor: colors.background,
+          borderTopWidth: StyleSheet.hairlineWidth,
+          borderTopColor: colors.border,
+        }}
+      >
+        {actions}
+      </View>
+    </View>
+  );
+}

package/src/components/dialCodeRows.ts

@@ -0,0 +1,64 @@
+import { groupCountriesByRegion, pinGeoRow } from '../config/regions';
+import type { DialCodeOption } from './DialCodePicker';
+
+// ---------------------------------------------------------------------------
+// What the country sheet lists, as data. Extracted from DialCodePicker
+// (200-line rule) so the FlatList only renders: the search, the pinned geo
+// row and the optional REGION grouping all decide here, and a unit test reads
+// the result without mounting a sheet. Grouping is what the address-scope
+// country control asks for (user decision 2026-09-06): its sheet reads like
+// the web's region menu and the country-select step — a continent header,
+// then its countries A–Z — rather than one 240-row alphabet. Mirrors
+// Flutter's dial_code_rows.dart.
+// ---------------------------------------------------------------------------
+
+export type DialCodeItem =
+  | { kind: 'row'; option: DialCodeOption }
+  | { kind: 'header'; region: string };
+
+/**
+ * Match the name, the ISO code, or the dial code with or without its '+',
+ * because people search for "+234", "234" and "Nigeria" in equal measure.
+ */
+export function filterDialCodeOptions(options: DialCodeOption[], query: string): DialCodeOption[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return options;
+  const bare = q.replace(/^\+/, '');
+  return options.filter(
+    (o) =>
+      o.name.toLowerCase().includes(q) ||
+      o.code.toLowerCase() === q ||
+      (o.dialCode != null && o.dialCode.replace(/^\+/, '').startsWith(bare)),
+  );
+}
+
+/**
+ * The sheet's items over the ALREADY-FILTERED options: where they appear to be
+ * first (lifted out of the alphabet, still subject to the search), then the
+ * rest — flat in the given order, or under region headers when `grouped`.
+ */
+export function buildDialCodeItems(
+  visible: DialCodeOption[],
+  geoCountry: string | null | undefined,
+  grouped: boolean,
+): { geo: DialCodeOption | null; items: DialCodeItem[] } {
+  const { pinned: geo, rest } = pinGeoRow(visible, geoCountry, (o) => o.code);
+  const items: DialCodeItem[] = geo ? [{ kind: 'row', option: geo }] : [];
+  if (!grouped) {
+    for (const option of rest) items.push({ kind: 'row', option });
+    return { geo, items };
+  }
+  const byCode = new Map(rest.map((o) => [o.code.toUpperCase(), o]));
+  for (const group of groupCountriesByRegion(rest.map((o) => o.code))) {
+    items.push({ kind: 'header', region: group.region });
+    for (const entry of group.countries) {
+      const option = byCode.get(entry.code);
+      if (option) items.push({ kind: 'row', option });
+    }
+  }
+  return { geo, items };
+}
+
+export function dialCodeItemKey(item: DialCodeItem): string {
+  return item.kind === 'header' ? `region:${item.region}` : item.option.code;
+}

package/src/components/glass/FloatingSheet.tsx

@@ -8,9 +8,8 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import { initialWindowMetrics } from 'react-native-safe-area-context';
-
-import { radius, spacing } from '../../config/theme';
+import { spacing } from '../../config/theme';
+import { displayCornerRadius } from '../../lib/screen-corners';
 import { useTheme } from '../runtime';
 import { GlassIconButton } from '../GlassIconButton';
 import { GlassSheet } from './GlassSheet';
@@ -18,10 +17,12 @@ import { GlassSheet } from './GlassSheet';
 // ---------------------------------------------------------------------------
 // FloatingSheet — the shell every bottom sheet in the SDK sits in.
 //
-// It floats: inset from all three edges and rounded on every corner, rather
-// than welded to the bottom of the screen. That is what the glass is for. A
-// panel flush to the edge reads as part of the screen, so seeing through it
-// says nothing; a detached one reads as a layer that has risen above the flow.
+// A floating card: detached from the screen's edges by a TIGHT gap (8px), all
+// four corners rounded, a grab handle centred under a whisper of padding. The
+// gap is deliberately small — the earlier float swam in margin and spent
+// screen height a phone does not have, while welding it flush read as a
+// different surface from the SDK's glass language. The 8px is what says
+// "card above the page" without costing content room.
 //
 // It offers three ways out, because a sheet that can only be dismissed one way
 // is a trap for whichever user does not find that way:
@@ -34,6 +35,28 @@ import { GlassSheet } from './GlassSheet';
 // apart on handle size, dismiss threshold and safe-area maths.
 // ---------------------------------------------------------------------------
 
+/** Detached from the screen edges by a tight, even gap. */
+const FLOAT_GAP = spacing.sm;
+
+/**
+ * The float's corner radius is PRESENTATION GRAMMAR, not branding — and it is
+ * computed the way Apple computes nested corners: CONCENTRIC with the display,
+ * i.e. the device's own corner radius minus the gap, so the sheet's curve runs
+ * parallel to the phone's. Square-cornered screens have no curve to be
+ * concentric with, so they keep the share-sheet look instead. Never the
+ * brand-scaled `radius` tokens: an org whose buttons are 4px square should not
+ * get a squared-off bottom sheet.
+ */
+const screenRadius = displayCornerRadius();
+const SHEET_RADIUS = screenRadius > 0 ? Math.max(screenRadius - FLOAT_GAP, 16) : 38;
+
+/**
+ * The corner curve eats into the header, so the close button's inset SCALES
+ * with the radius — ~0.42·R is where the system sheet sits its own X. A fixed
+ * inset that cleared 38pt corners sat ON the curve at a 16-class phone's 47.
+ */
+const CLOSE_INSET = Math.max(14, Math.round(SHEET_RADIUS * 0.42));
+
 /** How far down a drag must travel before release dismisses instead of springing back. */
 const DISMISS_DISTANCE = 90;
 /** A flick dismisses at any distance — velocity is intent, distance is only evidence of it. */
@@ -121,14 +144,16 @@ export function FloatingSheet({
     }),
   ).current;
 
-  // Read once at module init like the rest of the SDK: these sheets are modal,
-  // so there is no provider above them to read live insets from.
-  const safeBottom = initialWindowMetrics?.insets?.bottom ?? 0;
-
+  // A TIGHT float: detached from the edges by a whisper (8px), not welded to
+  // them and not swimming in margin. The gap is what says "card above the
+  // page" — any more of it and the sheet loses height it needs for content.
   const panel: ViewStyle = {
-    marginHorizontal: spacing.md,
-    // Clear the home indicator, and never sit flush even where there is none.
-    marginBottom: bottomOffset + Math.max(safeBottom, spacing.md),
+    marginHorizontal: FLOAT_GAP,
+    // The CARD sits low, like the system share sheet: a tight 8px off the
+    // screen edge, with the home indicator riding ON the card. Reserving the
+    // whole safe-area under it left the sheet hovering mid-air. The CONTENT
+    // still clears the indicator — that inset moves INSIDE the card (below).
+    marginBottom: bottomOffset > 0 ? bottomOffset + FLOAT_GAP : FLOAT_GAP,
   };
 
   return (
@@ -147,7 +172,18 @@ export function FloatingSheet({
         <Animated.View style={[panel, { transform: [{ translateY }] }]}>
           {/* Swallows taps so only the backdrop dismisses. */}
           <Pressable onPress={() => undefined}>
-            <GlassSheet style={{ borderRadius: radius.xl, maxHeight, overflow: 'hidden' }}>
+            <GlassSheet
+              style={{
+                // Floating card: all four corners round, not just the top
+                // pair — at the SYSTEM sheet's radius, never the brand scale.
+                borderRadius: SHEET_RADIUS,
+                maxHeight,
+                // No bottom padding, deliberately: a scrolling body runs all
+                // the way to the lip and is CLIPPED by the curve — content
+                // sliding under the rounded edge, the way the system does it.
+                overflow: 'hidden',
+              }}
+            >
               {/* The drag lives on the header, NOT the whole panel: bodies here
                   scroll, and a panel-wide responder fights the list for every
                   downward swipe. */}
@@ -155,9 +191,15 @@ export function FloatingSheet({
                 {...pan.panHandlers}
                 style={{
                   flexDirection: 'row',
-                  alignItems: 'center',
-                  paddingTop: spacing.sm,
-                  paddingHorizontal: spacing.sm,
+                  // TOP, not centre. Centred, the handle sits against the
+                  // tallest child, so the close button's height decided how far
+                  // down the panel the grabber sat. Each now hangs off the top
+                  // with its own offset, which is what puts the handle at the
+                  // lip where a grabber belongs. Matches the Flutter sheet.
+                  alignItems: 'flex-start',
+                  // Radius-proportional (CLOSE_INSET): deep concentric corners
+                  // need the button further from the edges than shallow ones.
+                  paddingHorizontal: CLOSE_INSET,
                 }}
               >
                 <View style={{ flex: 1 }} />
@@ -165,12 +207,22 @@ export function FloatingSheet({
                 <View
                   style={{
                     width: 36,
-                    height: 4,
-                    borderRadius: 2,
+                    height: 5,
+                    borderRadius: 2.5,
+                    marginTop: 8,
                     backgroundColor: colors.border,
                   }}
                 />
-                <View style={{ flex: 1, alignItems: 'flex-end' }}>
+                {/* Pushed down as well as in: the button's own box already
+                    holds the icon off its edges, so set flush to the top it
+                    hung off the corner instead of tucking into it. */}
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: 'flex-end',
+                    marginTop: Math.min(16, Math.max(6, CLOSE_INSET - 6)),
+                  }}
+                >
                   <GlassIconButton
                     icon="close"
                     onPress={onClose}

package/src/components/glass/GlassSheet.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../runtime';
 import { GlassSurface } from './GlassSurface';
@@ -29,9 +29,21 @@ export interface GlassSheetProps {
 }
 
 export function GlassSheet({ children, style }: GlassSheetProps): React.ReactElement {
-  const { colors } = useTheme();
+  const { colors, mode } = useTheme();
   return (
     <GlassSurface glassStyle="regular" fallbackColor={colors.background} style={style}>
+      {/* A WHISPER of scrim between the glass and the content — the sheet
+          must stay glass (the flow showing through is the point). This only
+          takes the edge off a strongly tinted flow so body text keeps
+          contrast; anything critical sits on its own alert panel besides.
+          Slightly heavier in light mode, where the wash was worst. */}
+      <View
+        pointerEvents="none"
+        style={[
+          StyleSheet.absoluteFill,
+          { backgroundColor: colors.background, opacity: mode === 'light' ? 0.35 : 0.18 },
+        ]}
+      />
       {children}
     </GlassSurface>
   );