A react native port for QuickCapture AI Document and Asset Scanning SDK with QR & BAR code Generation and scanning,including image information reading, and custom text stamping support.
npm install @extrieve_technologies/quickcapture_react_nativeThe Quickcapture plugin offers functionalities for capturing documents and optical codes (like QR codes and barcodes), building PDFs from captured images, and generating QR and barcode images from provided data. This document guides you through the installation and utilization of the Quickcapture plugin in your React Native application.
JDK : 17 & NPM :18 React-native verison : 0.72+
Follow these steps to install the Quickcapture plugin using either npm or Yarn, depending on your preference:
Using npm
1. Add the Package:
``bash`
npm install @extrieve_technologies/quickcapture_react_native
2. Link the Package:
If you are using React Native 0.60 or above, autolinking will handle the rest. For iOS, you must run:
bash`
cd ios && pod install && cd..
3. Rebuild Your Application:
Rebuild your application to ensure all native dependencies are properly linked.
For iOS:
`bash`
npx react-native run-ios
For Android:
bash`
npx react-native run-android
Using Yarn
1. Add the Package:
bash`
yarn add @extrieve_technologies/quickcapture_react_native
`js
import {
//If need to activate the SDK without restrictions - optional
activateLicense,
//TO initialise license - mandatory
initialise,
//For Document Capture capabilities, add following - optional
captureDocument,
buildPdfForLastDocumentCapture,
//For Bar/QR Code capabilities, add following - optional
captureOpticalCode,
generateQRCode,
generateBarcode,
assetCapture,
readImageInfo,
setBottomStampData
} from '@extrieve_technologies/quickcapture_react_native';
// Initialize Quickcapture
//activateLicense('Your Android license key', 'Your iOS license key');
activateLicense(androidLicense, iosLicense).then((response) => {
//response - true/false
});
//call plugin initialisation
initialise();
`
2. captureDocument : To start capturing images, call startCapture. This function returns a promise that resolves with the JSON string having an array of the captured images file path:
`js`
captureDocument().then((resultString) => {
const result = JSON.parse(resultString);
})
.catch((error) => {
console.error('Error starting capture:', error);
});
3. buildPdfForLastDocumentCapture : To build a PDF from the last capture set, use buildPdfForLastCapture. This function also returns a promise that resolves with the path to the generated PDF:
`jsGenerated PDF path: ${pdfFilePath}
buildPdfForLastCapture().then(pdfFilePath => {
console.log();PDF generation error: ${error}
}).catch(error => {
console.error();`
});
4. captureOpticalCode : To Captures an optical code (QR code or barcode) using the device camera.Will returns a promise that resolves to the scanned code data in JSON string
`js`
captureOpticalCode().then((resultString) => {
//handle JSON data here.
const result = JSON.parse(resultString);
console.log('Scanned code : ', result.DATA);
})
.catch((error) => {
console.error('Error Scanning code:', error);
});
5. generateQRCode : Generates a QR code from provided data.Need to provide a data in string.in return, a promise that resolves data with Base64 data of the generated QR code image will get.
`jsError: ${error.message}
generateQRCode(qrText).then((base64String) => {
// use barcode image in Base64 data format here.
//image encoded and a PNG image in Base64 format
//setBase64Image(base64String);
Alert.alert('The QR code was generated successfully');
})
.catch((error) => {
console.error('Error generating QR code:', error);
Alert.alert('QR Generation Error', );`
});
6. generateBarcode : Generates a BAR code from provided data.Need to provide a data in string and also can specify if the BARcode with text needed.In return, a promise that resolves data with Base64 data of the generated BAR code image will get.
`jsError: ${error.message}
generateBarcode(qrText, enableText).then((base64String) => {
// use barcode image in Base64 data format here.
//image encoded and a PNG image in Base64 format
//setBase64Image(base64String);
Alert.alert('Barcode generated successfully.');
})
.catch((error) => {
console.error('Error generating QR code:', error);
Alert.alert('QR Generation Error', );`
});
7. assetCapture : To start capturing assets, call assetCapture. This function returns a promise that resolves with the JSON string having an array of the captured images file path:
`js`
assetCapture().then((resultString) => {
const result = JSON.parse(resultString);
})
.catch((error) => {
console.error('Error starting capture:', error);
});
8. readImageInfo : To retrieve metadata from an image file such as height, width, color type, and page count, call readImageInfo.
Supported image formats:
- TIFF
- JPEG / JPG
- PNG
- BMP
Usage
`js`
readImageInfo().then((resultString) => {
const result = JSON.parse(resultString);
})
.catch((error) => {
console.error('Error reading image information:', error);
});
#### This function returns a promise that resolves to a JSON string :
#### Failure Response (Returned as String containing JSON)
`js`
{ "Status": false, "ErrorMessage": "Reason for failure" }
#### Success Response (Returned as String containing JSON)
`js`
{
"FILESIZE": 146 KB,
"TOTAL_PAGES": 1,
"INFORMATION": [
{
"PAGENO": 1,
"WIDTH": 475,
"HEIGHT": 307,
"COLOR_TYPE": "GREY"
}
]
}
----------
#### 📖 Field Description
| Field | Description |
| --------------- | -------------------------------------------------------- |
| FILESIZE | Total size of the image file in KB |
| TOTAL_PAGES | Number of pages (TIFF may contain multiple; JPG/PNG = 1) |
| PAGE_NO | Current page number in the image |
| WIDTH | Width of the image in pixels |
| HEIGHT | Height of the image in pixels |
| COLOR_TYPE | Image color type: COLOR, GREY, or BW |
9. setBottomStampData :To set a custom bottom stamp string to be added to the bottom of the image, call setBottomStampData.
`js``
// {DATETIME} - Placeholder that will be replaced with the current data and time from the device at the time of stamping
// $ - for new line print
String inputText = "{DATETIME} $ Extrieve Technology Private Limited $ Kolkata, India";
setBottomStampData(inputText);
See the contributing guide to learn how to contribute to the repository and the development workflow.
Made with create-react-native-library