React Native Walkthrough

The React Native Captur Events SDK (github) allows you to integrate Captur's verification capabilities into your React Native applications.

This documentation provides guidance on how to install, initialize, and use the Captur SDK in your React Native projects.

Installation

This library is published to NPMJS. Please contact the Captur team for the Access Token.)

Authentication

A NPMJS Personal Access Token should be added in the home dir .npmrc:

# .npmrc (place this in your user home directory)
//registry.npmjs.org/:_authToken=YOUR_PERSONAL_ACCESS_TOKEN

Install from the command line:

npm install @captur-ai/captur-react-native-events

Basic Usage

1. Initialize the SDK as soon as possible (includes model download)

Before using the Captur SDK, you need to initialize it with your API key and prepare the model for your specific locationName and assetType.

import {
  setApiKey,
  prepareModel,
  getConfig,
  setDelay,
  setTimeout as setCapturTimeout
} from '@captur-ai/captur-react-native-events';

// Set your API key
const apiKeySet = await setApiKey('YOUR_API_KEY');

// Optional: Configure timeout and delay
await setCapturTimeout(20); // in seconds
await setDelay(1); // in seconds

// Prepare the model for your location and asset type
// Parameters: location name, asset type, latitude, longitude
const modelPrepared = await prepareModel('locationName', 'assetType', 0.0, 0.0);

// Get configuration for your location and asset type
const configResult = await getConfig('locationName', 'assetType', 0.0, 0.0);

2. Add the Camera View (launches the camera)

The SDK provides a camera component that handles the verification process:

import { CapturCameraView } from '@captur-ai/captur-react-native-events';

// In your component's render method:
<CapturCameraView
  style={StyleSheet.absoluteFillObject}
  startVerification={true}
  isFlashOn={false}
  isZoomedIn={false}
  referenceId="your-reference-id" // Optional: Provide a unique reference ID for this verification
/>

3. Subscribe to Events (add UI)

The SDK emits events during the verification process that you can subscribe to:

GuidanceEvents include real time information for the user, that should be displayed on screen, while the camera still runs. These are typically instructions for the user to move the camera.

DecisionEvents include user feedback for compliant or non-compliant behaviour, and the image evidence. These are typically a success, or instructions on how to move the object in the scene to for it to be compliant.

import { subscribeToEvents, CapturCameraState, CapturOutput, CapturError } from '@captur-ai/captur-react-native-events';

// Set up event listeners
const unsubscriber = subscribeToEvents({
  // Called when the camera state changes or a decision is made
  capturDidGenerateEvent: (
    capturCameraState: CapturCameraState,
    metadata: CapturOutput | undefined,
  ) => {
    console.log('Camera State:', capturCameraState);
    
    // Check if this is a decision event
    if (metadata && metadata.decision) {
      // Handle the decision
      const isGoodDelivery = metadata.decision === "goodDelivery";
      console.log('Decision:', isGoodDelivery ? 'PASS' : 'FAIL');
      console.log('Details:', metadata);
    }
  },
  
  // Called when an error occurs
  capturDidGenerateError: (capturError: CapturError) => {
    console.log('Error:', capturError);
  },
  
  // Called when guidance is generated
  capturDidGenerateGuidance: (metadata: CapturOutput) => {
    console.log('Guidance:', metadata);
    
    // Display guidance to the user
    if (metadata.decisionTitle) {
      // Show guidance title to the user
    }
    if (metadata.decisionDetail) {
      // Show guidance details to the user
    }
  },
  
  // Called when guidance is revoked
  capturDidRevokeGuidance: () => {
    console.log('Guidance revoked');
    // Clear any displayed guidance
  },
});

// Don't forget to unsubscribe when the component unmounts
useEffect(() => {
  return () => {
    if (unsubscriber) {
      unsubscriber();
    }
  };
}, []);

4. End the Verification Attempt (optional)

When the user wants to complete the verification process:

import { endAttempt } from '@captur-ai/captur-react-native-events';

// Call this when the user wants to end the verification
const handleEndScan = () => {
  // This will trigger the SDK to return a final decision
  endAttempt();
};