Skip to main content
A cross-platform React Native SDK that wraps our native iOS and Android SDKs, providing a seamless verification experience with a single API.

​
In the meantime: Use WebView Integration to integrate Didit verification into your React Native app today.

​
Expected Features

  • Single API for both iOS and Android
  • Full TypeScript support
  • Expo compatibility (with and without ejecting)
  • Same features as native SDKs
  • Hooks-based API for React integration
  • Customizable UI theming

​
Expected API (Preview)

​
Installation (Expected)

npm install @didit-sdk/react-native
# or
yarn add @didit-sdk/react-native
For Expo: 
npx expo install @didit-sdk/react-native

​
Usage with Hooks (Expected)

import { useDiditVerification } from '@didit-sdk/react-native';

function VerifyScreen() {
  const { 
    startVerification, 
    isLoading, 
    result 
  } = useDiditVerification({
    onComplete: (session) => {
      console.log('Verification completed:', session.status);
      if (session.status === 'Approved') {
        // Navigate to success screen
      }
    },
    onCancel: () => {
      console.log('User cancelled verification');
    },
    onError: (error) => {
      console.error('Verification error:', error);
    },
  });

  return (
    <View style={styles.container}>
      <Button
        title="Verify Identity"
        onPress={() => startVerification({
          token: 'your-session-token',
          // Or use workflowId for simpler integration:
          // workflowId: 'your-workflow-id',
          // vendorData: 'user-123',
        })}
        disabled={isLoading}
      />
      
      {result && (
        <Text>Status: {result.status}</Text>
      )}
    </View>
  );
}

​
Configuration (Expected)

import { DiditProvider } from '@didit-sdk/react-native';

function App() {
  return (
    <DiditProvider
      config={{
        primaryColor: '#007AFF',
        backgroundColor: '#FFFFFF',
        showIntroScreen: true,
        loggingEnabled: __DEV__,
      }}
    >
      <Navigation />
    </DiditProvider>
  );
}

​
TypeScript Types (Expected)

interface VerificationResult {
  sessionId: string;
  status: 'Approved' | 'Pending' | 'Declined';
  country?: string;
  documentType?: string;
}

interface DiditConfig {
  primaryColor?: string;
  backgroundColor?: string;
  showIntroScreen?: boolean;
  loggingEnabled?: boolean;
  languageLocale?: SupportedLanguage;
}

​
Current Solution: WebView Integration

While the native React Native SDK is in development, you can integrate Didit verification using react-native-webview. This provides full functionality today.

​
Installation

npm install react-native-webview
# or
yarn add react-native-webview
For Expo: 
npx expo install react-native-webview

​
Quick Implementation

import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

interface Props {
  verificationUrl: string;
  onComplete: (sessionId: string, status: string) => void;
  onCancel: () => void;
}

export function VerificationWebView({ verificationUrl, onComplete, onCancel }: Props) {
  const [isVisible, setIsVisible] = useState(true);

  const handleNavigationChange = (navState: any) => {
    // Check if redirected to callback URL
    if (navState.url.includes('yourapp.com/callback')) {
      const url = new URL(navState.url);
      const sessionId = url.searchParams.get('verificationSessionId');
      const status = url.searchParams.get('status');
      
      if (sessionId && status) {
        onComplete(sessionId, status);
      }
      setIsVisible(false);
    }
  };

  if (!isVisible) return null;

  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: verificationUrl }}
        userAgent="Mozilla/5.0 (Linux; Android 10; Mobile) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36"
        mediaPlaybackRequiresUserAction={false}
        allowsInlineMediaPlayback={true}
        domStorageEnabled={true}
        onNavigationStateChange={handleNavigationChange}
        style={styles.webview}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

​
Usage Example

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import { VerificationWebView } from './VerificationWebView';

export function VerifyScreen() {
  const [verificationUrl, setVerificationUrl] = useState<string | null>(null);

  const startVerification = async () => {
    // Create session via your backend
    const response = await fetch('https://your-backend.com/create-verification', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId: 'user-123' }),
    });
    
    const { verification_url } = await response.json();
    setVerificationUrl(verification_url);
  };

  const handleComplete = (sessionId: string, status: string) => {
    setVerificationUrl(null);
    
    if (status === 'Approved') {
      Alert.alert('Success', 'Identity verified!');
    } else if (status === 'Declined') {
      Alert.alert('Declined', 'Verification was not successful.');
    } else {
      Alert.alert('Pending', 'Your verification is under review.');
    }
  };

  if (verificationUrl) {
    return (
      <VerificationWebView
        verificationUrl={verificationUrl}
        onComplete={handleComplete}
        onCancel={() => setVerificationUrl(null)}
      />
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <Button title="Verify Identity" onPress={startVerification} />
    </View>
  );
}
→ Full React Native WebView Guide with complete implementation