Getting Started
If you would like to jump into some code directly, a good starting point for development with the Anyline SDK on React Native, is to check out our React Native repository on Github. In here, you can find example apps for iOS and Android with full source code for use cases that you can use as a starting point for your specialized scanning workflow.
Requirements
In order to use the Anyline SDK React Native Plugin, please see to it that the following requirements are met:
Android
-
Android SDK Level >= 21
-
An Android device with decent camera functionality (recommended: 720p and adequate auto focus)
iOS
-
Minimum OS version: 12.0
-
Disable bitcode in your project if it enabled.
-
Add Camera Permissions to Info.plist
Anyline 43.0.0 is a major rewrite of the scanner architecture and brings significant improvements to scanning performance and reliability. If you are coming from an older version, be aware of some breaking changes when upgrading to this version. The most important change concerns JSON configuration. You will have to update your config files in JSON to properly initialize Anyline for React Native. For more information, refer to the section on preparing a config file as well as upgrade guides for the respective iOS and Android platforms. |
Anyline React Native Guide
In this guide, we want to show you how you can make the most out of Anyline using our React Native plugin. Feel free to contact us if you feel that it is incomplete or particular sections need elaboration.
Get an Anyline License
To be able to use the React Native plugin you will have to get a license key by following the steps detailed in our documentation.
Install the Anyline plugin
Add our maven repository to the build.gradle
file located in your android folder:
maven { url 'https://anylinesdk.blob.core.windows.net/maven/' }
Afterwards add the plugin via yarn or npm or any other package manager:
$ yarn add anyline-ocr-react-native-module
Import Anyline into your React Native project
Now in your React Native code, bring in Anyline with the following import:
import AnylineOCR from 'anyline-ocr-react-native-module';
Prepare a config file
Anyline uses JSON to configure how scan plugins operate and behave. You can find sample configurations in our Anyline React Native Github repository. For more information and a general overview of how this works, please also visit our Documentation page.
{
"cameraConfig": {
"captureResolution": "1080p",
"zoomGesture": true
},
"flashConfig": {
"mode": "manual",
"alignment": "top_left"
},
"viewPluginConfig": {
...
}
}
Initialise the SDK
Initialise the Anyline SDK by calling the init method with the license key you have acquired:
try {
await AnylineOCR.setupAnylineSDK(anylineLicenseKey);
} catch (error) {
console.log('error initializing Anyline SDK: ' + error);
}
Attempting to call setupPromise
before initialising the Anyline SDK will result in an error.
Start scanning
To start scanning you can set up a promise with the keyword scan
and the JSON config mentioned in Prepare a config file and wait for the result:
const result = await AnylineOCR.setupPromise(
JSON.stringify(jsonConfig),
'scan',
);
Handling the results
If the scan was successful, the returned scan result is represented as a JSON string, has a structure that depends on the plugin used.
Here is an example of a result string returned from a Meter scan.
{
"fullImagePath" : "...",
"pluginID" : "auto-meter",
"confidence" : 99,
"imagePath" : "...",
"meterResult" : {
"value" : "00613.839"
},
"cropRect" : {
"y" : 410,
"width" : 671,
"height" : 298,
"x" : 204
}
}
In the case of the JSON result above, The To obtain the readout, deserialize the string as a JSON object and then locate the relevant property. |
The scanned value is always found within the xxxResult
where xxx
is the type of the plugin that was executed during the scan. In the example above, this value was in meterResult
.
The following sections cover JSON result structure for other common plugin types. For a complete and up-to-date reference to the result object, please head to Plugin Result Parameters.
Meter
The Anyline Meter plugin is capable of scanning various types of electric, gas, and water meters. Furthermore, it is also possible to scan barcodes and QR codes, as well as serial numbers found on meters alongside their readings. Common 7-segment digital meters and "dial" meters could also be scanned by this plugin.
{
"imagePath" : "...",
"fullImagePath" : "...",
"pluginID" : "meter",
"confidence" : 100,
"meterResult" : {
"value" : "020793"
},
"cropRect" : {
"y" : 410,
"width" : 671,
"height" : 298,
"x" : 204
}
}
Barcode
With the Anyline Barcode plugin, a large variety of barcode including QR code formats can be scanned. Furthermore, the plugin is often capable of scanning barcodes that are rotated at angles, which makes it easier to scan codes placed in certain ways.
{
"fullImagePath" : "...",
"imagePath" : "...",
"barcodeResult" : {
"barcodes" : [
{
"coordinates" : [ 865, 132, 868, 6, 254, -4, 251, 118 ],
"value" : "1878266301",
"base64Value" : "...",
"format" : "CODE_128"
}
]
},
"pluginID" : "barcode",
"confidence" : 89,
"cropRect" : {
"y" : 739,
"width" : 661,
"height" : 440,
"x" : 209
}
}
The barcodes detected are returned as an array named barcode
within barcodeResult
. Each structure consists of the barcode rect (expressed as a series of four (X,Y) coordinate pairs), the Base64-encoded value of the barcode ("NDMwNjYyNw=="
), and the barcode symbology (otherwise known as format).
License Plate
The License Plate plugin can be used to scan license plates of various sizes and from different countries.
The result of a license plate scan looks similar to this:
{
"fullImagePath" : "...",
"imagePath" : "...",
"licensePlateResult" : {
"country" : "D",
"plateText" : "GLN 8988"
},
"pluginID" : "license-plate",
"confidence" : 100,
"cropRect" : {
"y" : 425,
"width" : 755,
"height" : 188,
"x" : 162
}
}
ID
The Anyline ID plugin provides the functionality to scan passports, driving licenses, and other IDs including those that contain an MRZ (Machine Readable Zone).
The list of ID types supported by the ID Plugin is continuously being updated, and grows with each release. Please check the ID Plugin documentation for an up-to-date list for the current Anyline version. |
{
"imagePath": "...",
"fullImagePath": "...",
"pluginID": "id",
"confidence": -1,
"universalIdResult": {
"result": {
"dateOfBirth": {
"textValues": {
"latin": {
"text": "10.10.1988",
"confidence": 99
}
}
},
"documentNumber": {
"textValues": {
"latin": {
"text": "PX20LJ641",
"confidence": 99
}
}
},
"formattedDateOfBirth": {
"textValues": {
"latin": {
"text": "10.10.1988",
"confidence": 99
}
}
},
"firstName": {
"textValues": {
"latin": {
"text": "JAN",
"confidence": 99
}
}
},
...
},
"visualization": {
"contourPoints": [
...
],
"contours": [
...
],
"textRect": [ 392, 109, 377, 323 ]
},
"layoutDefinition": {
"country": "DE",
"layout": "DE_IDC_O_02001_F",
"type": "idFront"
}
},
"cropRect": {
"y": 671,
"width": 900,
"height": 577,
"x": 89
}
}
The scanned details of each detected ID field is a node named after itself. Inside it is textValues
, a map node holding values for the scanned text group according to script type. If there are multiple scripts found for the same field (for instance, Arabic or Cyrillic), they will be listed alongside the Latin value.
Under visualization
, are coordinates to regions in the scanned image which you may use to locate the visible areas of the ID where Anyline was able to find matches.
layoutDefinition
contains metadata about the scan results, including the type of document detected and its country of origin.
MRZ
{
"fullImagePath": "...",
"mrzResult": {
"documentNumber": "PX20LJ641",
"dateOfBirth": "881010",
"sex": "M",
"checkDigitDateOfExpiry": "5",
"vizAddress": "66622 BIRLBACH\\nHAUPTSTRASSE 212",
"allCheckDigitsValid": false,
"mrzString": "IDD<<PX20LJ641<<<<<<<<<<<<<<<<\\n8810105<2606165D<<<<<<<<<<<<<8\\nNASS<<JAN<<<<<<<<<<<<<<<<<<<<<",
"checkDigitDocumentNumber": "",
"dateOfExpiry": "260616",
"checkDigitDateOfBirth": "5",
"givenNames": "JAN",
"nationalityCountryCode": "D",
"dateOfExpiryObject": "Sun Jun 16 00:00:00 UTC 2026",
"checkDigitPersonalNumber": "",
"checkDigitFinal": "8",
"issuingCountryCode": "D",
"fieldConfidences": {
"dateOfBirth": 100,
"nationalityCountryCode": 100,
"givenNames": 99,
...
},
"dateOfBirthObject": "Sun Oct 10 00:00:00 UTC 1988",
"surname": "NASS",
"documentType": "ID"
},
"pluginID": "mrz",
"confidence": 99,
"imagePath": "...",
"cropRect": {
"y": 227,
"width": 853,
"height": 554,
"x": 113
}
}
Tire
The Anyline Tire plugin is capable of scanning Tire Identification Numbers (TIN), Tire Size Specifications, and Commercial Tire Identification Numbers.
The following example shows the result for a TIN scan.
{
"imagePath" : "...",
"fullImagePath" : "...",
"tinResult" : {
"text" : "DOTY9RJFPUU2618"
},
"pluginID" : "tire",
"confidence" : 98,
"cropRect" : {
"y" : 897,
"width" : 629,
"height" : 125,
"x" : 225
}
}
Quick Tips
Here you can find a collection of common use cases and how to deal with them. We hope these can spare you the extra trip to StackOverflow :)
Displaying the Scanned Image
Images are saved to the phone storage and can be accessed via the paths returned in the scan result.:
let fullImagePath = scanResult.fullImagePath;
let fullImage = <View />;
if (fullImagePath && fullImagePath !== '') {
fullImage = (
<Image
style={styles.image}
resizeMode={'contain'}
source={{uri: `file://${fullImagePath}`}}
/>
);
}