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 is 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.

Expo

If you are using Expo to build your React Native app, you have to first prebuild it as described in the Expo docs.

Pre-building them creates the Android and iOS folders that are needed for the adjustments in the following steps.

As of now there is no support for Expo Go, so be sure you are aware of that when integrating our plugin.

Install the Anyline plugin

Add our maven repository to the build.gradle file located in your android folder:

maven { url 'https://mobile-sdk-android.anyline.io/release/' }

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',
);

Starting with version 53.0.0, the jsonConfig used to scan must comply to the JSON Schemas as defined by the used version of Mobile SDK for Android and iOS.

Initialization of the SDK has to be done via AnylineOCR.setupAnylineSDK(licenseKey), instead of including the license into the jsonConfig.

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, auto-meter is the name of the plugin’s unique ID assigned to it in the config. The readout (00613.839) could be found under meterResult > value. A confidence of 99 indicates Anyline’s level of confidence (0-100) in the result given.

The imagePath and fullImagePath properties hold the path to the scanned images saved within the device storage. Finally, cropRect provides the coordinates to the scanned object within the full sized image. Please read display a scanned image on how to use the cached images in React Native.

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}`}}
        />
    );
}