# react-native-okaycamplus

## Requirements

### Android

- minSdkVersion >= 30

### iOS

- iOS 15.6+
- Swift 5

## Getting started

`$ yarn add react-native-okaycamplus`

### Android

1. Navigate to `android` folder
2. Add following snippet in the root `build.gradle` file:

```
allprojects {
    repositories {
        maven {
            url "https://innov8tif-okaycam.firebaseapp.com"
        }
    }
}
```

3. Sync gradle

### iOS

1. Navigate to `ios` folder
2. Add the following code to Podfile

```
platform :ios, '15.0'
use_frameworks!

post_install do |installer|
    installer.pods_project.targets.each do |target|
      	target.build_configurations.each do |config|
        	config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
        	config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
      	end
		# fmt/base.h unconditionally redefines FMT_USE_CONSTEVAL based on __cplusplus,
        # so preprocessor defines are overwritten. The reliable fix is to compile fmt
        # in C++17 mode: FMT_CPLUSPLUS (201703L) < 201709L → FMT_USE_CONSTEVAL = 0.
        # All other pods stay in C++20 (React-perflogger needs std::unordered_map::contains).
        if target.name == 'fmt'
        	puts "Enable module stability for fmt"
        	config.build_settings['CLANG_CXX_LANGUAGE_STANDARD'] = 'c++17'
        end
    end
end
```

3. Run command `pod install`

4. Add camera permission

#### Android Issue

Duplicate class org.hamcrest.xxx

If you encouter the errors above, you may exclude junit module.

```
configurations { compile.exclude group: "junit", module: "junit" }
```

#### iOS Issue

> Undefined symbol: \__swift_FORCE_LOAD_$\_swiftUniformTypeIdentifiers

> Undefined symbol: \__swift_FORCE_LOAD_$\_swiftCoreMIDI

If you encouter the errors above, you may create a new swift file called **Void.swift** without adding **bridging header**.

<img src="images/image1.png">

## License

Apply licenses for Android and iOS SDKs

```
const license = Platform.select({
    android: "",
    ios: ""
})
```

## OkayCam Document

### Configuration

| -                       | Property name                  | Description                                                                                                                                                                               | Default value |
| ----------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
|                         | width                          | width to resize the image                                                                                                                                                                 | 2000          |
|                         | imageQuality                   | quality of cropped image                                                                                                                                                                  | 1.0f          |
|                         | **<sup>New</sup>** autoCapture | When set to `true`, the system will automatically capture the document once it is properly detected and aligned. When set to `false`, the user must manually trigger the capture instead. | true          |
| **<sup>New</sup>** mode | FULL                           | Captures front of document, front of document with flash, and back of document automatically. This is the default mode for complete document capture.                                     | ✅            |
|                         | FRONT_ONLY                     | Captures only the front of document.                                                                                                                                                      | ❌            |
|                         | FRONT_BACK                     | Captures both front and back of document automatically without flash.                                                                                                                     | ❌            |
|                         | FRONT_WITH_FLASH               | Captures the front of document with flash enabled                                                                                                                                         | ❌            |

## Usage

```
import { captureDocument, DocumentCaptureMode } from "react-native-okaycam"

  captureDocument(license, false, {
      width: 2000,
      imageQuality: 0.8,
      mode: DocumentCaptureMode.FULL,
    })
      .then(result => {
        console.log(JSON.stringify(result));
      })
      .catch(error => {
        console.log(JSON.stringify(error));
      });
```

### Result

| Result             | Description                    |
| ------------------ | ------------------------------ |
| fullDocumentImage  | Result of first photo          |
| fullDocumentImage2 | Result of first photo cropped  |
| fullDocumentImage3 | Result of second photo         |
| fullDocumentImage4 | Result of second photo cropped |

## OkayCam Selfie

### Configuration

| -                | Property name       | Description                                           | Default value                           |
| ---------------- | ------------------- | ----------------------------------------------------- | --------------------------------------- |
|                  | width               | width to resize the image                             | null                                    |
| -                | imageQuality        | quality of image                                      | 1.0 (range from 0.0 to 1.0)             |
| topLabel         | text                | text of the top label                                 | Please align your face within the frame |
| topLabel         | color               | color of the top label                                | #FFFFFF                                 |
| topLabel         | size                | text size of the top label                            | 24                                      |
| -                | bottomFrameColor    | color of the bottom frame                             | #EB6709                                 |
| switchBtnConfig  | color               | color of the switch button                            | #FFFFFF                                 |
| switchBtnConfig  | show                | show or hide the camera switch button                 | true                                    |
| confirmBtnConfig | backgroundColor     | background color of the confirm button                | #ffa500                                 |
| confirmBtnConfig | contentColor        | content color of the confirm button                   | #ffffff                                 |
| retakeBtnConfig  | backgroundColor     | background color of the retake button                 | #ffa500                                 |
| retakeBtnConfig  | contentColor        | content color of the retake button                    | #ffffff                                 |
| -                | captureBtnColor     | color of the capture button                           | #FFFFFF                                 |
| -                | defaultCameraFacing | initial camera facing when the selfie cam is launched | CameraFacing.FRONT                      |

## Usage

```
import { captureSelfie } from "react-native-okaycamplus"

captureSelfie(
	license,
	false,
	{
		topLabel: {
			text: "Align you face within the frame",
			color: "#4287f5",
			size: 20
		},
		bottomFrameColor: "#4287f5",
		captureBtnColor: "#ffffff",
		switchBtnConfig: {
			color: "#ffffff",
			show: true
		},
        confirmBtnConfig: {
            backgroundColor: "#4287f5",
            contentColor: "#000000"
        },
        retakeBtnConfig: {
            backgroundColor: "#4287f5",
            contentColor: "#000000"
        },
		defaultCameraFacing: "front",
		width: 1000,
        imageQuality: 1.0
	}
)
	.then(result => {
		console.log(result)
	})
	.catch(error => {
		console.log(error)
	})
```

### Result

| Result      | Description           |
| ----------- | --------------------- |
| selfieImage | Captured selfie image |

## OkayCam Selfie Plus

## Usage

```
import { captureSelfiePlus } from "react-native-okaycamplus"

captureSelfiePlus(
	license,
	false
)
	.then(result => {
		console.log(result)
	})
	.catch(error => {
		console.log(error)
	})
```

### Result

| Result                                              | Description                                                                 |
| --------------------------------------------------- | --------------------------------------------------------------------------- |
| { selfie: selfie_image_path, bundle: base64String } | Captured selfie image path and encrypted bundle to pass to OkayFacePlus API |

## Error Codes

| Error                    | Description                                                              |
| ------------------------ | ------------------------------------------------------------------------ |
| invalid license          | The license is invalid                                                   |
| camera permission denied | The use did not grant the permission to access camera in order to do OCR |
| cancel                   | The user canceled during the scanning process                            |