React Native 3.3.x ui only

"react-native-trust-vision-SDK": "git+https://<github_token>:[email protected]/tsocial/<repo_name>#<version_tag_name>"

$ yarn

...
pod 'RNTrustVisionRnsdkFramework', path: '../node_modules/react-native-trust-vision-SDK'

...

# Add below lines to the end of podfile
post_install do |installer|
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
            config.build_settings['OTHER_SWIFT_FLAGS'] = '$(inherited) -no-verify-emitted-module-interface'
        end

        // you can add more modules which have the error "Undefined symbol" into the list
        if ['CocoaLumberjack', 'TensorFlowLiteC', 'TensorFlowLiteSwift', 'PromiseKit', 'lottie-ios'].include? "#{target}"
            target.build_configurations.each do |config|
                config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
            end
        end
    end
end

$ pod install

maven {
     url("$rootDir/../node_modules/react-native-trust-vision-SDK/android/repo")
}

allprojects {
    repositories {
        mavenLocal()
        ...
        maven {
             url("$rootDir/../node_modules/react-native-trust-vision-SDK/android/repo")
        }
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

android {
    ...
    aaptOptions {
        noCompress "tflite"
        noCompress "lite"
    }
}

import { NativeEventEmitter } from "react-native";

import RNTrustVisionRnsdkFramework, {
  TVConst,
  TVErrorCode,
  TVThemeCustomization,
} from "react-native-trust-vision-SDK";

try {
  await RNTrustVisionRnsdkFramework.initialize(
    clientSettingJsonString,
    "vi",
    true
  );

  const tvsdkEmitter = new NativeEventEmitter(RNTrustVisionRnsdkFramework);
  // Listen to the events during the capturing
  const subscription = tvsdkEmitter.addListener("TVSDKEvent", (event) => {
    console.log("TVSDK - " + event.name + " - " + event.params.page_name);
  });

  // Listen to the frame batches recorded during the capturing
  const framesRecordedSubscription = tvsdkEmitter.addListener(
    "TVSDKFrameBatch",
    (event) => {
      console.log("TVSDK - " + "FrameBatch: ", obj);
      // upload frame batch to server using this api:
      // https://ekyc.trustingsocial.com/api-reference/customer-api/#upload-videoaudioframes
    }
  );

  const cardType = {
    id: "card_id",
    name: "card_name",
    orientation: TVConst.Orientation.HORIZONTAL,
    hasBackSide: true,
  };
  const idConfig = {
    cardTypes: [cardType],
    isEnableSound: false,
    isReadBothSide: true,
    cardSide: TVConst.CardSide.FRONT,
  };
  console.log("Id Config", idConfig);
  const idResult = await RNTrustVisionRnsdkFramework.startIdCapturing(idConfig);
  console.log("Id Result", idResult);
} catch (e) {
  console.log("Error: ", e.code, " - ", e.message);
}

await RNTrustVisionRnsdkFramework.initialize(
  clientSettingJsonString,
  "vi", // language code
  customizedTVTheme, // cusomized theme
  true // enable event or not
);

const idConfig = {
  cardTypes: [cardType],
  cardSide: TVConst.CardSide.FRONT,
  isEnableSound: false,
  isReadBothSide: true,
  skipConfirmScreen: true,
  isEnablePhotoGalleryPicker: false,
};

const cardType = {
  id: "vn.national_id",
  name: "CMND cũ / CMND mới / CCCD",
  orientation: TVConst.Orientation.HORIZONTAL,
  hasBackSide: true,
  frontQr: {
    exist: true,
    type: "qr_code",
    widthHeightRatio: 1,
  },
};

const result = await RNTrustVisionRnsdkFramework.startIdCapturing(config);

const config = {
  cameraOption: TVConst.SelfieCameraMode.FRONT,
  isEnableSound: true,
  livenessMode: TVConst.LivenessMode.PASSIVE,
  skipConfirmScreen: true,
};

const selfieCapturingResult =
  await RNTrustVisionRnsdkFramework.startSelfieCapturing(config);

var frameBatchIdsDictionary = []; // this dictionary will be used for liveness verification
// frameBatchIdsDictionary.push({
//    key:   <id_returned_from_sdk>,
//    value: <id_returned_from_server>
// });

// Listen to the frame batches recorded during the capturing
const framesRecordedSubscription = tvsdkEmitter.addListener(
  "TVSDKFrameBatch",
  async (frameBatch) => {
    console.log("TVSDK - " + "FrameBatch: ", frameBatch);
    // upload frame batch to server using this api:
    // https://ekyc.trustingsocial.com/api-reference/customer-api/#upload-videoaudioframes
    const uploadingResult = await uploadFrameBatch(frameBatch);
    frameBatchIdsDictionary.push({
      key: frameBatch.batchId,
      value: uploadingResult.fileId,
    });
  }
);

// Remove all invalid batch ids:
Object.entries(frameBatchIdsDictionary).map(
  ([id_returned_from_sdk, id_returned_from_server]) => {
    if (
      !selfieCapturingResult.livenessFrameBatchIds.includes(
        id_returned_from_sdk
      )
    ) {
      delete frameBatchIdsDictionary[id_returned_from_sdk];
    }
  }
);

{
  "id": "<id of frontal image i>"
}

{
  "gesture": "lower case string of <selfieCapturingResult.selfieImages[i].gesture_type>",
  "images": [
    {
      "id": "<id of gesture image i>"
    }
  ]
}

{
"id": "<frameBatchIdsDictionary's values[0]>"
},
{
"id": "<frameBatchIdsDictionary's values[1]>"
}
...

const config = {
  cardType: cardType,
  isEnableSound: false,
  skipConfirmScreen: true,
  cardSide: TVConst.CardSide.FRONT,
};

const result = await RNTrustVisionRnsdkFramework.startQRScanning(config);

const frontQrImage = result.frontIdQr.images[i];
const metadata = frontQrImage.metadata;
const label = frontQrImage.label;
const data = frontQrImage.imageByteArray;

const config = {
  nfcCode: inputIdNumber,
};

const result = await RNTrustVisionRnsdkFramework.startNfcScanning(config);

const customizedTVTheme = () => {
  const normalTextSize = 14.0;
  const labelBackgroundColors = ["#00ffffff"]; // transparent. Set multiple colors if you want gradient
  const normalLabelTextColor = "#ffffff"; // white
  const errorLabelTextColor = "#ff0000"; //red
  const labelBorderColor = "#00ffffff"; // transparent
  const screenBackgroundColor = "#0D0D51"; // blue
  const labelBorderWidth = 1.0;
  const labelPaddingHorizontal = 10.0;
  const labelPaddingVertical = 5.0;
  const cornerRadius = 0.0;

  const normalLabelTheme = {
    isHidden: false,
    textSize: normalTextSize,
    fontStyle: TVThemeCustomization.FontStyle.REGULAR,
    textColor: normalLabelTextColor,
    backgroundColors: labelBackgroundColors,
    isBackgroundGradientHorizontal: false,
    cornerRadius: cornerRadius,
    borderWidth: labelBorderWidth,
    borderColor: labelBorderColor, // transparent
    paddingHorizontal: labelPaddingHorizontal,
    paddingVertical: labelPaddingVertical,
    textGravity: TVThemeCustomization.TextGravity.CENTER,
  };

  const titleLabelTheme = {};
  Object.assign(titleLabelTheme, normalLabelTheme);
  titleLabelTheme["textSize"] = 16.0;
  titleLabelTheme["fontStyle"] = TVThemeCustomization.FontStyle.BOLD;

  const errorLabelTheme = {};
  Object.assign(errorLabelTheme, normalLabelTheme);
  errorLabelTheme["textSize"] = 12.0;
  errorLabelTheme["textColor"] = errorLabelTextColor;

  const timeoutLabelTheme = {};
  Object.assign(timeoutLabelTheme, errorLabelTheme);
  timeoutLabelTheme["isHidden"] = true;

  const idCapturingTheme = {
    titleLabelTheme: titleLabelTheme,
    instructionLabelTheme: normalLabelTheme,
    errorLabelTheme: errorLabelTheme,
    timeoutLabelTheme: timeoutLabelTheme,
    normalLabelTheme: normalLabelTheme,
    closeButtonLocation: TVThemeCustomization.ButtonLocation.TOP_LEFT,
    backgroundColor: "#80000000", // 50% black
    captureButtonImage: "your_base64_image",
    captureButtonDisableImage: "your_base64_image",
    closeButtonImage: "your_base64_image",
    maskViewNeutralImage: "your_base64_image",
    maskViewSuccessImage: "your_base64_image",
    maskViewErrorImage: "your_base64_image",
    loadingImage: "your_base64_image",
    qrInstructionLabelTheme: normalLabelTheme,
    qrInstructionBackgroundImage: "your_base64_image",
    qrMaskViewNeutralImage: "your_base64_image",
    qrMaskViewSuccessImage: "your_base64_image",
    qrMaskViewErrorImage: "your_base64_image",
  };

  const idConfirmationTheme = {
    titleLabelTheme: titleLabelTheme,
    errorLabelTheme: errorLabelTheme,
    normalLabelTheme: normalLabelTheme,
    closeButtonLocation: TVThemeCustomization.ButtonLocation.TOP_LEFT,
    backgroundColor: screenBackgroundColor,
    closeButtonImage: "your_base64_image",
    icQrResultSuccessImage: "your_base64_image",
    icQrResultErrorImage: "your_base64_image",
    confirmButtonImage: "your_base64_image",
    retryButtonImage: "your_base64_image",
    maskViewImage: "your_base64_image",
    loadingImage: "your_base64_image",
  };

  const gestureTheme = {
    currentStepFocusImage: "your_base64_image",
    turnLeftActiveImage: "your_base64_image",
    finishedGestureBackgroundImage: "your_base64_image",
    turnRightActiveImage: "your_base64_image",
    turnUpActiveImage: "your_base64_image",
    turnDownActiveImage: "your_base64_image",
    lookStraightActiveImage: "your_base64_image",
    turnLeftInactiveImage: "your_base64_image",
    turnRightInactiveImage: "your_base64_image",
    turnUpInactiveImage: "your_base64_image",
    turnDownInactiveImage: "your_base64_image",
    lookStraightInactiveImage: "your_base64_image",
  };

  const selfieCapturingTheme = {
    titleLabelTheme: titleLabelTheme,
    instructionLabelTheme: normalLabelTheme,
    errorLabelTheme: errorLabelTheme,
    timeoutLabelTheme: timeoutLabelTheme,
    normalLabelTheme: normalLabelTheme,
    closeButtonLocation: TVThemeCustomization.ButtonLocation.TOP_LEFT,
    gestureTheme: gestureTheme,
    backgroundColor: screenBackgroundColor,
    captureButtonImage: "your_base64_image",
    captureButtonDisableImage: "your_base64_image",
    closeButtonImage: "your_base64_image",
    maskViewNeutralImage: "your_base64_image",
    maskViewSuccessImage: "your_base64_image",
    maskViewErrorImage: "your_base64_image",
    loadingImage: "your_base64_image",
    switchCameraSideImage: "your_base64_image",
  };

  const selfieConfirmationTheme = {
    titleLabelTheme: titleLabelTheme,
    instructionLabelTheme: normalLabelTheme,
    errorLabelTheme: errorLabelTheme,
    normalLabelTheme: normalLabelTheme,
    closeButtonLocation: TVThemeCustomization.ButtonLocation.TOP_LEFT,
    backgroundColor: screenBackgroundColor,
    closeButtonImage: "your_base64_image",
    confirmButtonImage: "your_base64_image",
    retryButtonImage: "your_base64_image",
    maskViewImage: "your_base64_image",
    loadingImage: "your_base64_image",
  };

  const qrPopupLabelTheme = {
    textSize: 16.0,
    textColor: "#99002F75" /* 60% opacity */,
  };

  const qrPopupPrimaryButtonTheme = {
    cornerRadius: 3.0,
    textSize: 16.0,
    textColor: "#ffffff",
    backgroundColors: ["#0276F1"], // set multiple color if you want gradients
  };

  const qrGuidelinePopupTheme = {
    backgroundColor: "#ffffff",
    headerImage: "your_base64_image",
    titleLabelTheme: { isHidden: true }, // hide label,
    descriptionTheme: qrPopupLabelTheme,
    primaryButtonTheme: qrPopupPrimaryButtonTheme,
    secondaryButtonTheme: { isHidden: true }, // hide button
    timeoutLabelTheme: qrPopupLabelTheme,
  };

  const qrRetryPopupTheme = {
    backgroundColor: "#ffffff",
    headerImage: "your_base64_image",
    titleLabelTheme: qrPopupLabelTheme,
    descriptionTheme: qrPopupLabelTheme,
    primaryButtonTheme: qrPopupLabelTheme,
    secondaryButtonTheme: qrPopupLabelTheme,
    timeoutLabelTheme: { isHidden: true }, // hide label
  };

  const tvTheme = {
    idCapturingTheme: idCapturingTheme,
    idConfirmationTheme: idConfirmationTheme,
    selfieCapturingTheme: selfieCapturingTheme,
    selfieConfirmationTheme: selfieConfirmationTheme,
    qrGuidelinePopupTheme: qrGuidelinePopupTheme,
    qrRetryPopupTheme: qrRetryPopupTheme,
  };

  return tvTheme;
};