> For the complete documentation index, see [llms.txt](https://api2-ekycapis.innov8tif.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://api2-ekycapis.innov8tif.com/okaycam-mobile-sdk/okaycam-plus-mobile-sdk/okaycam-plus-react-native/development-guide-document-capture.md).

# Development Guide (Document Capture)

## OkayCam Document Capture

### 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                                                                                     | #ffffffsize                                                                     |
| 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                          | 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 <sup>**New**</sup> | title                  | Instruction's title on camera caputre screen                                                               | ""(empty string)                                                                |
| instruction <sup>**New**</sup> | refImage1              | Instruction's reference image 1                                                                            | null                                                                            |
| instruction <sup>**New**</sup> | refImage2              | Instruction's reference image 2                                                                            | null                                                                            |
| -                              | showPreviewInstruction | Show or hide preview instruction for captured photos                                                       | false                                                                           |

### Usage

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

captureDocument(
	license,
	false,
	{
		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)
	})
```

### Results

<table><thead><tr><th width="217">Result</th><th>Description</th></tr></thead><tbody><tr><td>fullDocumentImage</td><td>Result of firstPhotoConfig</td></tr><tr><td>fullDocumentImage2</td><td>Result of secondPhotoConfig. Will only return if secondPhotoConfig is configured</td></tr></tbody></table>