@kernaq/verify-react-native 1.0.2

package/src/hooks/usePermissions.ts

@@ -0,0 +1,67 @@
+import { useState, useCallback } from 'react'
+import { Platform, Linking, Alert } from 'react-native'
+import {
+  check,
+  request,
+  PERMISSIONS,
+  RESULTS,
+  type Permission,
+} from 'react-native-permissions'
+
+export type PermissionStatus = 'unknown' | 'granted' | 'denied' | 'blocked'
+
+export function usePermissions() {
+  const [status, setStatus] = useState<PermissionStatus>('unknown')
+
+  const cameraPermission: Permission =
+    Platform.OS === 'ios'
+      ? PERMISSIONS.IOS.CAMERA
+      : PERMISSIONS.ANDROID.CAMERA
+
+  const micPermission: Permission =
+    Platform.OS === 'ios'
+      ? PERMISSIONS.IOS.MICROPHONE
+      : PERMISSIONS.ANDROID.RECORD_AUDIO
+
+  const requestPermissions = useCallback(async (): Promise<boolean> => {
+    try {
+      const camResult = await check(cameraPermission)
+
+      if (camResult === RESULTS.GRANTED) {
+        // Also request mic for liveness video
+        await request(micPermission)
+        setStatus('granted')
+        return true
+      }
+
+      if (camResult === RESULTS.BLOCKED) {
+        setStatus('blocked')
+        Alert.alert(
+          'Camera Permission Required',
+          'Camera access is blocked. Please enable it in your device settings.',
+          [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'Open Settings', onPress: () => Linking.openSettings() },
+          ]
+        )
+        return false
+      }
+
+      // Request camera
+      const result = await request(cameraPermission)
+      if (result === RESULTS.GRANTED) {
+        await request(micPermission)
+        setStatus('granted')
+        return true
+      }
+
+      setStatus('denied')
+      return false
+    } catch {
+      setStatus('denied')
+      return false
+    }
+  }, [cameraPermission, micPermission])
+
+  return { status, requestPermissions }
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+/**
+ * @kernaq/verify-react-native
+ *
+ * Drop-in KYC verification UI for React Native.
+ * Works with bare React Native and Expo (requires expo prebuild).
+ *
+ * Usage:
+ *   import { KernaqVerify } from '@kernaq/verify-react-native'
+ *
+ *   <KernaqVerify
+ *     visible={showVerify}
+ *     apiKey="k_test_..."
+ *     country="KEN"
+ *     onComplete={(result) => console.log(result.verdict)}
+ *     onCancel={() => setShowVerify(false)}
+ *   />
+ *
+ * Peer dependencies:
+ *   react-native-vision-camera >= 4
+ *   react-native-permissions >= 4
+ */
+
+export { KernaqVerify } from './KernaqVerify'
+export type {
+  VerifyConfig,
+  VerifyResult,
+  VerifyStep,
+  VerifyVerdict,
+  VerifyTheme,
+  VerifyLocale,
+  DocumentType,
+} from './types'

package/src/locale.ts

@@ -0,0 +1,33 @@
+import type { VerifyLocale } from './types'
+
+export const DEFAULT_LOCALE: VerifyLocale = {
+  intro_title:          'Verify your identity',
+  intro_body:           "This takes about 60 seconds. You'll need your ID document and a clear view of your face.",
+  intro_cta:            'Get started',
+  doc_title:            'Scan your document',
+  doc_instruction:      'Hold your ID flat inside the frame. Make sure it\'s well-lit and all four corners are visible.',
+  doc_capture_btn:      'Capture',
+  doc_retake_btn:       'Retake',
+  doc_next_btn:         'Looks good',
+  selfie_title:         'Take a selfie',
+  selfie_instruction:   'Look straight at the camera. Keep your face inside the oval.',
+  selfie_capture_btn:   'Take selfie',
+  selfie_retake_btn:    'Retake',
+  selfie_next_btn:      'Looks good',
+  liveness_title:       'Liveness check',
+  liveness_instruction: 'Press start, then slowly turn your head left and right.',
+  liveness_start_btn:   'Start recording',
+  liveness_recording:   'Recording…',
+  processing_title:     'Verifying your identity',
+  processing_subtitle:  'This usually takes a few seconds.',
+  result_pass_title:    'Verification passed',
+  result_pass_body:     'Your identity has been verified successfully.',
+  result_fail_title:    'Verification failed',
+  result_fail_body:     'We were unable to verify your identity. Please try again.',
+  result_review_title:  'Under review',
+  result_review_body:   'Your submission is being reviewed. This usually takes a few minutes.',
+  result_retry_btn:     'Try again',
+  error_camera_denied:  'Camera access denied. Please allow camera permissions in settings.',
+  error_quality:        'Image quality too low. Try better lighting or hold the camera steady.',
+  error_network:        'Network error. Please check your connection and try again.',
+}

package/src/steps/DocumentStep.tsx

@@ -0,0 +1,141 @@
+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
+}
+
+export function DocumentStep({ theme, locale, onCapture }: Props) {
+  const { cameraRef, device, capturePhoto } = useCamera('back')
+  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)
+  }
+
+  const handleConfirm = () => {
+    if (preview) onCapture(preview)
+  }
+
+  if (!device) {
+    return (
+      <View style={s.container}>
+        <ActivityIndicator color={theme.accent} />
+      </View>
+    )
+  }
+
+  return (
+    <View style={s.container}>
+      <Text style={s.title}>{locale.doc_title}</Text>
+      <Text style={s.subtitle}>{locale.doc_instruction}</Text>
+
+      {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>
+        </>
+      )}
+    </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: 4 / 3,
+      borderRadius: t.radius,
+      overflow: 'hidden',
+      backgroundColor: '#000',
+      marginBottom: 16,
+      position: 'relative',
+    },
+    frameGuide: {
+      position: 'absolute',
+      top: '8%',
+      left: '5%',
+      right: '5%',
+      bottom: '8%',
+      borderWidth: 2,
+      borderColor: 'rgba(255,255,255,0.7)',
+      borderRadius: 8,
+    },
+    preview: {
+      width: '100%',
+      aspectRatio: 4 / 3,
+      borderRadius: t.radius,
+      marginBottom: 16,
+      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/steps/IntroStep.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import type { ResolvedTheme } from '../theme'
+import type { VerifyLocale } from '../types'
+
+interface Props {
+  theme: ResolvedTheme
+  locale: VerifyLocale
+  onStart: () => void
+}
+
+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>
+
+      <Text style={s.title}>{locale.intro_title}</Text>
+      <Text style={s.body}>{locale.intro_body}</Text>
+
+      <TouchableOpacity style={s.btn} onPress={onStart} activeOpacity={0.85}>
+        <Text style={s.btnText}>{locale.intro_cta}</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = (t: ResolvedTheme) =>
+  StyleSheet.create({
+    container: { padding: 24 },
+    steps: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      gap: 20,
+      marginBottom: 28,
+    },
+    step: { alignItems: 'center', gap: 8 },
+    stepIcon: {
+      width: 56,
+      height: 56,
+      borderRadius: 14,
+      backgroundColor: t.card,
+      borderWidth: 1,
+      borderColor: t.border,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    stepEmoji: { fontSize: 24 },
+    stepLabel: { fontSize: 12, color: t.subtext },
+    title: {
+      fontSize: 22,
+      fontWeight: '700',
+      color: t.text,
+      marginBottom: 10,
+    },
+    body: {
+      fontSize: 14,
+      color: t.subtext,
+      lineHeight: 21,
+      marginBottom: 28,
+    },
+    btn: {
+      backgroundColor: t.accent,
+      borderRadius: t.radius,
+      paddingVertical: 14,
+      alignItems: 'center',
+    },
+    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
+  })

package/src/steps/LivenessStep.tsx

@@ -0,0 +1,197 @@
+import React, { useState, useEffect, useRef } from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  Animated,
+} 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
+  duration: number       // ms
+  onCapture: (uri: string) => void
+  onBack: () => void
+}
+
+export function LivenessStep({ theme, locale, duration, onCapture, onBack }: Props) {
+  const { cameraRef, device, startRecording, stopRecording } = useCamera('front')
+  const [recording, setRecording] = useState(false)
+  const [countdown, setCountdown] = useState(Math.ceil(duration / 1000))
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const pulseAnim = useRef(new Animated.Value(1)).current
+  const s = styles(theme)
+
+  // Pulse animation for recording indicator
+  useEffect(() => {
+    if (recording) {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseAnim, { toValue: 0.3, duration: 600, useNativeDriver: true }),
+          Animated.timing(pulseAnim, { toValue: 1, duration: 600, useNativeDriver: true }),
+        ])
+      ).start()
+    } else {
+      pulseAnim.setValue(1)
+    }
+  }, [recording, pulseAnim])
+
+  const handleStart = () => {
+    if (!cameraRef.current) return
+    setRecording(true)
+    setCountdown(Math.ceil(duration / 1000))
+
+    startRecording(
+      (video) => {
+        setRecording(false)
+        onCapture(video.uri)
+      },
+      () => setRecording(false)
+    )
+
+    // Countdown tick
+    let remaining = duration / 1000
+    timerRef.current = setInterval(() => {
+      remaining -= 0.1
+      setCountdown(Math.max(0, Math.ceil(remaining)))
+      if (remaining <= 0) {
+        if (timerRef.current) clearInterval(timerRef.current)
+        stopRecording()
+      }
+    }, 100)
+  }
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current)
+    }
+  }, [])
+
+  if (!device) return <ActivityIndicator color={theme.accent} style={{ margin: 40 }} />
+
+  return (
+    <View style={s.container}>
+      <Text style={s.title}>{locale.liveness_title}</Text>
+      <Text style={s.subtitle}>
+        {recording ? locale.liveness_recording : locale.liveness_instruction}
+      </Text>
+
+      <View style={s.viewport}>
+        <Camera
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          device={device}
+          isActive={true}
+          video={true}
+          audio={true}
+        />
+        <View style={s.ovalGuide} pointerEvents="none" />
+
+        {recording && (
+          <>
+            <View style={s.recBadge}>
+              <Animated.View style={[s.recDot, { opacity: pulseAnim }]} />
+              <Text style={s.recText}>REC</Text>
+            </View>
+            <View style={s.countdownBadge}>
+              <Text style={s.countdownText}>{countdown}</Text>
+            </View>
+          </>
+        )}
+      </View>
+
+      {!recording && (
+        <>
+          <TouchableOpacity style={s.btnPrimary} onPress={handleStart} activeOpacity={0.85}>
+            <Text style={s.btnText}>{locale.liveness_start_btn}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={s.btnSecondary} onPress={onBack} activeOpacity={0.75}>
+            <Text style={s.btnSecondaryText}>{locale.selfie_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,
+      alignSelf: 'center',
+      maxWidth: 280,
+      position: 'relative',
+    },
+    ovalGuide: {
+      position: 'absolute',
+      top: '8%',
+      left: '12%',
+      right: '12%',
+      bottom: '8%',
+      borderWidth: 2,
+      borderColor: 'rgba(255,255,255,0.7)',
+      borderRadius: 999,
+    },
+    recBadge: {
+      position: 'absolute',
+      top: 10,
+      left: 10,
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'rgba(220,38,38,0.85)',
+      borderRadius: 999,
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      gap: 6,
+    },
+    recDot: {
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      backgroundColor: '#fff',
+    },
+    recText: { color: '#fff', fontSize: 12, fontWeight: '700' },
+    countdownBadge: {
+      position: 'absolute',
+      bottom: 12,
+      alignSelf: 'center',
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      backgroundColor: 'rgba(0,0,0,0.5)',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    countdownText: { color: '#fff', fontSize: 18, fontWeight: '700' },
+    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,
+    },
+    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
+    btnSecondaryText: { color: t.text, fontSize: 15, fontWeight: '600' },
+  })

package/src/steps/ProcessingStep.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef } from 'react'
+import { View, Text, StyleSheet, Animated } from 'react-native'
+import type { ResolvedTheme } from '../theme'
+import type { VerifyLocale } from '../types'
+
+interface Props {
+  theme: ResolvedTheme
+  locale: VerifyLocale
+}
+
+export function ProcessingStep({ theme, locale }: Props) {
+  const spinAnim = useRef(new Animated.Value(0)).current
+  const s = styles(theme)
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spinAnim, {
+        toValue: 1,
+        duration: 800,
+        useNativeDriver: true,
+      })
+    ).start()
+  }, [spinAnim])
+
+  const spin = spinAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+
+  return (
+    <View style={s.container}>
+      <Animated.View style={[s.spinner, { transform: [{ rotate: spin }] }]} />
+      <Text style={s.title}>{locale.processing_title}</Text>
+      <Text style={s.subtitle}>{locale.processing_subtitle}</Text>
+    </View>
+  )
+}
+
+const styles = (t: ResolvedTheme) =>
+  StyleSheet.create({
+    container: {
+      padding: 48,
+      alignItems: 'center',
+      gap: 16,
+    },
+    spinner: {
+      width: 52,
+      height: 52,
+      borderRadius: 26,
+      borderWidth: 4,
+      borderColor: t.border,
+      borderTopColor: t.accent,
+      marginBottom: 8,
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: '700',
+      color: t.text,
+      textAlign: 'center',
+    },
+    subtitle: {
+      fontSize: 14,
+      color: t.subtext,
+      textAlign: 'center',
+    },
+  })