@kernaq/verify-react-native 1.0.2

package/src/steps/ResultStep.tsx

@@ -0,0 +1,108 @@
+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
+  onRetry: () => void
+}
+
+const ICONS: Record<VerifyVerdict, string> = {
+  pass:   '✅',
+  fail:   '❌',
+  review: '⏳',
+}
+
+const ICON_BG: Record<VerifyVerdict, string> = {
+  pass:   '#d1fae5',
+  fail:   '#fee2e2',
+  review: '#fef3c7',
+}
+
+export function ResultStep({ theme, locale, result, error, onRetry }: Props) {
+  const s = styles(theme)
+
+  if (!result) {
+    return (
+      <View style={s.container}>
+        <View style={[s.iconWrap, { backgroundColor: '#fee2e2' }]}>
+          <Text style={s.icon}>❌</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>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  const titles: Record<VerifyVerdict, string> = {
+    pass:   locale.result_pass_title,
+    fail:   locale.result_fail_title,
+    review: locale.result_review_title,
+  }
+  const bodies: Record<VerifyVerdict, string> = {
+    pass:   locale.result_pass_body,
+    fail:   locale.result_fail_body,
+    review: locale.result_review_body,
+  }
+
+  return (
+    <View style={s.container}>
+      <View style={[s.iconWrap, { backgroundColor: ICON_BG[result.verdict] }]}>
+        <Text style={s.icon}>{ICONS[result.verdict]}</Text>
+      </View>
+      <Text style={s.title}>{titles[result.verdict]}</Text>
+      <Text style={s.body}>{bodies[result.verdict]}</Text>
+      {result.verdict === 'fail' && (
+        <TouchableOpacity style={s.btn} onPress={onRetry} activeOpacity={0.85}>
+          <Text style={s.btnText}>{locale.result_retry_btn}</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  )
+}
+
+const styles = (t: ResolvedTheme) =>
+  StyleSheet.create({
+    container: {
+      padding: 40,
+      alignItems: 'center',
+      gap: 12,
+    },
+    iconWrap: {
+      width: 76,
+      height: 76,
+      borderRadius: 38,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 8,
+    },
+    icon: { fontSize: 34 },
+    title: {
+      fontSize: 20,
+      fontWeight: '700',
+      color: t.text,
+      textAlign: 'center',
+    },
+    body: {
+      fontSize: 14,
+      color: t.subtext,
+      textAlign: 'center',
+      lineHeight: 21,
+    },
+    btn: {
+      marginTop: 8,
+      backgroundColor: t.accent,
+      borderRadius: t.radius,
+      paddingVertical: 14,
+      paddingHorizontal: 32,
+      alignItems: 'center',
+    },
+    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
+  })

package/src/steps/SelfieStep.tsx

@@ -0,0 +1,138 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  ActivityIndicator,
+} from 'react-native'
+import { Camera } from 'react-native-vision-camera'
+import { useCamera } from '../hooks/useCamera'
+import type { ResolvedTheme } from '../theme'
+import type { VerifyLocale } from '../types'
+
+interface Props {
+  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)
+  const s = styles(theme)
+
+  const handleCapture = async () => {
+    setCapturing(true)
+    const result = await capturePhoto()
+    setCapturing(false)
+    if (result) setPreview(result.uri)
+  }
+
+  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>
+  )
+}
+
+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 },
+    viewport: {
+      width: '100%',
+      aspectRatio: 3 / 4,
+      borderRadius: t.radius,
+      overflow: 'hidden',
+      backgroundColor: '#000',
+      marginBottom: 16,
+      position: 'relative',
+      alignSelf: 'center',
+      maxWidth: 280,
+    },
+    ovalGuide: {
+      position: 'absolute',
+      top: '8%',
+      left: '12%',
+      right: '12%',
+      bottom: '8%',
+      borderWidth: 2,
+      borderColor: 'rgba(255,255,255,0.7)',
+      borderRadius: 999,
+    },
+    preview: {
+      width: 240,
+      height: 320,
+      borderRadius: t.radius,
+      marginBottom: 16,
+      alignSelf: 'center',
+      borderWidth: 1,
+      borderColor: t.border,
+    },
+    btnPrimary: {
+      backgroundColor: t.accent,
+      borderRadius: t.radius,
+      paddingVertical: 14,
+      alignItems: 'center',
+      marginBottom: 10,
+    },
+    btnSecondary: {
+      backgroundColor: t.card,
+      borderRadius: t.radius,
+      paddingVertical: 14,
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: t.border,
+    },
+    btnDisabled: { opacity: 0.6 },
+    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
+    btnSecondaryText: { color: t.text, fontSize: 15, fontWeight: '600' },
+  })

package/src/theme.ts

@@ -0,0 +1,24 @@
+import type { VerifyTheme } from './types'
+
+export interface ResolvedTheme {
+  accent: string
+  bg: string
+  text: string
+  subtext: string
+  border: string
+  card: 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,
+  }
+}

package/src/types.ts

@@ -0,0 +1,124 @@
+/**
+ * @kernaq/verify-react-native — public types
+ */
+
+export type VerifyStep =
+  | 'intro'
+  | 'document'
+  | 'selfie'
+  | 'liveness'
+  | 'processing'
+  | 'result'
+
+export type DocumentType =
+  | 'national_id'
+  | 'passport'
+  | 'driver_license'
+  | 'alien_card'
+
+export type VerifyVerdict = 'pass' | 'fail' | 'review'
+
+export interface VerifyResult {
+  verificationId: string
+  reference: string
+  verdict: VerifyVerdict
+  score: number
+  faceMatch: boolean
+  isLive: boolean
+  documentFields?: Record<string, string>
+}
+
+export interface VerifyTheme {
+  /** Primary accent colour. Default: #111827 */
+  accentColor?: string
+  /** Modal background. Default: #ffffff */
+  backgroundColor?: string
+  /** Primary text colour. Default: #111827 */
+  textColor?: string
+  /** Subtle text colour. Default: #6b7280 */
+  subtextColor?: string
+  /** Border/divider colour. Default: #e5e7eb */
+  borderColor?: string
+  /** Card/surface colour. Default: #f9fafb */
+  cardColor?: string
+  /** Border radius for buttons and cards. Default: 12 */
+  borderRadius?: number
+  /** 'light' | 'dark' — overrides bg/text when set */
+  mode?: 'light' | 'dark'
+}
+
+export interface VerifyLocale {
+  intro_title: string
+  intro_body: string
+  intro_cta: string
+  doc_title: string
+  doc_instruction: string
+  doc_capture_btn: string
+  doc_retake_btn: string
+  doc_next_btn: string
+  selfie_title: string
+  selfie_instruction: string
+  selfie_capture_btn: string
+  selfie_retake_btn: string
+  selfie_next_btn: string
+  liveness_title: string
+  liveness_instruction: string
+  liveness_start_btn: string
+  liveness_recording: string
+  processing_title: string
+  processing_subtitle: string
+  result_pass_title: string
+  result_pass_body: string
+  result_fail_title: string
+  result_fail_body: string
+  result_review_title: string
+  result_review_body: string
+  result_retry_btn: string
+  error_camera_denied: string
+  error_quality: string
+  error_network: string
+}
+
+export interface VerifyConfig {
+  /**
+   * Your Kernaq publishable API key (k_test_... or k_live_...).
+   * For production use a backend proxy and pass backendUrl instead.
+   */
+  apiKey?: string
+
+  /**
+   * URL of your backend proxy that forwards to the Kernaq Identity API.
+   * POST /verify with multipart/form-data.
+   */
+  backendUrl?: string
+
+  /** Document types the user can select. Default: ['national_id', 'passport'] */
+  documentTypes?: DocumentType[]
+
+  /** Country code (ISO 3166-1 alpha-3). Default: 'KEN' */
+  country?: string
+
+  /** Your internal reference ID for this user/session */
+  reference?: string
+
+  /** Use sandbox mode — no billing, test responses */
+  sandbox?: boolean
+
+  /** Liveness recording duration in ms. Default: 3000 */
+  livenessDuration?: number
+
+  /** Theming */
+  theme?: VerifyTheme
+
+  /** Override any displayed string */
+  locale?: Partial<VerifyLocale>
+
+  /** Called when the user dismisses without completing */
+  onCancel?: () => void
+
+  /** Called when verification is complete */
+  onComplete?: (result: VerifyResult) => void
+
+  /** Called on unrecoverable error */
+  onError?: (error: { code: string; message: string }) => void
+}