@kernaq/verify-react-native 2.0.0 → 2.0.2

package/src/steps/ResultStep.tsx

@@ -1,26 +1,34 @@
+/**
+ * ResultStep — no emoji, Unicode geometric icons, detail rows matching web v2.
+ */
 import React from 'react'
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 import type { ResolvedTheme } from '../theme'
 import type { VerifyLocale, VerifyResult, VerifyVerdict } from '../types'
 
 interface Props {
-  theme: ResolvedTheme
-  locale: VerifyLocale
-  result: VerifyResult | null
-  error: string | null
+  theme:   ResolvedTheme
+  locale:  VerifyLocale
+  result:  VerifyResult | null
+  error:   string | null
   onRetry: () => void
 }
 
-const ICONS: Record<VerifyVerdict, string> = {
-  pass:   '✅',
-  fail:   '❌',
-  review: '⏳',
+// Unicode block characters — no emoji, render cleanly on all platforms
+const ICON: Record<VerifyVerdict, string> = {
+  pass:   '\u2714',   // ✔ heavy check mark
+  fail:   '\u2718',   // ✘ heavy ballot X
+  review: '\u29D6',   // ⧖ hourglass
 }
-
 const ICON_BG: Record<VerifyVerdict, string> = {
-  pass:   '#d1fae5',
+  pass:   '#dcfce7',
   fail:   '#fee2e2',
-  review: '#fef3c7',
+  review: '#fef9c3',
+}
+const ICON_COLOR: Record<VerifyVerdict, string> = {
+  pass:   '#16a34a',
+  fail:   '#dc2626',
+  review: '#ca8a04',
 }
 
 export function ResultStep({ theme, locale, result, error, onRetry }: Props) {
@@ -29,18 +37,19 @@ export function ResultStep({ theme, locale, result, error, onRetry }: Props) {
   if (!result) {
     return (
       <View style={s.container}>
-        <View style={[s.iconWrap, { backgroundColor: '#fee2e2' }]}>
-          <Text style={s.icon}>❌</Text>
+        <View style={[s.iconBox, { backgroundColor: ICON_BG.fail }]}>
+          <Text style={[s.icon, { color: ICON_COLOR.fail }]}>{ICON.fail}</Text>
         </View>
         <Text style={s.title}>{locale.result_fail_title}</Text>
         <Text style={s.body}>{error ?? locale.result_fail_body}</Text>
         <TouchableOpacity style={s.btn} onPress={onRetry} activeOpacity={0.85}>
-          <Text style={s.btnText}>{locale.result_retry_btn}</Text>
+          <Text style={s.btnText}>Try again</Text>
         </TouchableOpacity>
       </View>
     )
   }
 
+  const v = result.verdict
   const titles: Record<VerifyVerdict, string> = {
     pass:   locale.result_pass_title,
     fail:   locale.result_fail_title,
@@ -52,16 +61,37 @@ export function ResultStep({ theme, locale, result, error, onRetry }: Props) {
     review: locale.result_review_body,
   }
 
+  const rows: Array<{ label: string; value: string; ok?: boolean; bad?: boolean }> = [
+    { label: 'Verdict',    value: v.charAt(0).toUpperCase() + v.slice(1), ok: v === 'pass', bad: v === 'fail' },
+    { label: 'Risk score', value: String(result.score ?? '—') },
+    { label: 'Face match', value: result.faceMatch ? 'Confirmed' : 'Not confirmed', ok: result.faceMatch, bad: !result.faceMatch },
+    { label: 'Liveness',   value: result.isLive    ? 'Confirmed' : 'Not confirmed', ok: result.isLive,    bad: !result.isLive },
+  ]
+
   return (
     <View style={s.container}>
-      <View style={[s.iconWrap, { backgroundColor: ICON_BG[result.verdict] }]}>
-        <Text style={s.icon}>{ICONS[result.verdict]}</Text>
+      <View style={[s.iconBox, { backgroundColor: ICON_BG[v] }]}>
+        <Text style={[s.icon, { color: ICON_COLOR[v] }]}>{ICON[v]}</Text>
+      </View>
+      <Text style={s.title}>{titles[v]}</Text>
+      <Text style={s.body}>{bodies[v]}</Text>
+
+      <View style={s.details}>
+        {rows.map((row) => (
+          <View key={row.label} style={s.row}>
+            <Text style={s.rowLabel}>{row.label}</Text>
+            <Text style={[
+              s.rowVal,
+              row.ok  && s.rowOk,
+              row.bad && s.rowBad,
+            ]}>{row.value}</Text>
+          </View>
+        ))}
       </View>
-      <Text style={s.title}>{titles[result.verdict]}</Text>
-      <Text style={s.body}>{bodies[result.verdict]}</Text>
-      {result.verdict === 'fail' && (
+
+      {v === 'fail' && (
         <TouchableOpacity style={s.btn} onPress={onRetry} activeOpacity={0.85}>
-          <Text style={s.btnText}>{locale.result_retry_btn}</Text>
+          <Text style={s.btnText}>Try again</Text>
         </TouchableOpacity>
       )}
     </View>
@@ -71,38 +101,72 @@ export function ResultStep({ theme, locale, result, error, onRetry }: Props) {
 const styles = (t: ResolvedTheme) =>
   StyleSheet.create({
     container: {
-      padding: 40,
+      flex: 1,
+      padding: 28,
       alignItems: 'center',
-      gap: 12,
+      gap: 14,
+      justifyContent: 'center',
     },
-    iconWrap: {
-      width: 76,
-      height: 76,
-      borderRadius: 38,
+    iconBox: {
+      width: 52,
+      height: 52,
+      borderRadius: 14,
       alignItems: 'center',
       justifyContent: 'center',
-      marginBottom: 8,
+      marginBottom: 4,
+    },
+    icon: {
+      fontSize: 22,
+      fontWeight: '700',
     },
-    icon: { fontSize: 34 },
     title: {
       fontSize: 20,
       fontWeight: '700',
       color: t.text,
       textAlign: 'center',
+      letterSpacing: -0.3,
     },
     body: {
-      fontSize: 14,
+      fontSize: 13.5,
       color: t.subtext,
       textAlign: 'center',
-      lineHeight: 21,
+      lineHeight: 19,
     },
+    details: {
+      width: '100%',
+      gap: 6,
+    },
+    row: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingVertical: 9,
+      paddingHorizontal: 12,
+      backgroundColor: t.surface,
+      borderRadius: 8,
+    },
+    rowLabel: {
+      fontSize: 12.5,
+      color: t.subtext,
+    },
+    rowVal: {
+      fontSize: 12.5,
+      fontWeight: '600',
+      color: t.text,
+    },
+    rowOk:  { color: '#16a34a' },
+    rowBad: { color: '#dc2626' },
     btn: {
-      marginTop: 8,
+      width: '100%',
       backgroundColor: t.accent,
-      borderRadius: t.radius,
-      paddingVertical: 14,
-      paddingHorizontal: 32,
+      borderRadius: t.radius - 4,
+      paddingVertical: 12,
       alignItems: 'center',
+      marginTop: 4,
+    },
+    btnText: {
+      color: t.accentInv,
+      fontSize: 14,
+      fontWeight: '600',
     },
-    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
   })

package/src/steps/SelfieStep.tsx

@@ -1,82 +1,136 @@
-import React from 'react'
+/**
+ * SelfieStep — auto-captures when face quality passes.
+ *
+ * Every 120ms:
+ *   1. takeSnapshot (quality 20) — tiny file, fast
+ *   2. analyseSelfieFrame() — brightness, blur, glare checks (mirrors web SDK)
+ *   3. Shows live guidance pill with the first failing check message
+ *   4. After HOLD_FRAMES consecutive passing frames (~1.5s) → takePhoto (full quality)
+ */
+import React, { useEffect, useRef, useState } from 'react'
 import {
   View,
   Text,
-  TouchableOpacity,
-  Image,
   StyleSheet,
   ActivityIndicator,
+  Animated,
 } from 'react-native'
-import { Camera } from 'react-native-vision-camera'
-import { useCamera } from '../hooks/useCamera'
+import { Camera, useCameraDevice } from 'react-native-vision-camera'
+import { analyseSelfieFrame } from '../quality'
 import type { ResolvedTheme } from '../theme'
 import type { VerifyLocale } from '../types'
 
+const HOLD_FRAMES = 12   // ~1.5s at 120ms per frame
+
 interface Props {
-  theme: ResolvedTheme
-  locale: VerifyLocale
+  theme:     ResolvedTheme
+  locale:    VerifyLocale
   onCapture: (uri: string) => void
-  onBack: () => void
 }
 
-export function SelfieStep({ theme, locale, onCapture, onBack }: Props) {
-  const { cameraRef, device, capturePhoto } = useCamera('front')
-  const [preview, setPreview] = React.useState<string | null>(null)
-  const [capturing, setCapturing] = React.useState(false)
+export function SelfieStep({ theme, locale, onCapture }: Props) {
+  const cameraRef    = useRef<Camera>(null)
+  const device       = useCameraDevice('front')
+  const [pill, setPill]       = useState('Align your face')
+  const [pillOk, setPillOk]   = useState(false)
+  const [capturing, setCapturing] = useState(false)
+  const readyFrames  = useRef(0)
+  const timerRef     = useRef<ReturnType<typeof setInterval> | null>(null)
+  const borderAnim   = useRef(new Animated.Value(0)).current   // 0 = white, 1 = green
   const s = styles(theme)
 
-  const handleCapture = async () => {
-    setCapturing(true)
-    const result = await capturePhoto()
-    setCapturing(false)
-    if (result) setPreview(result.uri)
-  }
+  // Animate oval border colour
+  useEffect(() => {
+    Animated.timing(borderAnim, {
+      toValue: pillOk ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start()
+  }, [pillOk, borderAnim])
+
+  const ovalBorder = borderAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['rgba(255,255,255,0.75)', '#4ade80'],
+  })
+
+  useEffect(() => {
+    if (!device || capturing) return
+
+    timerRef.current = setInterval(async () => {
+      if (!cameraRef.current || capturing) return
+      try {
+        // Fast low-quality snapshot for analysis only
+        const snap = await cameraRef.current.takeSnapshot({ quality: 20 })
+        const uri  = `file://${snap.path}`
+
+        const { passing, message } = await analyseSelfieFrame(uri, {
+          minBlurScore:  22,
+          minBrightness: 40,
+          maxBrightness: 220,
+        })
+
+        setPill(passing ? 'Hold still\u2026' : message)
+        setPillOk(passing)
+
+        if (passing) {
+          readyFrames.current++
+        } else {
+          readyFrames.current = 0
+        }
+
+        if (readyFrames.current >= HOLD_FRAMES) {
+          // Stop loop, take full-quality photo
+          clearInterval(timerRef.current!)
+          timerRef.current = null
+          setCapturing(true)
+          const full = await cameraRef.current.takePhoto({ qualityPrioritization: 'quality' })
+          onCapture(`file://${full.path}`)
+        }
+      } catch {
+        readyFrames.current = 0
+      }
+    }, 120)
+
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current)
+    }
+  }, [device, capturing, onCapture])
 
   if (!device) return <ActivityIndicator color={theme.accent} style={{ margin: 40 }} />
 
   return (
     <View style={s.container}>
-      <Text style={s.title}>{locale.selfie_title}</Text>
-      <Text style={s.subtitle}>{locale.selfie_instruction}</Text>
-
-      {preview ? (
-        <>
-          <Image source={{ uri: preview }} style={s.preview} resizeMode="cover" />
-          <TouchableOpacity style={s.btnPrimary} onPress={() => onCapture(preview)} activeOpacity={0.85}>
-            <Text style={s.btnText}>{locale.selfie_next_btn}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={s.btnSecondary} onPress={() => setPreview(null)} activeOpacity={0.75}>
-            <Text style={s.btnSecondaryText}>{locale.selfie_retake_btn}</Text>
-          </TouchableOpacity>
-        </>
-      ) : (
-        <>
-          <View style={s.viewport}>
-            <Camera
-              ref={cameraRef}
-              style={StyleSheet.absoluteFill}
-              device={device}
-              isActive={true}
-              photo={true}
-            />
-            {/* Oval face guide */}
-            <View style={s.ovalGuide} pointerEvents="none" />
-          </View>
-          <TouchableOpacity
-            style={[s.btnPrimary, capturing && s.btnDisabled]}
-            onPress={handleCapture}
-            disabled={capturing}
-            activeOpacity={0.85}
-          >
-            {capturing
-              ? <ActivityIndicator color="#fff" />
-              : <Text style={s.btnText}>{locale.selfie_capture_btn}</Text>
-            }
-          </TouchableOpacity>
-          <TouchableOpacity style={s.btnSecondary} onPress={onBack} activeOpacity={0.75}>
-            <Text style={s.btnSecondaryText}>{locale.doc_retake_btn}</Text>
-          </TouchableOpacity>
-        </>
+      <View style={s.heading}>
+        <Text style={s.title}>{locale.selfie_title}</Text>
+        <Text style={s.subtitle}>{locale.selfie_instruction}</Text>
+      </View>
+
+      <View style={s.viewport}>
+        <Camera
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          device={device}
+          isActive={!capturing}
+          photo
+        />
+
+        {/* Oval guide with animated border */}
+        <Animated.View
+          style={[s.oval, { borderColor: ovalBorder }]}
+          pointerEvents="none"
+        />
+
+        {/* Live guidance pill */}
+        <View style={[s.pill, pillOk && s.pillOk]} pointerEvents="none">
+          <Text style={s.pillText}>{pill}</Text>
+        </View>
+      </View>
+
+      {capturing && (
+        <View style={s.capturingRow}>
+          <ActivityIndicator color={theme.accent} size="small" />
+          <Text style={s.capturingText}>Capturing…</Text>
+        </View>
       )}
     </View>
   )
@@ -84,55 +138,70 @@ export function SelfieStep({ theme, locale, onCapture, onBack }: Props) {
 
 const styles = (t: ResolvedTheme) =>
   StyleSheet.create({
-    container: { padding: 24 },
-    title: { fontSize: 20, fontWeight: '700', color: t.text, marginBottom: 8 },
-    subtitle: { fontSize: 14, color: t.subtext, lineHeight: 20, marginBottom: 16 },
+    container: {
+      flex: 1,
+      padding: 20,
+      gap: 12,
+    },
+    heading: { gap: 4, alignItems: 'center' },
+    title: {
+      fontSize: 20,
+      fontWeight: '700',
+      color: t.text,
+      textAlign: 'center',
+      letterSpacing: -0.3,
+    },
+    subtitle: {
+      fontSize: 13,
+      color: t.subtext,
+      lineHeight: 19,
+      textAlign: 'center',
+    },
     viewport: {
-      width: '100%',
-      aspectRatio: 3 / 4,
-      borderRadius: t.radius,
+      flex: 1,
+      borderRadius: t.radius - 4,
       overflow: 'hidden',
       backgroundColor: '#000',
-      marginBottom: 16,
       position: 'relative',
-      alignSelf: 'center',
-      maxWidth: 280,
     },
-    ovalGuide: {
+    oval: {
       position: 'absolute',
-      top: '8%',
-      left: '12%',
-      right: '12%',
-      bottom: '8%',
+      left: '21%',
+      right: '21%',
+      top: '6%',
+      bottom: '6%',
       borderWidth: 2,
-      borderColor: 'rgba(255,255,255,0.7)',
       borderRadius: 999,
     },
-    preview: {
-      width: 240,
-      height: 320,
-      borderRadius: t.radius,
-      marginBottom: 16,
+    pill: {
+      position: 'absolute',
+      bottom: 14,
       alignSelf: 'center',
-      borderWidth: 1,
-      borderColor: t.border,
+      backgroundColor: 'rgba(0,0,0,0.65)',
+      borderRadius: 999,
+      paddingHorizontal: 16,
+      paddingVertical: 7,
+      borderWidth: 1.5,
+      borderColor: 'rgba(255,255,255,0.15)',
     },
-    btnPrimary: {
-      backgroundColor: t.accent,
-      borderRadius: t.radius,
-      paddingVertical: 14,
-      alignItems: 'center',
-      marginBottom: 10,
+    pillOk: {
+      backgroundColor: 'rgba(22,163,74,0.8)',
+      borderColor: 'rgba(134,239,172,0.5)',
     },
-    btnSecondary: {
-      backgroundColor: t.card,
-      borderRadius: t.radius,
-      paddingVertical: 14,
+    pillText: {
+      color: '#fff',
+      fontSize: 13,
+      fontWeight: '600',
+    },
+    capturingRow: {
+      flexDirection: 'row',
       alignItems: 'center',
-      borderWidth: 1,
-      borderColor: t.border,
+      justifyContent: 'center',
+      gap: 8,
+      paddingVertical: 8,
+    },
+    capturingText: {
+      fontSize: 13,
+      color: t.subtext,
     },
-    btnDisabled: { opacity: 0.6 },
-    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
-    btnSecondaryText: { color: t.text, fontSize: 15, fontWeight: '600' },
   })

package/src/theme.ts

@@ -1,24 +1,32 @@
 import type { VerifyTheme } from './types'
 
 export interface ResolvedTheme {
-  accent: string
-  bg: string
-  text: string
-  subtext: string
-  border: string
-  card: string
-  radius: number
+  accent:     string
+  accentInv:  string
+  bg:         string
+  surface:    string
+  surface2:   string
+  text:       string
+  subtext:    string
+  border:     string
+  errorBg:    string
+  errorText:  string
+  radius:     number
 }
 
 export function resolveTheme(theme?: VerifyTheme): ResolvedTheme {
   const dark = theme?.mode === 'dark'
   return {
-    accent:  theme?.accentColor     ?? '#111827',
-    bg:      theme?.backgroundColor ?? (dark ? '#1a1a2e' : '#ffffff'),
-    text:    theme?.textColor       ?? (dark ? '#f9fafb' : '#111827'),
-    subtext: theme?.subtextColor    ?? (dark ? '#9ca3af' : '#6b7280'),
-    border:  theme?.borderColor     ?? (dark ? '#374151' : '#e5e7eb'),
-    card:    theme?.cardColor       ?? (dark ? '#111827' : '#f9fafb'),
-    radius:  theme?.borderRadius    ?? 12,
+    accent:    theme?.accentColor     ?? (dark ? '#e5e7eb' : '#111827'),
+    accentInv: dark ? '#111827' : '#ffffff',
+    bg:        theme?.backgroundColor ?? (dark ? '#0f0f0f' : '#ffffff'),
+    surface:   theme?.cardColor       ?? (dark ? '#1a1a1a' : '#f7f7f7'),
+    surface2:  dark ? '#242424' : '#efefef',
+    text:      theme?.textColor       ?? (dark ? '#f5f5f5' : '#0f0f0f'),
+    subtext:   theme?.subtextColor    ?? (dark ? '#888888' : '#6b7280'),
+    border:    theme?.borderColor     ?? (dark ? '#2a2a2a' : '#e5e5e5'),
+    errorBg:   dark ? 'rgba(239,68,68,0.1)' : '#fef2f2',
+    errorText: dark ? '#f87171' : '#b91c1c',
+    radius:    theme?.borderRadius    ?? 14,
   }
 }