react-native-okaycam

Requirements

Android

• minSdkVersion >= 21

iOS

• iOS 12+
• Swift 5

Getting started

$ react-native install react-native-okaycam

iOS

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

platform :ios, '11.0'
use_frameworks!

post_install do |installer|
    installer.pods_project.targets.each do |target|
        if target.name == "CryptoSwift"
			puts "Enable module stability for CryptoSwift"
			target.build_configurations.each do |config|
				config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
			end
        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.

License

Apply licenses for Android and iOS SDKs

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

OkayCam Document

Configuration

| - | Property name | Description | Default value | | ------------------------------ | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | - | torchBtnEnabled | to show torch button. If set to true, it will only be shown if onFlash from captureConfig is set to false. | false | | - | crop | crop the frame area | false | | - | width | width to resize the image | original width | | - | imageQuality | quality of image | 1.0 (range from 0.0 to 1.0) | | frame | size | size of the frame (width and height) | 90% of screen width and height is scaled proportionally according to card ratio | | frame | color | color of the frame | #ffffff | | frame | content | content of the frame (able to display svg file within the frame for guidance | null | | - | showOverlay | transparent black overlay | true | | topLabel | text | text of the top label | ""(empty string) | | topLabel | color | color of the top label | #ffffff | | topLabel | size | text size of the top label | 20 | | bottomLabel | text | text of the bottom label | ""(empty string) | | bottomLabel | color | color of the bottom label | #ffffff | | bottomLabel | size | text size of the bottom label | 20 | | timer | backgroundColor | background of the count down timer | #ffa500 | | timer | textColor | text color of the count down timer | #ffffff | | 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 | | - | firstPhotoConfig | config for the first capture | delay:0s,onFlash:false,outputPath: null | | - | secondPhotoConfig | config for the second capture | null | | preview | title | title on preview screen | ""(empty string) | | preview | refImg | ref image on preview screen | null | | preview | instruction1 | instruction on preview screen | ""(empty string) | | preview | instruction2 | instruction on preview screen | ""(empty string) | | preview | instruction3 | instruction on preview screen | ""(empty string) | | preview | backgroundColor | background color of preview screen | null | | instruction New | title | Instruction's title on camera caputre screen | ""(empty string) | | instruction New | refImage1 | Instruction's reference image 1 | null | | instruction New | refImage2 | Instruction's reference image 2 | null | | - | showPreviewInstruction | Show or hide preview instruction for captured photos | false |

Usage

import { captureDocument } from "react-native-okaycam"

captureDocument(
	license,
	{
		topLabel: {
			text: "Align your card within the frame",
			color: "#4287f5",
			size: 20
		},
		bottomLabel: {
			text: "Tap to Focus",
			color: "#4287f5",
			size: 20
		},
        frame: {
            size: {
				width: 1000,
				height: 300,
			},
			color: "#4287f5",
        	content: require('./images/content.svg')
		},
		showOverlay: true,
		timer: {
			backgroundColor: "#4287f5",
			textColor: "#ffffff"
		},
        torchBtnEnabled: true,
        confirmBtnConfig: {
            backgroundColor: "#4287f5",
            contentColor: "#000000"
        },
        retakeBtnConfig: {
            backgroundColor: "#4287f5",
            contentColor: "#000000"
        },
		captureBtnColor: "#4287f5",
		firstPhotoConfig: {
			delay: 0,
			onFlash: false,
			outputPath: null
		},
		secondPhotoConfig: {
			delay: 5,
			onFlash: true,
			outputPath: null
		},
		crop: true,
		width: 2000,
        imageQuality: 1.0,
		preview: {
			title: {text: 'testing', color: '#000000', size: 25},
			refImage: require('./images/ref.png'),
			instruction1: {text: 'instr1', color: '#000000', size: 14},
			instruction2: {text: 'instr2', color: '#000000', size: 14},
			instruction3: {text: 'instr3', color: '#000000', size: 14},
			backgroundColor: '#374fff',
      },
	  instruction: {
        title: {text: 'instr1', color: '#ffffff', size: 14},
        refImage1: {
          title: {text: 'ref1', color: '#ffffff', size: 14},
          img: require('./images/ref.png'),
        },
        refImage2: {
          title: {text: 'ref2', color: '#ffffff', size: 14},
          img: require('./images/ref.png'),
        },
      },
	  showPreviewInstruction: false,
	}
)
	.then(result => {
		console.log(result)
	})
	.catch(error => {
		console.log(error)
	})

Result

| Result | Description | | ------------------ | -------------------------------------------------------------------------------- | | fullDocumentImage | Result of firstPhotoConfig | | fullDocumentImage2 | Result of secondPhotoConfig. Will only return if secondPhotoConfig is configured |

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-okaycam"

captureSelfie(
	license,
	{
		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 |

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 |