druid-ogold-rn-sdk

Druid is a React Native package that enables clients to conduct KYC against their customers for easy onboarding and well-informed decision making.

The simplified process flow makes it a smooth experience for end-users (customers).

Existing Features

The version 0.0.x has the following feature support:

| Feature | Description | | ----------------------- | --------------------------------------------------------------------------- | | Face Liveness Detection | Detects spoof, deepfake, and malicious attempts, providing instant results. | | AI-Based OCR | Allows automated form filling with OCR | | ID Verification | Compares the image in the ID vs the live face |

Upcoming Features:

v0.1.x

| Feature | Description | | ----------------- | ------------------------------------------------------------------------------ | | Document ID Check | Checks if the uploaded document is a valid document (Passport, EmiratesID...). |

Usage

In any React Native component or screen, attach the following piece of code. This activates the widget. The widget requires secrets as a pre-requisite.

import Widget from "@thenovaweb/druid-ogold-rn-sdk";
import { View, StyleSheet } from "react-native";

return (
  <View style={styles.widgetContainer}>
    <Widget
      phoneNumber="987654321"
      email="[email protected]"
      clientUuid="xxx-xxx-xxx"
      clientSecret="xxx-xxx-xxx"
    />
  </View>
);

const styles = StyleSheet.create({
  widgetContainer: {
    height: "100%", // Setting container height is important when using a view wrapper
  },
});

The widget acts as an entry point to the workflow. It packs great capabilities and shows the status with relevant descriptions for each step of the onboarding flow.

Required Babel Configuration

To ensure Reanimated 3 and other worklet-based features work correctly with this SDK, add the following babel.config.js to your project:

module.exports = function (api) {
  api.cache(true); // Cache the config for faster builds

  return {
    presets: ["babel-preset-expo"], // Required for Expo + React Native
    plugins: [
      ["react-native-worklets-core/plugin"], // Required for worklets
      ["react-native-reanimated/plugin", { processNestedWorklets: true }], // Required for Reanimated 3, must be last
    ],
  };
};

⚠️ Notes:

• The react-native-reanimated/plugin must always be last in the plugins array.
• This configuration is minimal and required; optional plugins (like react-native-paper) can be added in env blocks if needed.

Required Host App Dependencies

The host app must install the following native and Expo packages with these versions:

| Package | Version | | ---------------------------------------- | -------- | | @react-navigation/native | ^7.1.9 | | @react-navigation/native-stack | ^7.3.26 | | @reduxjs/toolkit | ^2.9.0 | | react-redux | ^9.2.0 | | @react-native-community/datetimepicker | ^8.4.1 | | react-native-paper | ^5.14.5 | | @react-native-vector-icons/feather | ^12.3.0 | | react-native-reanimated | ~3.17.4 | | react-native-safe-area-context | ~5.4.0 | | react-native-screens | ~4.11.1 | | react-native-vision-camera | ~4.7.2 | | react-native-vision-camera-face-detector | ^1.10.1 | | expo | ^53.0.20 | | expo-image-picker | ~16.1.4 | | expo-file-system | ^19.0.14 | | expo-image-manipulator | ^13.1.7 | | expo-blur | ~14.1.4 | | expo-linear-gradient | ~14.1.5 | | expo-asset | ~11.1.7 | | react-native-worklets-core | ^1.6.2 |

Install command example:

npm install @react-navigation/native@^7.1.9 @react-navigation/native-stack@^7.3.26 @reduxjs/toolkit@^2.9.0 react-redux@^9.2.0 @react-native-community/datetimepicker@^8.4.1 react-native-paper@^5.14.5 @react-native-vector-icons/feather@^12.3.0 react-native-reanimated@~3.17.4 react-native-safe-area-context@~5.4.0 react-native-screens@~4.11.1 react-native-vision-camera@~4.7.2 react-native-vision-camera-face-detector@^1.10.1 expo@^53.0.20 expo-image-picker@~16.1.4 expo-file-system@^19.0.14 expo-image-manipulator@^13.1.7 expo-blur@~14.1.4 expo-linear-gradient@~14.1.5 expo-asset@~11.1.7 react-native-worklets-core@^1.6.2

After installation, rebuild the app (expo run:android / expo run:ios) to ensure native modules are linked correctly.

Android Configuration

Ensure your android/app/build.gradle has the following setting:

android {
    defaultConfig {
        minSdkVersion 26 // Required for VisionCamera and Reanimated 3
    }
}

Required Permissions

The SDK depends on camera and photo access. Add the following to your app.json (or app.config.js) under the expo.plugins section:

{
  "expo": {
    "plugins": [
      [
        "react-native-vision-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera"
        }
      ],
      [
        "expo-image-picker",
        {
          "photosPermission": "Allow $(PRODUCT_NAME) to access your photos",
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera"
        }
      ],
      [
        "expo-font",
        {
          "fonts": [
            "./node_modules/@react-native-vector-icons/feather/fonts/Feather.ttf"
          ]
        }
      ]
    ]
  }
}

Documentation

Please reach out to the package developers for the comprehensive documentation of the package.