viettel-ekyc-sdk/README.md

Viettel eKYC SDK

### Announcements 
- 🙏 If you have a question, please [opening a new issue](https://github.com/Nguyen-Thanh-Tung/viettel-ekyc-sdk/issues).

# viettel-ekyc-sdk

## Setup

This library is available on npm, install it with: `npm i viettel-ekyc-sdk` or `yarn add viettel-ekyc-sdk`.
This library depends on some common react-native packages:
* [react-native-camera](https://github.com/danieloprado/react-native-camera.git#feature/euler-angle-x)
* [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)
* [react-native-fs](https://github.com/itinance/react-native-fs)
* [react-native-rectangle-scanner](https://github.com/HarvestProfit/react-native-rectangle-scanner)
* [react-native-screens](https://github.com/software-mansion/react-native-screens)
* [react-native-sound](https://github.com/zmxv/react-native-sound)
* [react-native-svg](https://github.com/react-native-svg/react-native-svg)
* [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker)
* [react-native-image-resizer](https://github.com/bamlab/react-native-image-resizer)

```
npm i react-native-vector-icons react-native-fs react-native-rectangle-scanner react-native-screens react-native-sound react-native-svg react-native-image-picker react-native-image-resizer react-native-safe-area-context @react-native-community/image-editor react-native-camera@git+https://github.com/danieloprado/react-native-camera.git#feature/euler-angle-x
```
Or
```
yarn add react-native-vector-icons react-native-fs react-native-rectangle-scanner react-native-screens react-native-sound react-native-svg react-native-image-picker react-native-image-resizer react-native-safe-area-context @react-native-community/image-editor react-native-camera@git+https://github.com/danieloprado/react-native-camera.git#feature/euler-angle-x
```

##### Permissions

To use this package,

1) On Android you must ask for permission:

```java
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
```

2) On iOS, you must update Info.plist with a usage description

```xml
...
<key>NSCameraUsageDescription</key>
<string>Your own description of the purpose</string>
...
	
```
#### Config
1) react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.java file which is located in android/app/src/main/java/<your package name>/MainActivity.java.

Add the following code to the body of MainActivity class:
```
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}
```
and make sure to add an import statement at the top of this file:
```
import android.os.Bundle;
```
2) react-native-camera package requires one additional configuration step to properly work on Android devices. Edit build.gradle file which is located in android/app/build.gradle

Add the following code:
```
defaultConfig {
    ....
    missingDimensionStrategy 'react-native-camera', 'mlkit'
}
```
3) react-native-rectangle-scanner requires one additional configuration step to properly work on Android devices. Edit settings.gradle file which is located in android/settings.gradle

Add the following code:
```
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-rectangle-scanner/android/openCVLibrary310')
```

4) If has bug when compile "Execution failed for task ':app:packageDebug'. > A failure occurred while executing com.android.build.gradle.tasks.PackageAndroidArtifact$IncrementalSplitterRunnable. > Java heap space", edit file gradle.properties file which is located in android/gradle.properties

Add the following code to bottom file:

```
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true
org.gradle.jvmargs=-Xmx4096m -XX:MaxPermSize=4096m -XX:+HeapDumpOnOutOfMemoryError
```
## Usage

1.  Import `viettel-ekyc-sdk`:

```javascript
import {configApi, ViettelEkycScreen} from "viettel-ekyc-sdk";
```

2.  Create a `<ViettelEkycSdk>` component and nest its content inside of it:

```javascript
const screen = () => {
  return (<ViettelEkycScreen
    type='ocrFront'
    enableCheckSanity={true}
    enableCheckTempering={true}
    enableAddFace={false}
    showResultScreen={true}
    enableAutoCaptureCard={true}
    enableAutoCaptureFace={false}
    initialCamera={initialCamera}
    faceLivenessConfiguration={faceConfiguration}
    getResult={(response) => {
      console.log(response.cardInfo)
      console.log(response.faceMatching)
    }}
  />)
}
```

## A complete example

```javascript
import React, {useEffect} from 'react';
import {configApi, ViettelEkycScreen} from 'viettel-ekyc-sdk';

const initialCamera = {
  flash: 'off',
  zoom: 1,
  autoFocus: 'on',
  ratio: '16:9',
  type: 'back',
  canDetectFaces: true,
};

const faceConfiguration = {
  yawAngle: 20,
  pitchAngle: 10,
  rollAngle: 0,
  smilingProbability: 0.5,
  requireList: ['smile'],
};

const token = ''; // Add token here
const clientCode = ''; // Add clientCode here
const App = () => {
  useEffect(() => {
    configApi(token, clientCode).then(() => console.log('Config api done'));
  }, []);

  return (
    <ViettelEkycScreen
      type="ocrFront"
      enableCheckSanity={true}
      enableCheckTempering={true}
      enableAddFace={false}
      showResultScreen={true}
      enableAutoCaptureCard={true}
      enableAutoCaptureFace={false}
      initialCamera={initialCamera}
      faceLivenessConfiguration={faceConfiguration}
      getResult={response => {
        console.log(response.cardInfo);
        console.log(response.faceMatching);
      }}
    />
  );
};
```