> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vouch.expert/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native SDK

> React Native SDK for email validation and device fingerprinting on iOS and Android

## Overview

Coming Soon...

[//]: #

[//]: # "The Vouch React Native SDK provides email validation and device fingerprinting for React Native applications. It uses native modules for optimal signal collection and performance."

[//]: #

[//]: # "<Note>"

[//]: # "  **Package:** `@vouch-in/react-native`"

[//]: # "  **Platform:** iOS 15.0+ & Android 8.0+ (API 26+)"

[//]: # "  **React Native:** 0.60.0+"

[//]: # "  **Distribution:** npm/yarn/pnpm"

[//]: # "</Note>"

[//]: #

[//]: # "## Installation"

[//]: #

[//]: # "<CodeGroup>"

[//]: # "```bash npm"

[//]: # "npm install @vouch-in/react-native"

[//]: # "```"

[//]: #

[//]: # "```bash yarn"

[//]: # "yarn add @vouch-in/react-native"

[//]: # "```"

[//]: #

[//]: # "```bash pnpm"

[//]: # "pnpm add @vouch-in/react-native"

[//]: # "```"

[//]: # "</CodeGroup>"

[//]: #

[//]: # "### iOS Setup"

[//]: #

[//]: # "Install iOS dependencies:"

[//]: #

[//]: # "```bash"

[//]: # "cd ios && pod install"

[//]: # "```"

[//]: #

[//]: # "### Android Setup"

[//]: #

[//]: # "No additional setup required. The SDK includes all necessary native modules."

[//]: #

[//]: # "### Permissions"

[//]: #

[//]: # "Add internet permission to your `AndroidManifest.xml` (Android only):"

[//]: #

[//]: # "```xml AndroidManifest.xml"

[//]: # "<uses-permission android:name=\"android.permission.INTERNET\" />"

[//]: # "```"

[//]: #

[//]: # "<Info>"

[//]: # "  **No permissions required on iOS.** The SDK only needs internet access on Android."

[//]: # "</Info>"

[//]: #

[//]: # "## Quick Start"

[//]: #

[//]: # "### Wrap Your App"

[//]: #

[//]: # "Wrap your app with `VouchProvider`:"

[//]: #

[//]: # "```tsx App.tsx"

[//]: # "import { VouchProvider } from '@vouch-in/react-native';"

[//]: #

[//]: # "export default function App() {"

[//]: # "  return ("

[//]: # "    <VouchProvider"

[//]: # "      projectId=\"your-project-id\""

[//]: # "      apiKey=\"your-client-api-key\""

[//]: # "    >"

[//]: # "      <YourApp />"

[//]: # "    </VouchProvider>"

[//]: # "  );"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "### Validate Email"

[//]: #

[//]: # "Use the `useValidateEmail` hook:"

[//]: #

[//]: # "```tsx"

[//]: # "import { useValidateEmail } from '@vouch-in/react-native';"

[//]: # "import { View, TextInput, Button, Text } from 'react-native';"

[//]: # "import { useState } from 'react';"

[//]: #

[//]: # "function EmailForm() {"

[//]: # "  const { validate, loading, data } = useValidateEmail();"

[//]: # "  const [email, setEmail] = useState('');"

[//]: #

[//]: # "  const handleSubmit = async () => {"

[//]: # "    const result = await validate(email);"

[//]: #

[//]: # "    if (result.recommendation === 'allow') {"

[//]: # "      console.log('Email is valid!');"

[//]: # "    } else {"

[//]: # "      // Check specific validations"

[//]: # "      if (!result.checks.syntax?.pass) {"

[//]: # "        console.log('Invalid email format');"

[//]: # "      } else if (!result.checks.disposable?.pass) {"

[//]: # "        console.log('Disposable emails not allowed');"

[//]: # "      }"

[//]: # "    }"

[//]: # "  };"

[//]: #

[//]: # "  return ("

[//]: # "    <View>"

[//]: # "      <TextInput"

[//]: # "        value={email}"

[//]: # "        onChangeText={setEmail}"

[//]: # "        placeholder=\"Email address\""

[//]: # "        keyboardType=\"email-address\""

[//]: # "        autoCapitalize=\"none\""

[//]: # "        editable={!loading}"

[//]: # "      />"

[//]: # "      <Button"

[//]: # "        title={loading ? 'Validating...' : 'Validate'}"

[//]: # "        onPress={handleSubmit}"

[//]: # "        disabled={loading}"

[//]: # "      />"

[//]: # "      {data && ("

[//]: # "        <Text>"

[//]: # "          {data.recommendation === 'allow' ? 'Valid' : 'Invalid'}"

[//]: # "        </Text>"

[//]: # "      )}"

[//]: # "    </View>"

[//]: # "  );"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "## Hooks"

[//]: #

[//]: # "### useValidateEmail"

[//]: #

[//]: # "Hook for email validation with loading and error states:"

[//]: #

[//]: # "```tsx"

[//]: # "import { useValidateEmail } from '@vouch-in/react-native';"

[//]: # "import { View, TextInput, Button, Text, ActivityIndicator } from 'react-native';"

[//]: # "import { useState } from 'react';"

[//]: #

[//]: # "function SignUpForm() {"

[//]: # "  const { validate, loading, data, error, reset } = useValidateEmail();"

[//]: # "  const [email, setEmail] = useState('');"

[//]: #

[//]: # "  const handleValidate = async () => {"

[//]: # "    const result = await validate(email);"

[//]: #

[//]: # "    if (result.recommendation === 'allow') {"

[//]: # "      // Proceed with sign-up"

[//]: # "      console.log('Valid email, previous signups:', result.metadata.previousSignups);"

[//]: # "    }"

[//]: # "  };"

[//]: #

[//]: # "  return ("

[//]: # "    <View style={{ padding: 20 }}>"

[//]: # "      <TextInput"

[//]: # "        value={email}"

[//]: # "        onChangeText={(text) => {"

[//]: # "          setEmail(text);"

[//]: # "          reset(); // Clear previous results"

[//]: # "        }}"

[//]: # "        placeholder=\"Enter your email\""

[//]: # "        keyboardType=\"email-address\""

[//]: # "        autoCapitalize=\"none\""

[//]: # "        style={{"

[//]: # "          borderWidth: 1,"

[//]: # "          borderColor: '#ccc',"

[//]: # "          padding: 10,"

[//]: # "          borderRadius: 5,"

[//]: # "        }}"

[//]: # "      />"

[//]: #

[//]: # "      <Button"

[//]: # "        title={loading ? 'Validating...' : 'Sign Up'}"

[//]: # "        onPress={handleValidate}"

[//]: # "        disabled={loading || !email}"

[//]: # "      />"

[//]: #

[//]: # "      {loading && <ActivityIndicator style={{ marginTop: 10 }} />}"

[//]: #

[//]: # "      {data && !loading && ("

[//]: # "        <Text"

[//]: # "          style={{"

[//]: # "            marginTop: 10,"

[//]: # "            color: data.recommendation === 'allow' ? 'green' : 'red',"

[//]: # "          }}"

[//]: # "        >"

[//]: # "          {data.recommendation === 'allow'"

[//]: # "            ? 'Email is valid'"

[//]: # "            : 'Email validation failed'}"

[//]: # "        </Text>"

[//]: # "      )}"

[//]: # "    </View>"

[//]: # "  );"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "**Returns:**"

[//]: #

[//]: # "<ResponseField name=\"data\" type=\"ValidationResponse | null\">"

[//]: # "  Validation response (null if not validated yet). Contains `checks`, `metadata`, `recommendation`, and `signals`."

[//]: # "</ResponseField>"

[//]: #

[//]: # "<ResponseField name=\"loading\" type=\"boolean\">"

[//]: # "  Whether a validation request is in progress"

[//]: # "</ResponseField>"

[//]: #

[//]: # "<ResponseField name=\"error\" type=\"Error | null\">"

[//]: # "  Error that occurred during validation"

[//]: # "</ResponseField>"

[//]: #

[//]: # "<ResponseField name=\"validate\" type=\"(email: string) => Promise<ValidationResponse>\">"

[//]: # "  Function to validate an email address"

[//]: # "</ResponseField>"

[//]: #

[//]: # "<ResponseField name=\"reset\" type=\"() => void\">"

[//]: # "  Reset the validation state"

[//]: # "</ResponseField>"

[//]: #

[//]: # "### useFingerprint"

[//]: #

[//]: # "Hook to generate device fingerprint:"

[//]: #

[//]: # "```tsx"

[//]: # "import { useFingerprint } from '@vouch-in/react-native';"

[//]: # "import { View, Button, Text, ScrollView } from 'react-native';"

[//]: #

[//]: # "function DeviceInfo() {"

[//]: # "  const { fingerprint, loading, error, generate } = useFingerprint();"

[//]: #

[//]: # "  return ("

[//]: # "    <View style={{ padding: 20 }}>"

[//]: # "      <Button"

[//]: # "        title={loading ? 'Generating...' : 'Generate Fingerprint'}"

[//]: # "        onPress={generate}"

[//]: # "        disabled={loading}"

[//]: # "      />"

[//]: #

[//]: # "      {error && <Text style={{ color: 'red' }}>Error: {error.message}</Text>}"

[//]: #

[//]: # "      {fingerprint && ("

[//]: # "        <ScrollView style={{ marginTop: 20 }}>"

[//]: # "          <Text>Device: {fingerprint.hardware.deviceModel}</Text>"

[//]: # "          <Text>Screen: {fingerprint.hardware.screenWidth}x{fingerprint.hardware.screenHeight}</Text>"

[//]: # "          <Text>OS: {fingerprint.system.osVersion}</Text>"

[//]: # "          <Text>Fonts: {fingerprint.fonts.fonts?.length || 0}</Text>"

[//]: # "        </ScrollView>"

[//]: # "      )}"

[//]: # "    </View>"

[//]: # "  );"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "**Returns:**"

[//]: #

[//]: # "<ResponseField name=\"fingerprint\" type=\"Fingerprint | null\">"

[//]: # "  Generated device fingerprint (null if not generated yet)"

[//]: # "</ResponseField>"

[//]: #

[//]: # "<ResponseField name=\"loading\" type=\"boolean\">"

[//]: # "  Whether fingerprint generation is in progress"

[//]: # "</ResponseField>"

[//]: #

[//]: # "<ResponseField name=\"error\" type=\"Error | null\">"

[//]: # "  Error that occurred during generation"

[//]: # "</ResponseField>"

[//]: #

[//]: # "<ResponseField name=\"generate\" type=\"() => Promise<Fingerprint>\">"

[//]: # "  Function to generate device fingerprint"

[//]: # "</ResponseField>"

[//]: #

[//]: # "### useVouch"

[//]: #

[//]: # "Hook to access the Vouch instance directly:"

[//]: #

[//]: # "```tsx"

[//]: # "import { useVouch } from '@vouch-in/react-native';"

[//]: #

[//]: # "function CustomComponent() {"

[//]: # "  const vouch = useVouch();"

[//]: #

[//]: # "  const handleCustomValidation = async () => {"

[//]: # "    const result = await vouch.validate('user@example.com');"

[//]: # "    console.log(result.recommendation);"

[//]: # "  };"

[//]: #

[//]: # "  return ("

[//]: # "    <Button title=\"Custom Validation\" onPress={handleCustomValidation} />"

[//]: # "  );"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "**Returns:** `Vouch` instance"

[//]: #

[//]: # "## Advanced Usage"

[//]: #

[//]: # "### Real-Time Validation"

[//]: #

[//]: # "Validate as the user types with debouncing:"

[//]: #

[//]: # "```tsx"

[//]: # "import { useValidateEmail } from '@vouch-in/react-native';"

[//]: # "import { View, TextInput, Text } from 'react-native';"

[//]: # "import { useState, useEffect, useRef } from 'react';"

[//]: #

[//]: # "function RealtimeEmailInput() {"

[//]: # "  const { validate, loading, data } = useValidateEmail();"

[//]: # "  const [email, setEmail] = useState('');"

[//]: # "  const timeoutRef = useRef<NodeJS.Timeout>();"

[//]: #

[//]: # "  useEffect(() => {"

[//]: # "    if (!email || !email.includes('@')) return;"

[//]: #

[//]: # "    // Clear previous timeout"

[//]: # "    if (timeoutRef.current) {"

[//]: # "      clearTimeout(timeoutRef.current);"

[//]: # "    }"

[//]: #

[//]: # "    // Debounce validation"

[//]: # "    timeoutRef.current = setTimeout(() => {"

[//]: # "      validate(email);"

[//]: # "    }, 500);"

[//]: #

[//]: # "    return () => {"

[//]: # "      if (timeoutRef.current) {"

[//]: # "        clearTimeout(timeoutRef.current);"

[//]: # "      }"

[//]: # "    };"

[//]: # "  }, [email]);"

[//]: #

[//]: # "  const getStatusIndicator = () => {"

[//]: # "    if (loading) return '...';"

[//]: # "    if (!data) return '';"

[//]: # "    return data.recommendation === 'allow' ? '✓' : '✗';"

[//]: # "  };"

[//]: #

[//]: # "  return ("

[//]: # "    <View style={{ padding: 20 }}>"

[//]: # "      <View style={{ flexDirection: 'row', alignItems: 'center' }}>"

[//]: # "        <TextInput"

[//]: # "          value={email}"

[//]: # "          onChangeText={setEmail}"

[//]: # "          placeholder=\"Email address\""

[//]: # "          keyboardType=\"email-address\""

[//]: # "          autoCapitalize=\"none\""

[//]: # "          style={{"

[//]: # "            flex: 1,"

[//]: # "            borderWidth: 1,"

[//]: # "            borderColor: data?.recommendation === 'allow' ? 'green' : '#ccc',"

[//]: # "            padding: 10,"

[//]: # "            borderRadius: 5,"

[//]: # "          }}"

[//]: # "        />"

[//]: # "        <Text style={{ marginLeft: 10, fontSize: 18 }}>"

[//]: # "          {getStatusIndicator()}"

[//]: # "        </Text>"

[//]: # "      </View>"

[//]: #

[//]: # "      {data && data.recommendation !== 'allow' && !loading && ("

[//]: # "        <Text style={{ color: 'red', marginTop: 5 }}>"

[//]: # "          {!data.checks.syntax?.pass"

[//]: # "            ? 'Invalid email format'"

[//]: # "            : 'Email validation failed'}"

[//]: # "        </Text>"

[//]: # "      )}"

[//]: # "    </View>"

[//]: # "  );"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "### Custom Options"

[//]: #

[//]: # "Configure the SDK with custom options:"

[//]: #

[//]: # "```tsx App.tsx"

[//]: # "import { VouchProvider } from '@vouch-in/react-native';"

[//]: #

[//]: # "export default function App() {"

[//]: # "  return ("

[//]: # "    <VouchProvider"

[//]: # "      projectId=\"your-project-id\""

[//]: # "      apiKey=\"your-client-api-key\""

[//]: # "      options={{"

[//]: # "        endpoint: 'https://api.vouch.expert',"

[//]: # "        apiVersion: 1,  // Use /v1/ endpoint"

[//]: # "      }}"

[//]: # "    >"

[//]: # "      <YourApp />"

[//]: # "    </VouchProvider>"

[//]: # "  );"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "### Form Integration"

[//]: #

[//]: # "Integrate with your signup form:"

[//]: #

[//]: # "```tsx"

[//]: # "import { useValidateEmail } from '@vouch-in/react-native';"

[//]: # "import { View, TextInput, Button, Text } from 'react-native';"

[//]: # "import { useState } from 'react';"

[//]: #

[//]: # "function RegistrationForm() {"

[//]: # "  const { validate, loading } = useValidateEmail();"

[//]: # "  const [email, setEmail] = useState('');"

[//]: # "  const [password, setPassword] = useState('');"

[//]: # "  const [emailError, setEmailError] = useState<string | null>(null);"

[//]: # "  const [formSubmitting, setFormSubmitting] = useState(false);"

[//]: #

[//]: # "  const handleSubmit = async () => {"

[//]: # "    setFormSubmitting(true);"

[//]: # "    setEmailError(null);"

[//]: #

[//]: # "    // Validate email first"

[//]: # "    const result = await validate(email);"

[//]: #

[//]: # "    if (result.recommendation !== 'allow') {"

[//]: # "      if (!result.checks.syntax?.pass) {"

[//]: # "        setEmailError('Invalid email format');"

[//]: # "      } else if (!result.checks.disposable?.pass) {"

[//]: # "        setEmailError('Disposable emails not allowed');"

[//]: # "      } else {"

[//]: # "        setEmailError('Email validation failed');"

[//]: # "      }"

[//]: # "      setFormSubmitting(false);"

[//]: # "      return;"

[//]: # "    }"

[//]: #

[//]: # "    // Proceed with registration"

[//]: # "    try {"

[//]: # "      await registerUser(email, password);"

[//]: # "      console.log('Registration successful');"

[//]: # "    } catch (error) {"

[//]: # "      console.error('Registration failed:', error);"

[//]: # "    } finally {"

[//]: # "      setFormSubmitting(false);"

[//]: # "    }"

[//]: # "  };"

[//]: #

[//]: # "  return ("

[//]: # "    <View style={{ padding: 20 }}>"

[//]: # "      <TextInput"

[//]: # "        value={email}"

[//]: # "        onChangeText={setEmail}"

[//]: # "        placeholder=\"Email\""

[//]: # "        keyboardType=\"email-address\""

[//]: # "        autoCapitalize=\"none\""

[//]: # "        style={{"

[//]: # "          borderWidth: 1,"

[//]: # "          borderColor: emailError ? 'red' : '#ccc',"

[//]: # "          padding: 10,"

[//]: # "          borderRadius: 5,"

[//]: # "          marginBottom: 10,"

[//]: # "        }}"

[//]: # "      />"

[//]: # "      {emailError && ("

[//]: # "        <Text style={{ color: 'red', marginBottom: 10 }}>{emailError}</Text>"

[//]: # "      )}"

[//]: #

[//]: # "      <TextInput"

[//]: # "        value={password}"

[//]: # "        onChangeText={setPassword}"

[//]: # "        placeholder=\"Password\""

[//]: # "        secureTextEntry"

[//]: # "        style={{"

[//]: # "          borderWidth: 1,"

[//]: # "          borderColor: '#ccc',"

[//]: # "          padding: 10,"

[//]: # "          borderRadius: 5,"

[//]: # "          marginBottom: 20,"

[//]: # "        }}"

[//]: # "      />"

[//]: #

[//]: # "      <Button"

[//]: # "        title={loading || formSubmitting ? 'Submitting...' : 'Register'}"

[//]: # "        onPress={handleSubmit}"

[//]: # "        disabled={loading || formSubmitting || !email || !password}"

[//]: # "      />"

[//]: # "    </View>"

[//]: # "  );"

[//]: # "}"

[//]: #

[//]: # "async function registerUser(email: string, password: string) {"

[//]: # "  // Your registration logic here"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "## API Reference"

[//]: #

[//]: # "### VouchProvider"

[//]: #

[//]: # "Provider component that initializes the Vouch SDK."

[//]: #

[//]: # "```tsx"

[//]: # "<VouchProvider"

[//]: # "  projectId=\"your-project-id\""

[//]: # "  apiKey=\"your-client-api-key\""

[//]: # "  options={{"

[//]: # "    endpoint: \"https://api.vouch.expert\","

[//]: # "    apiVersion: 1,"

[//]: # "  }}"

[//]: # ">"

[//]: # "  {children}"

[//]: # "</VouchProvider>"

[//]: # "```"

[//]: #

[//]: # "**Props:**"

[//]: #

[//]: # "<ParamField path=\"projectId\" type=\"string\" required>"

[//]: # "  Your Vouch project ID"

[//]: # "</ParamField>"

[//]: #

[//]: # "<ParamField path=\"apiKey\" type=\"string\" required>"

[//]: # "  Your Vouch client API key"

[//]: # "</ParamField>"

[//]: #

[//]: # "<ParamField path=\"options\" type=\"VouchOptions\">"

[//]: # "  Optional SDK configuration:"

[//]: # "  - `endpoint` - API endpoint URL (default: \"https://api.vouch.expert\")"

[//]: # "  - `apiVersion` - API version number or \"latest\" (default: \"latest\")"

[//]: # "</ParamField>"

[//]: #

[//]: # "### ValidationResponse"

[//]: #

[//]: # "Email validation response:"

[//]: #

[//]: # "```typescript"

[//]: # "interface ValidationResponse {"

[//]: # "  checks: Record<string, CheckResult>;"

[//]: # "  metadata: {"

[//]: # "    fingerprintHash: string | null;"

[//]: # "    previousSignups: number;"

[//]: # "    totalLatency: number;"

[//]: # "  };"

[//]: # "  recommendation: 'allow' | 'block' | 'flag';"

[//]: # "  signals: string[];"

[//]: # "}"

[//]: #

[//]: # "interface CheckResult {"

[//]: # "  pass: boolean;"

[//]: # "  error?: string;"

[//]: # "  latency: number;"

[//]: # "  metadata?: Record<string, unknown>;"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "### Fingerprint"

[//]: #

[//]: # "Device fingerprint data:"

[//]: #

[//]: # "```typescript"

[//]: # "interface Fingerprint {"

[//]: # "  hardware: HardwareSignals;    // Device hardware info"

[//]: # "  fonts: FontSignals;           // System fonts"

[//]: # "  system: SystemSignals;        // OS info"

[//]: # "  storage: StorageSignals;      // Storage availability"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "## Platform-Specific Considerations"

[//]: #

[//]: # "### iOS"

[//]: #

[//]: # "- **No permissions required**"

[//]: # "- Uses native Swift SDK for fingerprinting"

[//]: # "- Supports iOS 15.0+"

[//]: #

[//]: # "### Android"

[//]: #

[//]: # "- **Requires INTERNET permission**"

[//]: # "- Uses native Kotlin SDK for fingerprinting"

[//]: # "- Supports Android 8.0+ (API 26+)"

[//]: # "- ProGuard/R8 compatible (rules included automatically)"

[//]: #

[//]: # "## Error Handling"

[//]: #

[//]: # "Always handle validation errors gracefully:"

[//]: #

[//]: # "```tsx"

[//]: # "const { validate, loading, data, error } = useValidateEmail();"

[//]: #

[//]: # "const handleValidate = async () => {"

[//]: # "  try {"

[//]: # "    const result = await validate(email);"

[//]: #

[//]: # "    if (result.recommendation !== 'allow') {"

[//]: # "      // Email validation failed"

[//]: # "      showError(!result.checks.syntax?.pass"

[//]: # "        ? 'Invalid email format'"

[//]: # "        : 'Please use a different email');"

[//]: # "      return;"

[//]: # "    }"

[//]: #

[//]: # "    // Email is valid"

[//]: # "    proceedWithSignup();"

[//]: # "  } catch (err) {"

[//]: # "    // Network or SDK error"

[//]: # "    console.error('Validation error:', err);"

[//]: # "    showToast('Validation unavailable, please try again');"

[//]: # "  }"

[//]: # "};"

[//]: # "```"

[//]: #

[//]: #

[//]: # "<Tip>"

[//]: # "  The SDK generates fingerprint on-demand during validation to optimize mobile performance and battery usage."

[//]: # "</Tip>"

[//]: #

[//]: # "## Privacy & Permissions"

[//]: #

[//]: # "### Data Collection"

[//]: #

[//]: # "The SDK collects device fingerprint data for fraud prevention. You must disclose this in:"

[//]: #

[//]: # "1. **Your app's privacy policy**"

[//]: # "2. **App Store privacy nutrition label (iOS)**"

[//]: # "3. **Google Play Data Safety form (Android)**"

[//]: # "4. **GDPR/CCPA notices** (if applicable)"

[//]: #

[//]: # "**What data is collected:**"

[//]: # "- Hardware signals: Screen dimensions, CPU cores, memory, device model"

[//]: # "- Font signals: System fonts and SHA-256 hash"

[//]: # "- System signals: OS version, language, locale, timezone"

[//]: # "- Storage signals: Storage availability checks"

[//]: #

[//]: # "<Info>"

[//]: # "  No personally identifiable information (PII) is collected. All data is technical device and system information."

[//]: # "</Info>"

[//]: #

[//]: # "## Best Practices"

[//]: #

[//]: # "### 1. Initialize Early"

[//]: #

[//]: # "Place `VouchProvider` at the top level of your app:"

[//]: #

[//]: # "```tsx"

[//]: # "// Good - Top level"

[//]: # "<VouchProvider projectId=\"...\" apiKey=\"...\">"

[//]: # "  <NavigationContainer>"

[//]: # "    <App />"

[//]: # "  </NavigationContainer>"

[//]: # "</VouchProvider>"

[//]: #

[//]: # "// Bad - Too deep"

[//]: # "<NavigationContainer>"

[//]: # "  <VouchProvider projectId=\"...\" apiKey=\"...\">"

[//]: # "    <App />"

[//]: # "  </VouchProvider>"

[//]: # "</NavigationContainer>"

[//]: # "```"

[//]: #

[//]: # "### 2. Handle Errors Gracefully"

[//]: #

[//]: # "Don't block users due to validation failures:"

[//]: #

[//]: # "```tsx"

[//]: # "const result = await validate(email);"

[//]: #

[//]: # "if (result.recommendation !== 'allow') {"

[//]: # "  // Show error but allow retry"

[//]: # "  showError('Please check your email');"

[//]: # "} else {"

[//]: # "  // Proceed"

[//]: # "  submitForm();"

[//]: # "}"

[//]: # "```"

[//]: #

[//]: # "### 3. Use Debouncing for Real-Time Validation"

[//]: #

[//]: # "Avoid excessive API calls:"

[//]: #

[//]: # "```tsx"

[//]: # "useEffect(() => {"

[//]: # "  const timeout = setTimeout(() => {"

[//]: # "    if (email) validate(email);"

[//]: # "  }, 500); // 500ms debounce"

[//]: #

[//]: # "  return () => clearTimeout(timeout);"

[//]: # "}, [email]);"

[//]: # "```"

[//]: #

[//]: # "## Support"

[//]: #

[//]: # "For issues and questions:"

[//]: # "- **Email:** support@vouch.expert"

[//]: # "- **Documentation:** [docs.vouch.expert](https://docs.vouch.expert)"