React Native Darwinium SDK Module

Integrating darwinium sdk into react native app

Installation

Setup npm credentials for darwinium npm repository

File ~/.npmrc @darwinium:registry=https://dwnedge.jfrog.io/artifactory/api/npm/dwn-npm //dwnedge.jfrog.io/artifactory/api/npm/dwn-npm/:_authToken= //dwnedge.jfrog.io/artifactory/api/npm/dwn-npm/:email=<user_email> //dwnedge.jfrog.io/artifactory/api/npm/dwn-npm/:always-auth=true

via npm

Run npm install @darwinium/native-module-sdk --save

via yarn

Run yarn add @darwinium/native-module-sdk

Linking

Android

This NPM package supports Darwinium Android SDK version:

SDK Version: 2.3.0

After 'npm install' the module will be automatic linked to your app

iOS

1. Add darwinium module source codes as compile source, Source codes location is under node_module

    > ls node_modules/@darwinium/native-module-sdk/ios
    	DwnSDKModule.m
    	DwnSDKModule.swift
   

2. Add the following line into you app ios/Podfile

    pod 'dwn_ios_sdk', :git => 'https://packages.darwinium.com/sdk/dwn_ios_sdk.git', :tag => '<ios_sdk_version>'
   

Usage

Darwinium sdk native module is wrapped in a Javascript class, located at

	node_modules/@darwinium/native-module-sdk/index.js

import { NativeModules } from 'react-native';

class DarwiniumSDK {
    // Darwinium SDK support multiple instances
    // viewName will give a name for each instance
    constructor(viewName) {
        this.viewName = viewName;
        if (NativeModules && NativeModules.DwnSDKModule) {
             this.is_valid = true;
        } else {
             console.log("DwnSDKModule doesn't exist");
             this.is_valid = false;
        }
    }

    start() {
        if (!this.is_valid) return;
        if (Platform.OS == 'android') {
            NativeModules.DwnSDKModule.profilingStart(this.viewName);
        } else if (Platform.OS == 'ios') {
            NativeModules.DwnSDKModule.start(this.viewName);
        }
    }
    // Need call stop() when view is removed/unmounted
    stop() {
        if (!this.is_valid) return;
        if (Platform.OS == 'android') {
            NativeModules.DwnSDKModule.profilingStop(this.viewName);
        } else if (Platform.OS == 'ios') {
            NativeModules.DwnSDKModule.stop(this.viewName);
        }
    }
    // Apply textView for keyboard biometrics detection
    // Each textView has to have placeHolder
    // Works for both Android and iOS sdk
    addTextView(placeHolder, dwnContext) {
        if (!this.is_valid) return;
        NativeModules.DwnSDKModule.addTextView(this.viewName, placeHolder, dwnContext);
    }

    // addTextViewByRef is a more convenient method, you can directly pass the useRef of TextInput,
    // and SDK will get nativeId internally, but it only works for Android SDK,
    // iOS SDK doesn't support it because of the system limitation
    addTextViewByRef(ref, dwnContext) {
        if (!this.is_valid) return;
        if (Platform.OS == 'android') {
            const nativeId = findNodeHandle(ref.current);
            this.addTextViewById(nativeId, dwnContext);
        } else if (Platform.OS == 'ios') {
            console.log("addTextViewByRef is not supported for iOS SDK");
        } 
    }

    // Another method to detect textView biometrics behaviours without placeHolder
    // There are a set of interfaces for it, but only works for Android SDK

    // Pass the whole input field value directly to SDK
    onTextChange(value, dwnContext) {
        if (!this.is_valid) return;
        if (Platform.OS == 'android') {
            NativeModules.DwnSDKModule.onTextChange(this.viewName, value, dwnContext);
        }
    }
    // When focus switch on/off, call the function
    onFocusChange(focus, dwnContext) {
        if (!this.is_valid) return;
        if (Platform.OS == 'android') {
            NativeModules.DwnSDKModule.onFocusChange(this.viewName, focus, dwnContext);
        }
    }
    // Pass the pressed key value directly to SDK
    onKeyPress(key, dwnContext) {
        if (!this.is_valid) return;
        if (Platform.OS == 'android') {
            NativeModules.DwnSDKModule.onKeyPress(this.viewName, key, dwnContext);
        }
    }

    // Specify the configuration setting for sdk
    // Call it before sdk.start()
    // For android sdk, if you set "permission" = "yes", sdk will pop-up permission window
    //    e.g.  sdk.setConfig("permission", "yes")
    setConfig(key, value) {
        if (!this.is_valid) return;
        NativeModules.DwnSDKModule.setConfig(this.viewName, key, value);
    }

    // Get FP data blob, base64 string, callback function will process the data
    collect(callback) {
        if (!this.is_valid) return;
        if (Platform.OS == 'android') {
            NativeModules.DwnSDKModule.getProfilingData(this.viewName)
            .then(blob=> {
                callback(blob);
            })
            .catch(e => {
                console.log("Failed to get FP blob: " + e.toString());
            });
        } else if (Platform.OS == 'ios') {
            NativeModules.DwnSDKModule.collect(this.viewName, callback);
        }
    }
}

export default DarwiniumSDK;

Here is an example how you integrate darwinium native module into React Native code

import DarwiniumSDK from '@darwinium/native-module-sdk'

const SigninScreen = ({signUp}) => {
  // generate a SDK instance with a label on it
  // darwinium support multiple sdk instances, label like instance name
  const sdk = new DarwiniumSDK("signin")
  const collectFP = () => {
      // collect pass callback function
      sdk.collect(blob => {
        console.log('FP data blob: ' + blob);
        // TODO: Do an API call with the blob
      });
  };

  const passwordInputRef = useRef(null);

  useEffect(() => {
    sdk.start()

    // Three Methods for detecting TextInput field biometrics
    // #1 pass placeholder of the textInput to SDK
    sdk.addTextView('Enter Email', 'EMAIL')

    // #2 pass useRef to wrapper, wrap will get nativeId and pass to SDK
    // Android only
    sdk.addTextViewByRef(passwordInputRef, 'PASSWORD')

    return () => {
      // Cleanup logic (optional)
      console.log('Sign In unload: ' + Platform.OS);
      sdk.stop()
    };
  }, []);

        <TextInput
          placeholder="Enter Email"
          style={styles.inputField}
          inputMode="text"
          autoCapitalize="none"
          //onChangeText={text => sdk.onTextChange(text, "EMAIL")}
          //onFocus={_ => sdk.onFocusChange(true, "EMAIL")}
          //onBlur={_ => sdk.onFocusChange(false, "EMAIL")}
        />

        <TextInput
          ref={passwordInputRef}
          placeholder="Enter Password"
          style={styles.inputField}
          inputMode="text"

          // #3 pass event directly to SDK
          onChangeText={text => sdk.onTextChange(text, "PASSWORD")}
          onFocus={_ => sdk.onFocusChange(true, "PASSWORD")}
          onBlur={_ => sdk.onFocusChange(false, "PASSWORD")}
        />
      </View>