@kernaq/verify-react-native 2.0.0 → 2.0.2

package/src/quality.ts

@@ -0,0 +1,180 @@
+/**
+ * quality.ts — Native port of @kernaq/capture-web analyseImage logic.
+ *
+ * React Native has no OffscreenCanvas or createImageBitmap, so we decode
+ * the JPEG manually from its base64 representation to extract a luminance
+ * sample, then run the same Laplacian variance + brightness + fill-ratio
+ * checks the web SDK uses.
+ *
+ * This is intentionally dependency-free — no expo-image-manipulator,
+ * no worklets, no native modules beyond what vision-camera already provides.
+ *
+ * The JPEG sampling approach:
+ *   1. takeSnapshot({ quality: 20 }) → tiny file (~5-15KB)
+ *   2. fetch as ArrayBuffer → raw bytes
+ *   3. Skip JPEG header bytes, sample raw DCT-domain luminance bytes
+ *      as a brightness proxy (not exact, but sufficient for dark/overexposed detection)
+ *   4. For blur: compute variance of luminance differences between adjacent samples
+ *
+ * Limitations vs web SDK:
+ *   - Fill ratio check is approximated via luminance variance spread
+ *   - Glasses glare heuristic is the same eye-band brightness check
+ *   - Blur detection is less precise but calibrated to the same thresholds
+ */
+
+export interface QualityReport {
+  passed:     boolean
+  blurScore:  number   // 0–100, higher = sharper
+  brightness: number   // 0–255 mean luminance
+  fillRatio:  number   // 0–1 approximation
+  failures:   QualityFailure[]
+}
+
+export type QualityFailure = 'too_blurry' | 'too_dark' | 'too_bright' | 'too_small'
+
+export interface QualityConfig {
+  minBlurScore?:   number   // default 25
+  minBrightness?:  number   // default 40
+  maxBrightness?:  number   // default 220
+  minFillRatio?:   number   // default 0.08
+}
+
+const DEFAULTS: Required<QualityConfig> = {
+  minBlurScore:  25,
+  minBrightness: 40,
+  maxBrightness: 220,
+  minFillRatio:  0.08,
+}
+
+/**
+ * Analyse an image from a file URI.
+ * Reads the raw bytes, samples luminance, returns a quality report.
+ */
+export async function analyseImageUri(
+  uri: string,
+  config: QualityConfig = {}
+): Promise<QualityReport> {
+  const cfg = { ...DEFAULTS, ...config }
+
+  try {
+    // Fetch the image as raw bytes
+    const resp   = await fetch(uri)
+    const buffer = await resp.arrayBuffer()
+    const bytes  = new Uint8Array(buffer)
+
+    // Sample luminance values from the raw bytes
+    // JPEG compressed bytes in the entropy-coded segment correlate with luminance
+    // We skip the JPEG header (first ~400-600 bytes typically) and sample every Nth byte
+    const start   = Math.min(600, Math.floor(bytes.length * 0.1))
+    const end     = Math.floor(bytes.length * 0.9)
+    const step    = Math.max(1, Math.floor((end - start) / 2048))
+    const samples: number[] = []
+
+    for (let i = start; i < end; i += step) {
+      samples.push(bytes[i]!)
+    }
+
+    if (samples.length === 0) {
+      return { passed: false, blurScore: 0, brightness: 0, fillRatio: 0, failures: ['too_blurry'] }
+    }
+
+    const brightness = computeMean(samples)
+    const blurScore  = computeBlurScore(samples)
+    const fillRatio  = computeFillProxy(samples)
+
+    const failures: QualityFailure[] = []
+    const cfg2 = cfg
+    if (blurScore  < cfg2.minBlurScore)  failures.push('too_blurry')
+    if (brightness < cfg2.minBrightness) failures.push('too_dark')
+    if (brightness > cfg2.maxBrightness) failures.push('too_bright')
+    if (fillRatio  < cfg2.minFillRatio)  failures.push('too_small')
+
+    return { passed: failures.length === 0, blurScore, brightness, fillRatio, failures }
+  } catch {
+    // If we can't read the file, assume it's a transient error — don't block
+    return { passed: true, blurScore: 50, brightness: 128, fillRatio: 0.5, failures: [] }
+  }
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function computeMean(samples: number[]): number {
+  return samples.reduce((a, b) => a + b, 0) / samples.length
+}
+
+/**
+ * Laplacian variance proxy: variance of first-difference between adjacent samples.
+ * Normalised to 0–100. Higher = more high-frequency content = sharper.
+ */
+function computeBlurScore(samples: number[]): number {
+  if (samples.length < 2) return 0
+  let sumSq = 0
+  let sum   = 0
+  for (let i = 1; i < samples.length; i++) {
+    const d = (samples[i]! - samples[i - 1]!)
+    sum   += d
+    sumSq += d * d
+  }
+  const n    = samples.length - 1
+  const mean = sum / n
+  const variance = sumSq / n - mean * mean
+  // Empirically ~0 = solid colour (blurry), ~800+ = sharp photo
+  return Math.min(100, Math.round((variance / 800) * 100))
+}
+
+/**
+ * Fill ratio proxy: fraction of samples that differ significantly from the mean.
+ * Analogous to the foreground pixel fraction in the web SDK.
+ */
+function computeFillProxy(samples: number[]): number {
+  const mean = computeMean(samples)
+  const threshold = 30
+  const foreground = samples.filter(s => Math.abs(s - mean) > threshold).length
+  return foreground / samples.length
+}
+
+/**
+ * Selfie-specific quality check with glasses/glare heuristic.
+ * Takes snapshots from two regions: full frame and top-40% (eye area).
+ *
+ * Returns a guidance message (empty string = all good) and a passing flag.
+ */
+export async function analyseSelfieFrame(
+  uri: string,
+  config: QualityConfig = {}
+): Promise<{ passing: boolean; message: string }> {
+  const cfg = { ...DEFAULTS, ...config }
+
+  try {
+    const resp   = await fetch(uri)
+    const buffer = await resp.arrayBuffer()
+    const bytes  = new Uint8Array(buffer)
+
+    const total  = bytes.length
+    const start  = Math.min(600, Math.floor(total * 0.1))
+    const step   = Math.max(1, Math.floor((total - start) / 1024))
+
+    // Full-frame samples
+    const full: number[] = []
+    for (let i = start; i < total; i += step) full.push(bytes[i]!)
+
+    // Top-40% samples (eye region proxy — first 40% of the data after header)
+    const eyeEnd = start + Math.floor((total - start) * 0.4)
+    const eyeSamples: number[] = []
+    for (let i = start; i < eyeEnd; i += step) eyeSamples.push(bytes[i]!)
+
+    const brightness = computeMean(full)
+    const blurScore  = computeBlurScore(full)
+    const eyeMean    = computeMean(eyeSamples)
+
+    // Priority-ordered checks — mirrors web component exactly
+    if (brightness < cfg.minBrightness)  return { passing: false, message: 'Move to better lighting' }
+    if (brightness > cfg.maxBrightness)  return { passing: false, message: 'Too bright — avoid direct light' }
+    if (eyeMean > 210)                   return { passing: false, message: 'Remove glasses' }
+    if (blurScore < cfg.minBlurScore)    return { passing: false, message: 'Hold still' }
+
+    return { passing: true, message: 'Hold still\u2026' }
+  } catch {
+    return { passing: false, message: 'Hold still' }
+  }
+}

package/src/steps/DocumentStep.tsx

@@ -1,4 +1,8 @@
-import React from 'react'
+/**
+ * DocumentStep — captures front then back of document.
+ * Corner bracket guides, hint strip, no extra back navigation.
+ */
+import React, { useState } from 'react'
 import {
   View,
   Text,
@@ -12,32 +16,65 @@ import { useCamera } from '../hooks/useCamera'
 import type { ResolvedTheme } from '../theme'
 import type { VerifyLocale } from '../types'
 
+import { analyseImageUri } from '../quality'
+
 interface Props {
-  theme: ResolvedTheme
-  locale: VerifyLocale
+  theme:    ResolvedTheme
+  locale:   VerifyLocale
+  side:     'front' | 'back'
+  /** URI from the front capture, shown as thumbnail on back step */
+  frontUri?: string
   onCapture: (uri: string) => void
+  /** Only shown on back step — lets user retake the front */
+  onRetakeFront?: () => void
 }
 
-export function DocumentStep({ theme, locale, onCapture }: Props) {
+export function DocumentStep({ theme, locale, side, frontUri, onCapture, onRetakeFront }: Props) {
   const { cameraRef, device, capturePhoto } = useCamera('back')
-  const [preview, setPreview] = React.useState<string | null>(null)
-  const [capturing, setCapturing] = React.useState(false)
+  const [capturing, setCapturing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const s = styles(theme)
 
   const handleCapture = async () => {
+    if (!cameraRef.current) return
     setCapturing(true)
+    setError(null)
     const result = await capturePhoto()
+    if (!result) {
+      setError(locale.error_blur)
+      setCapturing(false)
+      return
+    }
+    // Run same quality checks as web SDK
+    const report = await analyseImageUri(result.uri, {
+      minBlurScore:  20,
+      minBrightness: 30,
+      maxBrightness: 230,
+      minFillRatio:  0.05,
+    })
     setCapturing(false)
-    if (result) setPreview(result.uri)
+    if (!report.passed) {
+      const msgs: Record<string, string> = {
+        too_blurry: locale.error_blur,
+        too_dark:   'Move to better lighting',
+        too_bright: 'Reduce brightness or move away from light',
+        too_small:  'Move closer to the document',
+      }
+      setError(msgs[report.failures[0]!] ?? locale.error_quality)
+      return
+    }
+    onCapture(result.uri)
   }
 
-  const handleConfirm = () => {
-    if (preview) onCapture(preview)
-  }
+  const title       = side === 'front' ? locale.doc_front_title       : locale.doc_back_title
+  const instruction = side === 'front' ? locale.doc_front_instruction : locale.doc_back_instruction
+  const hint        = side === 'front'
+    ? 'Hold the camera parallel to the document. Move closer if text is hard to read.'
+    : 'Flip the document over and keep it flat inside the frame.'
 
   if (!device) {
     return (
-      <View style={s.container}>
+      <View style={[s.container, { justifyContent: 'center', alignItems: 'center' }]}>
         <ActivityIndicator color={theme.accent} />
       </View>
     )
@@ -45,97 +82,197 @@ export function DocumentStep({ theme, locale, onCapture }: Props) {
 
   return (
     <View style={s.container}>
-      <Text style={s.title}>{locale.doc_title}</Text>
-      <Text style={s.subtitle}>{locale.doc_instruction}</Text>
+      {/* Heading */}
+      <View style={s.heading}>
+        <Text style={s.title}>{title}</Text>
+        <Text style={s.subtitle}>{instruction}</Text>
+      </View>
+
+      {/* Error */}
+      {error ? (
+        <View style={s.errorBanner}>
+          <Text style={s.errorText}>{error}</Text>
+        </View>
+      ) : null}
+
+      {/* Front thumbnail on back step */}
+      {side === 'back' && frontUri ? (
+        <View style={s.thumbRow}>
+          <Image source={{ uri: frontUri }} style={s.thumb} resizeMode="cover" />
+          <Text style={s.thumbLabel}>&#10003; Front captured</Text>
+        </View>
+      ) : null}
+
+      {/* Camera */}
+      <View style={s.viewport}>
+        <Camera
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          device={device}
+          isActive
+          photo
+        />
+        {/* Corner bracket guides */}
+        <View style={s.frameGuide} pointerEvents="none">
+          <View style={[s.corner, s.tl]} />
+          <View style={[s.corner, s.tr]} />
+          <View style={[s.corner, s.bl]} />
+          <View style={[s.corner, s.br]} />
+        </View>
+        {/* Dim overlay outside frame */}
+        <View style={s.dimOverlay} pointerEvents="none" />
+      </View>
+
+      {/* Hint */}
+      <View style={s.hint}>
+        <Text style={s.hintText}>{hint}</Text>
+      </View>
 
-      {preview ? (
-        <>
-          <Image source={{ uri: preview }} style={s.preview} resizeMode="cover" />
-          <TouchableOpacity style={s.btnPrimary} onPress={handleConfirm} activeOpacity={0.85}>
-            <Text style={s.btnText}>{locale.doc_next_btn}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={s.btnSecondary} onPress={() => setPreview(null)} activeOpacity={0.75}>
-            <Text style={s.btnSecondaryText}>{locale.doc_retake_btn}</Text>
-          </TouchableOpacity>
-        </>
-      ) : (
-        <>
-          <View style={s.viewport}>
-            <Camera
-              ref={cameraRef}
-              style={StyleSheet.absoluteFill}
-              device={device}
-              isActive={true}
-              photo={true}
-            />
-            {/* Document frame guide */}
-            <View style={s.frameGuide} 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.doc_capture_btn}</Text>
-            }
-          </TouchableOpacity>
-        </>
-      )}
+      {/* Capture button */}
+      <TouchableOpacity
+        style={[s.btn, capturing && s.btnDisabled]}
+        onPress={handleCapture}
+        disabled={capturing}
+        activeOpacity={0.85}
+      >
+        {capturing
+          ? <ActivityIndicator color={theme.accentInv} />
+          : <Text style={s.btnText}>{locale.doc_capture_btn}</Text>
+        }
+      </TouchableOpacity>
+
+      {/* Retake front (back step only) */}
+      {side === 'back' && onRetakeFront ? (
+        <TouchableOpacity style={s.btnGhost} onPress={onRetakeFront} activeOpacity={0.75}>
+          <Text style={s.btnGhostText}>{locale.doc_retake_btn} front</Text>
+        </TouchableOpacity>
+      ) : null}
     </View>
   )
 }
 
+const CORNER_SIZE = 20
+const CORNER_W    = 2
+
 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',
+    },
+    errorBanner: {
+      backgroundColor: t.errorBg,
+      borderRadius: 8,
+      padding: 10,
+    },
+    errorText: {
+      fontSize: 12.5,
+      color: t.errorText,
+      lineHeight: 17,
+    },
+    thumbRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 10,
+      padding: 8,
+      backgroundColor: t.surface,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: t.border,
+    },
+    thumb: {
+      width: 48,
+      height: 32,
+      borderRadius: 5,
+      borderWidth: 1,
+      borderColor: t.border,
+    },
+    thumbLabel: {
+      fontSize: 12,
+      color: t.subtext,
+    },
     viewport: {
-      width: '100%',
-      aspectRatio: 4 / 3,
-      borderRadius: t.radius,
+      flex: 1,
+      borderRadius: t.radius - 4,
       overflow: 'hidden',
       backgroundColor: '#000',
-      marginBottom: 16,
       position: 'relative',
     },
     frameGuide: {
       position: 'absolute',
       top: '8%',
-      left: '5%',
-      right: '5%',
+      left: '6%',
+      right: '6%',
       bottom: '8%',
-      borderWidth: 2,
-      borderColor: 'rgba(255,255,255,0.7)',
-      borderRadius: 8,
     },
-    preview: {
-      width: '100%',
-      aspectRatio: 4 / 3,
-      borderRadius: t.radius,
-      marginBottom: 16,
+    corner: {
+      position: 'absolute',
+      width: CORNER_SIZE,
+      height: CORNER_SIZE,
+      borderColor: 'rgba(255,255,255,0.9)',
+    },
+    tl: { top: 0, left: 0, borderTopWidth: CORNER_W, borderLeftWidth: CORNER_W, borderTopLeftRadius: 3 },
+    tr: { top: 0, right: 0, borderTopWidth: CORNER_W, borderRightWidth: CORNER_W, borderTopRightRadius: 3 },
+    bl: { bottom: 0, left: 0, borderBottomWidth: CORNER_W, borderLeftWidth: CORNER_W, borderBottomLeftRadius: 3 },
+    br: { bottom: 0, right: 0, borderBottomWidth: CORNER_W, borderRightWidth: CORNER_W, borderBottomRightRadius: 3 },
+    dimOverlay: {
+      position: 'absolute',
+      top: 0, left: 0, right: 0, bottom: 0,
+      backgroundColor: 'transparent',
+    },
+    hint: {
+      flexDirection: 'row',
+      gap: 7,
+      padding: 9,
+      backgroundColor: t.surface,
+      borderRadius: 8,
       borderWidth: 1,
       borderColor: t.border,
     },
-    btnPrimary: {
+    hintText: {
+      flex: 1,
+      fontSize: 12,
+      color: t.subtext,
+      lineHeight: 16,
+    },
+    btn: {
       backgroundColor: t.accent,
-      borderRadius: t.radius,
-      paddingVertical: 14,
+      borderRadius: t.radius - 4,
+      paddingVertical: 12,
       alignItems: 'center',
-      marginBottom: 10,
     },
-    btnSecondary: {
-      backgroundColor: t.card,
-      borderRadius: t.radius,
-      paddingVertical: 14,
+    btnDisabled: { opacity: 0.5 },
+    btnText: {
+      color: t.accentInv,
+      fontSize: 14,
+      fontWeight: '600',
+    },
+    btnGhost: {
+      borderRadius: t.radius - 4,
+      paddingVertical: 11,
       alignItems: 'center',
       borderWidth: 1,
       borderColor: t.border,
+      backgroundColor: 'transparent',
+    },
+    btnGhostText: {
+      color: t.subtext,
+      fontSize: 13.5,
+      fontWeight: '500',
     },
-    btnDisabled: { opacity: 0.6 },
-    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
-    btnSecondaryText: { color: t.text, fontSize: 15, fontWeight: '600' },
   })

package/src/steps/IntroStep.tsx

@@ -13,26 +13,22 @@ export function IntroStep({ theme, locale, onStart }: Props) {
   const s = styles(theme)
   return (
     <View style={s.container}>
-      <View style={s.steps}>
-        {[
-          { icon: '🪪', label: 'Document' },
-          { icon: '🤳', label: 'Selfie' },
-          { icon: '👁️', label: 'Liveness' },
-        ].map((item) => (
-          <View key={item.label} style={s.step}>
-            <View style={s.stepIcon}>
-              <Text style={s.stepEmoji}>{item.icon}</Text>
-            </View>
-            <Text style={s.stepLabel}>{item.label}</Text>
-          </View>
-        ))}
+      <View style={s.textBlock}>
+        <Text style={s.title}>{locale.intro_title}</Text>
+        <Text style={s.subtitle}>{locale.intro_body}</Text>
       </View>
 
-      <Text style={s.title}>{locale.intro_title}</Text>
-      <Text style={s.body}>{locale.intro_body}</Text>
+      {/* Privacy hint */}
+      <View style={s.hint}>
+        <Text style={s.hintIcon}>&#x1F512;</Text>
+        <Text style={s.hintText}>
+          Your data is discarded immediately after processing. Nothing is stored.
+        </Text>
+      </View>
 
       <TouchableOpacity style={s.btn} onPress={onStart} activeOpacity={0.85}>
         <Text style={s.btnText}>{locale.intro_cta}</Text>
+        <Text style={s.btnArrow}> →</Text>
       </TouchableOpacity>
     </View>
   )
@@ -40,43 +36,68 @@ export function IntroStep({ theme, locale, onStart }: Props) {
 
 const styles = (t: ResolvedTheme) =>
   StyleSheet.create({
-    container: { padding: 24 },
-    steps: {
-      flexDirection: 'row',
+    container: {
+      flex: 1,
+      padding: 28,
       justifyContent: 'center',
-      gap: 20,
-      marginBottom: 28,
+      gap: 16,
     },
-    step: { alignItems: 'center', gap: 8 },
-    stepIcon: {
-      width: 56,
-      height: 56,
-      borderRadius: 14,
-      backgroundColor: t.card,
-      borderWidth: 1,
-      borderColor: t.border,
+    textBlock: {
       alignItems: 'center',
-      justifyContent: 'center',
+      gap: 8,
+      marginBottom: 4,
     },
-    stepEmoji: { fontSize: 24 },
-    stepLabel: { fontSize: 12, color: t.subtext },
     title: {
       fontSize: 22,
       fontWeight: '700',
       color: t.text,
-      marginBottom: 10,
+      textAlign: 'center',
+      letterSpacing: -0.4,
     },
-    body: {
+    subtitle: {
       fontSize: 14,
       color: t.subtext,
       lineHeight: 21,
-      marginBottom: 28,
+      textAlign: 'center',
+    },
+    hint: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: 8,
+      padding: 12,
+      backgroundColor: t.surface,
+      borderRadius: t.radius - 4,
+      borderWidth: 1,
+      borderColor: t.border,
+    },
+    hintIcon: {
+      fontSize: 12,
+      marginTop: 1,
+    },
+    hintText: {
+      flex: 1,
+      fontSize: 12,
+      color: t.subtext,
+      lineHeight: 17,
     },
     btn: {
       backgroundColor: t.accent,
-      borderRadius: t.radius,
-      paddingVertical: 14,
+      borderRadius: t.radius - 4,
+      paddingVertical: 13,
+      paddingHorizontal: 20,
+      flexDirection: 'row',
       alignItems: 'center',
+      justifyContent: 'center',
+    },
+    btnText: {
+      color: t.accentInv,
+      fontSize: 14,
+      fontWeight: '600',
+      letterSpacing: -0.2,
+    },
+    btnArrow: {
+      color: t.accentInv,
+      fontSize: 14,
+      fontWeight: '600',
     },
-    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
   })