react-native-okaycam

Requirements

Android

• minSdkVersion >= 26

iOS

• iOS 15+
• 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, '15.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
      	if (target.name&.eql?('FBReactNativeSpec'))
        	target.build_phases.each do |build_phase|
          		if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs'))
        	    	target.build_phases.move(build_phase, 0)
          		end
        	end
      	end
      	target.build_configurations.each do |config|
        	config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
        	config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
      	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