> 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 **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-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
Result
Description
fullDocumentImage
Result of firstPhotoConfig
fullDocumentImage2
Result of secondPhotoConfig. Will only return if secondPhotoConfig is configured
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://api2-ekycapis.innov8tif.com/okaycam-mobile-sdk/okaycam-plus-mobile-sdk/okaycam-plus-react-native/development-guide-document-capture.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.