@myazahq/kyc-sdk-react-native 2.0.0

package/src/screens/IdInputStep.tsx

@@ -0,0 +1,79 @@
+import React, { useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { ID_TYPES } from '../config/idTypes';
+import { validateIdNumber } from '../services/validators';
+import type { IdType } from '../types/config';
+import { useKyc, useKycConfig } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaInput } from '../components/MyazaInput';
+import { MyazaButton } from '../components/MyazaButton';
+
+// Number-only ID entry (BVN / NIN / vNIN) — 1:1 with the Flutter SDK's
+// IdInputScreen. Client-side format validation only; no OCR pre-fill. The step
+// title/description live in the header.
+
+function hintFor(def: { label: string; digits?: number } | null): string {
+  if (!def) return 'Enter your ID number';
+  if (def.digits != null) return `Enter ${def.digits}-digit ${def.label}`;
+  return `Enter your ${def.label}`;
+}
+
+export function IdInputStep(): React.ReactElement {
+  const config = useKycConfig();
+  const selectedIdType = useKyc((s) => s.selectedIdType);
+  const setIdNumber = useKyc((s) => s.setIdNumber);
+  const nextStep = useKyc((s) => s.nextStep);
+
+  const [value, setValue] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const def = useMemo(() => Object.values(ID_TYPES).flat().find((t) => t.key === selectedIdType) ?? null, [selectedIdType]);
+  const isDigits = def?.digits !== undefined;
+
+  const valid = useMemo(() => {
+    if (!selectedIdType || !value.trim()) return false;
+    return validateIdNumber(config.country, selectedIdType as IdType, value).valid;
+  }, [config.country, selectedIdType, value]);
+
+  const handleChange = (text: string) => {
+    // Match Flutter: BVN/NIN are digits-only.
+    const next = isDigits ? text.replace(/[^0-9]/g, '') : text;
+    setValue(next);
+    if (selectedIdType && next.trim()) {
+      const result = validateIdNumber(config.country, selectedIdType as IdType, next);
+      setError(result.valid ? null : result.message ?? null);
+    } else {
+      setError(null);
+    }
+  };
+
+  const handleContinue = () => {
+    if (!valid) return;
+    setIdNumber(value.trim());
+    nextStep();
+  };
+
+  return (
+    <View>
+      {def ? (
+        <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+          {def.label}
+        </MyazaText>
+      ) : null}
+      <MyazaInput
+        value={value}
+        onChangeText={handleChange}
+        placeholder={hintFor(def)}
+        error={error}
+        keyboardType={isDigits ? 'number-pad' : 'default'}
+        autoCapitalize={isDigits ? 'none' : 'characters'}
+        maxLength={def?.digits}
+        autoFocus
+      />
+      <View style={{ height: spacing.xl }} />
+      <MyazaButton label="Continue" onPress={valid ? handleContinue : undefined} disabled={!valid} />
+    </View>
+  );
+}

package/src/screens/IdTypeStep.tsx

@@ -0,0 +1,142 @@
+import React, { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { ID_TYPES } from '../config/idTypes';
+import type { IdType, IdTypeDefinition } from '../types/config';
+import { useKyc, useKycConfig, useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaButton } from '../components/MyazaButton';
+import { MyazaPulseLoader } from '../components/MyazaPulseLoader';
+import { Icon, type IconName } from '../components/Icon';
+
+// ID-type picker — 1:1 with the Flutter SDK's IdTypeScreen: a list of cards
+// (icon tile + label + radio circle), select-on-tap, Continue to advance.
+
+const ICON_FOR: Record<string, IconName> = {
+  bvn: 'landmark', // Bank Verification Number → bank/landmark
+  nin: 'fingerprint',
+  vnin: 'fingerprint',
+  passport: 'passport',
+  'drivers-license': 'id-card',
+  pvc: 'contact', // Permanent Voter's Card
+  'ghana-card': 'id-card',
+  voters: 'contact',
+  ssnit: 'id-card',
+  'national-id': 'id-card',
+  cni: 'id-card',
+  'residence-card': 'id-card',
+};
+
+export function IdTypeStep(): React.ReactElement {
+  const { colors } = useTheme();
+  const config = useKycConfig();
+  const serverConfig = useKyc((s) => s.serverConfig);
+  const selectedIdType = useKyc((s) => s.selectedIdType);
+  const setIdType = useKyc((s) => s.setIdType);
+  const nextStep = useKyc((s) => s.nextStep);
+
+  const available = useMemo<IdTypeDefinition[]>(() => {
+    const allForCountry = ID_TYPES[config.country] ?? [];
+    const requested = config.idTypes?.length
+      ? allForCountry.filter((t) => (config.idTypes as IdType[]).includes(t.key))
+      : [...allForCountry];
+    if (serverConfig.status === 'ready') {
+      const granted = new Set(
+        serverConfig.idTypes.filter((t) => t.country === config.country).map((t) => t.idType),
+      );
+      return requested.filter((t) => granted.has(t.key));
+    }
+    if (serverConfig.status === 'loading') return [];
+    return requested;
+  }, [config.country, config.idTypes, serverConfig]);
+
+  if (serverConfig.status === 'loading') {
+    return (
+      <View style={{ paddingVertical: spacing.xl, alignItems: 'center' }}>
+        <MyazaPulseLoader />
+      </View>
+    );
+  }
+
+  if (serverConfig.status === 'ready' && available.length === 0) {
+    return (
+      <View
+        style={{
+          padding: spacing.md,
+          borderRadius: radius.md,
+          backgroundColor: colors.errorBg,
+          borderWidth: 1,
+          borderColor: `${colors.error}4D`,
+        }}
+      >
+        <MyazaText variant="bodyMedium" color={colors.error}>
+          No ID types are enabled for your organization. Contact your administrator to request access.
+        </MyazaText>
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      {available.map((t) => {
+        const selected = selectedIdType === t.key;
+        return (
+          <Pressable
+            key={t.key}
+            onPress={() => setIdType(t.key)}
+            style={{
+              marginBottom: spacing.sm,
+              borderRadius: radius.md,
+              backgroundColor: selected ? colors.primary50 : colors.background,
+              borderWidth: selected ? 1.5 : 1,
+              borderColor: selected ? colors.primary : colors.border,
+              padding: spacing.md,
+              flexDirection: 'row',
+              alignItems: 'center',
+              shadowColor: colors.textDark,
+              shadowOpacity: 0.05,
+              shadowRadius: 8,
+              shadowOffset: { width: 0, height: 2 },
+              elevation: 1,
+            }}
+          >
+            <View
+              style={{
+                width: 44,
+                height: 44,
+                borderRadius: radius.sm,
+                backgroundColor: selected ? colors.primary100 : colors.primary50,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Icon name={ICON_FOR[t.key] ?? 'credit-card'} size={22} color={selected ? colors.primary : colors.textSecondary} />
+            </View>
+            <View style={{ width: spacing.md }} />
+            <MyazaText variant="label" style={{ flex: 1, fontWeight: '600' }}>
+              {t.label}
+            </MyazaText>
+            <View style={{ width: spacing.md }} />
+            <View
+              style={{
+                width: 22,
+                height: 22,
+                borderRadius: 11,
+                borderWidth: 1.5,
+                borderColor: selected ? colors.primary : colors.gray300,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {selected ? <View style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: colors.primary }} /> : null}
+            </View>
+          </Pressable>
+        );
+      })}
+
+      <View style={{ height: spacing.lg }} />
+      <MyazaButton label="Continue" onPress={selectedIdType ? nextStep : undefined} disabled={!selectedIdType} />
+    </View>
+  );
+}

package/src/screens/LivenessAvatar.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Image } from 'react-native';
+
+import { useTheme } from '../components/runtime';
+import { Icon } from '../components/Icon';
+import type { LivenessChallenge } from '../liveness/types';
+
+// Animated GIF avatar demonstrating the requested gesture — the RN mirror of the
+// web/Flutter `LivenessAvatar`. Shows the same Nod/Turn/Blink/Smile GIFs in a
+// circular badge (primary-tinted, like Flutter), sliding up + fading in when the
+// challenge changes. RN's <Image> animates GIFs natively.
+
+const GIFS: Record<LivenessChallenge, number> = {
+  nod: require('../assets/liveness/Nod.gif'),
+  turn: require('../assets/liveness/Turn.gif'),
+  blink: require('../assets/liveness/Blink.gif'),
+  smile: require('../assets/liveness/Smile.gif'),
+};
+
+const SIZE = 96;
+
+export function LivenessAvatar({ challenge }: { challenge: LivenessChallenge }): React.ReactElement {
+  const { colors } = useTheme();
+  const [displayed, setDisplayed] = useState<LivenessChallenge>(challenge);
+  const [broken, setBroken] = useState(false);
+  const anim = useRef(new Animated.Value(1)).current;
+
+  // Slide-up + fade transition when the challenge changes (mirrors Flutter's
+  // AnimatedSwitcher: Offset(0, 0.4) → 0, easeOutCubic, ~350ms).
+  useEffect(() => {
+    if (challenge === displayed) return;
+    anim.setValue(0);
+    setDisplayed(challenge);
+    setBroken(false);
+    Animated.timing(anim, {
+      toValue: 1,
+      duration: 350,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [challenge, displayed, anim]);
+
+  return (
+    <Animated.View
+      style={{
+        width: SIZE,
+        height: SIZE,
+        borderRadius: SIZE / 2,
+        backgroundColor: `${colors.primary}1A`, // ~10% primary (primary100 tint)
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: anim,
+        transform: [{ translateY: anim.interpolate({ inputRange: [0, 1], outputRange: [SIZE * 0.4, 0] }) }],
+      }}
+    >
+      {broken ? (
+        <Icon name="scan-face" size={40} color={colors.primary} />
+      ) : (
+        <Image
+          source={GIFS[displayed]}
+          style={{ width: '100%', height: '100%' }}
+          resizeMode="cover"
+          onError={() => setBroken(true)}
+        />
+      )}
+    </Animated.View>
+  );
+}