React Native SDK - Quick Start Guide

The following guide helps you integrate the HyperKYC React Native SDK and launch your first workflow in minutes.

Additional Resource

• Complete Sample Project: A ready to use example project with all the code you need to get started with the React Native SDK quickly.

Step 1: Add SDK to Your Project

Install the React Native wrapper using npm or yarn:

Bash

# Install the RN wrapper
npm install react-native-hyperkyc-sdk
# or
yarn add react-native-hyperkyc-sdk

Platform-Specific Installation

Android: For React Native 0.60+ with auto-linking, no additional steps are required. For older versions, follow the wrapper's README for manual linking.

iOS: Install native dependencies:

cd ios && pod install && cd ..

For detailed platform configuration, see the Integration Guide.

Step 2: Initialize and Launch the SDK

Initialize the SDK and launch a verification workflow in your React Native component:

TypeScript

var configDictionary = {};
configDictionary["accessToken"] = "<ACCESS_TOKEN>";  // Short-lived token from your backend
configDictionary["workflowId"] = "<WORKFLOW_ID>";    // Workflow ID from HyperVerge Dashboard
configDictionary["transactionId"] = "<TRANSACTION_ID>"; // Unique identifier for this application

// Launch the HyperVerge SDK with configuration
Hyperkyc.launch(configDictionary, function(result) {
    console.log(result);
    
    // Handle verification outcome
    switch(result.response.status) {
        case "auto_approved":
            // All checks passed - update UI, proceed
            break;
        case "auto_declined":
            // Verification failed - show rejection UI
            break;
        case "needs_review":
            // Ambiguous result - show pending review UI
            break;
        case "user_cancelled":
            // User exited flow - handle gracefully
            break;
        case "error":
            // Technical failure - show retry option
            break;
    }
});

The following table describes each parameter in the configuration:

Parameter	Description	Source
accessToken	Short-lived token from your backend	Generate Access Tokens
workflowId	Workflow identifier	HyperVerge Dashboard
transactionId	Unique session identifier	Generated by your backend

That's it! You've launched your first HyperKYC workflow.

Step 3: Handle Results & Test the Flow

The callback in Step 2 returns one of these statuses:

Status	Description
auto_approved	User verified successfully
auto_declined	Application rejected automatically
needs_review	Flagged for manual review
user_cancelled	User exited before completion
error	SDK or network issue

For detailed response formats, error codes, and field descriptions, see the SDK Response documentation.

Test: Build & run your app, trigger the launcher, complete a sample journey, and check the log output to confirm integration.

Next Steps

Explore advanced capabilities:

• Additional Configurations: See the Integration Guide for detailed configuration options including prefetch, UI customization, language settings, and platform-specific setup.
• Error Codes & Troubleshooting: For detailed error codes and descriptions, see Error Response Details.
• Integrate Results Webhook: Receive backend updates when journeys complete using the Results Webhook API.
• Real-time Event Notifications: Track user progress with Real-time Event Notifications
• Sample Project: Download the React Native Sample Project for a complete working example.

Recommendations

Follow these best practices to ensure a secure and smooth integration:

Important

• Validate camera & microphone permissions before SDK launch (if your workflow requires these)
• Do not send SDK results directly to your backend for decisioning. To avoid potential man‑in‑the‑middle (MITM) attacks, integrate the Results Webhook instead to securely receive verified outcomes from HyperVerge servers.
• Avoid repeated SDK initialization. Ensure your app prevents multiple button presses or asynchronous triggers to avoid multiple invocations of the SDK.