Advanced Topics

This section covers additional topics regarding the Anyline React Native Plugin. You will not require knowledge about these advanced topics in your everyday use of the SDK. However, in case you need specific information about certain topics in the Anyline SDK, it will be covered here.

UI Configuration

The Anyline React Native wrapper offers you a way to optionally introduce some basic UI controls to your scan view, which can improve scanning experience.

To add these controls to your scan view, you can define an options node into the root of your JSON configuration containing instructions on how these controls appear.

You can specify a title to be shown on the toolbar for the scanner window. The text will be shown on a toolbar combined with a ← button that dismisses the scan view screen when pressed.

Key Value

Key	Value
`toolbarTitle`	The text to be shown on the toolbar.

toolbarTitle

The text to be shown on the toolbar.

iOS UI elements

The following controls are available on iOS: Done Button, Segment Control, and Label. As an example on iOS:

Configuring a Done button and a scanMode segment control

{
    "options": {
        "doneButtonConfig": {
            "offset.y": -88
        },
        "segmentConfig": {
            "titles": ["Universal", "DOT"],
            "viewConfigs": ["TINConfig.json", "TINDOTConfig.json"],
            "offset.y": -24
        }
    },
    "viewPluginConfig": {
        "pluginConfig": {
            "id": "TIRE",
            "cancelOnResult": true,
            "tinConfig": {
                "scanMode": "UNIVERSAL"
            }
        }
    }
}

Done Button (iOS-only)

The Done button is a button that dismisses the scan view screen when pressed. The button is present even when not explicitly included in the configuration. However, you can modify its appearance further by specifying a few properties (i.e. doneButtonConfig) in your config:

The Done button displays "OK" as its default title, but can be customized using the title property.

Key Value

Key	Value
`title`	The text displayed for the button
`textColor`	A hex string denoting the color of the button title
`textColorHighlighted`	A hex string denoting the color used by the button title when pressed
`fontSize`	Size of the button title
`fontName`	Name of the font (note: the font must be available for the device)
`positionXAlignment`	Should be "LEFT", "RIGHT", or "CENTER" (the default), defining preset locations for the button along the x-axis.
`positionYAlignment`	Should be "TOP", "CENTER", or "BOTTOM" (the default), defining preset locations for the button along the y-axis.
`backgroundColor`	A hex string indicating the color of the button background. The default is empty (clear color).
`fillType`	Indicate whether the button should fill the width of the screen ("FULLWIDTH"), or simply fit the button text ("RECT", the default)
`cornerRadius`	Float indicating the corner rounding of the Done button. Default 0.
`offset.x`	Float value further adjusting the (x-)position of the button
`offset.y`	Float value further adjusting the (y-)position of the button

title

The text displayed for the button

textColor

A hex string denoting the color of the button title

textColorHighlighted

A hex string denoting the color used by the button title when pressed

fontSize

Size of the button title

fontName

Name of the font (note: the font must be available for the device)

positionXAlignment

Should be "LEFT", "RIGHT", or "CENTER" (the default), defining preset locations for the button along the x-axis.

positionYAlignment

Should be "TOP", "CENTER", or "BOTTOM" (the default), defining preset locations for the button along the y-axis.

backgroundColor

A hex string indicating the color of the button background. The default is empty (clear color).

fillType

Indicate whether the button should fill the width of the screen ("FULLWIDTH"), or simply fit the button text ("RECT", the default)

cornerRadius

Float indicating the corner rounding of the Done button. Default 0.

offset.x

Float value further adjusting the (x-)position of the button

offset.y

Float value further adjusting the (y-)position of the button

Segment Control (iOS and Android)

You can add a segment control that allows you to easily switch between different view config files by adding a segmentConfig node to options.

If it appears, the segment control will by default be located at the bottom of the scan view, and centered horizontally within it.

The control is only added if the config meets the following requirements:

the JSON option configuration has a properly-defined segmentConfig node,
the titles strings array match the viewConfigs array in length.
in case the viewConfig json files are not located in the root of the assets folder, it is necessary to specify the location of the files after initialising the SDK:

AnylineOCR.setViewConfigsPath('config');

Please check Plugin Configuration Parameters for more information.

Key Value

Key	Value
`viewConfigs`	an array of JSON files located on the assets folder
`titles`	an array of user-visible strings corresponding to the modes list
`tintColor`	a color, denoted by a hex string, applied to the segment control (supported on iOS only on v13.0 or later)
`offset.x`	Float value further adjusting the (x-)position of the segment control
`offset.y`	Float value further adjusting the (y-)position of the segment control

viewConfigs

an array of JSON files located on the assets folder

titles

an array of user-visible strings corresponding to the modes list

tintColor

a color, denoted by a hex string, applied to the segment control (supported on iOS only on v13.0 or later)

offset.x

Float value further adjusting the (x-)position of the segment control

offset.y

Float value further adjusting the (y-)position of the segment control

Label

Finally, a static text label can be added to the scan view (useful when positioned next to the scan cutout, as a guide). Configure it with the labelConfig node.

The label is only shown when configured. By default, if it is displayed, it appears directly above the cutout box in the scan view.

Key Value

Key	Value
`text`	the text to display
`color`	a hex string denoting the color the label is to be displayed in
`size`	the font size of the label
`offset.x`	Float value further adjusting the (x-)position of the label
`offset.y`	Float value further adjusting the (y-)position of the label

text

the text to display

color

a hex string denoting the color the label is to be displayed in

size

the font size of the label

offset.x

Float value further adjusting the (x-)position of the label

offset.y

Float value further adjusting the (y-)position of the label

Android UI elements

Some of the previous UI elements have been removed in version 55.5.0 (previously deprecated in version 51.4.0) and replaced by a new implementation. If you use one of the [Instruction Label, Cutout Image, or Feedback] elements please migrate to the new UI Feedback config feature. If you are looking for the previous UI elements refer to UI Elements (removed).

The following controls are available on Android: Default Orientation and Rotate Button. As an example on Android:

Configuring a ViewConfig with Default Orientation and Rotate Button user interface

{
    "options": {
        "defaultOrientation": "landscape",
        "rotateButton": {
            "alignment": "top_left",
            "offset": {
                "x": 0,
                "y": 0
            }
        }
    },
    "viewPluginConfig": {
        "pluginConfig": {
            "id": "TIRE",
            "cancelOnResult": true,
            "tinConfig": {
                "scanMode": "DOT",
                "upsideDownMode": "AUTO"
            }
        }
    }
}

Default Orientation (iOS and Android)

You can specify the default orientation that the scan screen should have when entering the screen. During the scan process you can only change the orientation, if you also added the Rotate Button to the JSON config.

Key Value

Key	Value
`defaultOrientation`	The orientation of the screen, either `portrait` or `landscape`

defaultOrientation

The orientation of the screen, either portrait or landscape

If this attribute is not present, the orientation portrait will be used by default

Rotate Button (iOS and Android)

The rotate button allows you to switch the orientation of the scan screen from portrait to landscape and vice versa.

Key Element Value

Key	Element	Value
`alignment`	(none)	Positioning of the button on the scan screen (one of `top_right`, `top_left`, `bottom_right`, or `bottom_left`).
`offset`	`x`	Integer value further adjusting the (x-)position of the rotate button
`offset`	`y`	Integer value further adjusting the (y-)position of the rotate button

alignment

(none)

Positioning of the button on the scan screen (one of top_right, top_left, bottom_right, or bottom_left).

offset

x

Integer value further adjusting the (x-)position of the rotate button

offset

y

Integer value further adjusting the (y-)position of the rotate button

Native View Integration

The Anyline React Native Plugin provides the AnylineNativeView component, which allows you to embed the native scanning view directly into your React Native component tree. This enables more flexible UI layouts where you can combine the scanning view with other React Native components, such as buttons, result displays, or custom controls.

Use Cases

The Native View integration is ideal when you need to:

Embed the scanning view as part of a larger screen layout
Display scan results alongside the active scanning view
Switch between different scan modes without dismissing the view
Create custom scanning experiences with React Native-based UI controls

Implementation

Basic Usage

import React, { Component } from 'react';
import { View, requireNativeComponent } from 'react-native';
import AnylineOCR from 'anyline-ocr-react-native-module';

// Register the native view component
const AnylineNativeView = requireNativeComponent('AnylineNativeView');

class ScanScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <AnylineNativeView
          style={{ flex: 1 }}
          viewId="scan-view-container-id"
        />
        {/* Add your custom UI elements here */}
      </View>
    );
  }
}

Setting Up Event Listeners

Configure native event listeners to receive scan results and UI events:

import {
  NativeEventEmitter,
  NativeModules,
  DeviceEventEmitter,
  Platform
} from 'react-native';

const platformEventEmitter = Platform.select({
  ios: new NativeEventEmitter(NativeModules),
  android: DeviceEventEmitter,
});

class ScanScreen extends Component {
  NATIVE_METHOD_ON_RESULT_EVENT = 'NATIVE_METHOD_ON_RESULT_EVENT';

  componentDidMount() {
    // Add event listeners
    platformEventEmitter.addListener(
      this.NATIVE_METHOD_ON_RESULT_EVENT,
      this._handleScanResult
    );
  }

  componentWillUnmount() {
    // Clean up event listeners
    platformEventEmitter.removeAllListeners(this.NATIVE_METHOD_ON_RESULT_EVENT);
  }

  _handleScanResult = (result) => {
    const data = JSON.parse(result);
    console.log('Scan result:', data);
  };
}

Starting a Scan

To start scanning with the native view, use setupPromiseWithScanCallbackConfig():

import AnylineOCR from 'anyline-ocr-react-native-module';

_startScanning = async (configJson) => {
  try {
    const callbackConfig = JSON.stringify({
      onResultEventName: this.NATIVE_METHOD_ON_RESULT_EVENT
    });

    const promiseResult = await AnylineOCR.setupPromiseWithScanCallbackConfig(
      JSON.stringify(configJson),
      'scan',
      callbackConfig
    );

    console.log('Scan completed:', promiseResult);
  } catch (error) {
    if (error.message !== 'Canceled') {
      console.log('Scan error:', error);
    }
  }
};

Switching Scan Modes

You can dynamically switch between different scan modes without stopping the scan view:

// Switch to a different scan configuration
const newConfig = {
  // Your new scan configuration
};

AnylineOCR.trySwitchScan(JSON.stringify(newConfig));

This is particularly useful when you want to allow users to switch between different scanning types (e.g., from barcode to VIN scanning) without leaving the scanning screen.

Stopping the Scan

To stop the scanning process:

AnylineOCR.tryStopScan(null);

Complete Example

For a full implementation example, see the NativeViewScan.js file in the example application, which demonstrates:

Embedding AnylineNativeView in a flexible layout
Switching between multiple scan modes using segmented controls
Displaying scan results alongside the active scanning view
Handling scan lifecycle (start, switch, stop)
Proper event listener management

Platform-Specific Scanning Options

The plugin allows you to configure platform-specific scanning options at runtime through the setDefaultScanStartPlatformOptions() method. This provides greater flexibility for advanced use cases that require native platform configuration not available through the cross-platform JSON configuration.

When to Use This Feature

Use platform-specific options when you need to:

Control platform-specific camera implementations (e.g., CameraX vs Camera1 on Android)
Configure platform-specific permission handling behavior
Fine-tune native SDK behavior that isn’t exposed through the standard JSON configuration

Usage

Call setDefaultScanStartPlatformOptions() on the AnylineOCR module before starting the scan. The method accepts a JSON string with platform-specific attributes.

Example: Disabling CameraX on Android

import AnylineOCR from 'anyline-ocr-react-native-module';

// Configure platform-specific options
try {
  await AnylineOCR.setDefaultScanStartPlatformOptions(
    '{"androidScanViewAttributes": {"useCameraX": false}}'
  );
} catch (error) {
  console.log(error);
}

// Then start scanning as usual
const result = await AnylineOCR.setupPromise(JSON.stringify(config), 'scan');

Available Parameters

Android (`androidScanViewAttributes`)

Parameter Description Type Default

Parameter	Description	Type	Default
`useCameraX`	Enable or disable CameraX API (when false, uses Camera1 API)	boolean	`true`
`enableCameraPermissionHandling`	Enable or disable camera permission handling from ScanView loading process	boolean	`true`

useCameraX

Enable or disable CameraX API (when false, uses Camera1 API)

boolean

true

enableCameraPermissionHandling

Enable or disable camera permission handling from ScanView loading process

boolean

true

As of version 55.5.0, CameraX is the default camera provider on Android. You can disable it using "useCameraX": false if you need to use the legacy Camera1 API.

Important Notes

Platform-specific options are passed directly to the native SDK and are not validated by the plugin layer
These options must be set before calling setupPromise() or setupPromiseWithInitializationParameters()
Invalid or unsupported options may result in runtime errors on the native platform

Reducing SDK size

With the Anyline SDK integrated into your app, it is still possible to cut down on the total installable app size by identifying your Anyline use case, and using this to further optimize the app bundle delivered to users. An Anyline SDK bundle comes trained models for all supported use cases, a number of which your application may not require, and hence could be excluded from your build process.

These are the modules you will need for each technical capability:

Technical capability Module

Technical capability	Module
VIN	`module_anyline_ocr`
Container	`module_anyline_ocr`
OCR	`module_anyline_ocr`
Barcode	`module_barcode`
Meter	`module_energy`
MRZ	`module_id`
Universal ID	`module_id`
Japanese Landing Permission	`module_id`
License Plate	`module_license_plate`
TIN	`module_tire`
Commercial Tire ID	`module_tire`
Tire Size	`module_tire`

VIN

module_anyline_ocr

Container

module_anyline_ocr

OCR

module_anyline_ocr

Barcode

module_barcode

Meter

module_energy

MRZ

module_id

Universal ID

module_id

Japanese Landing Permission

module_id

License Plate

module_license_plate

TIN

module_tire

Commercial Tire ID

module_tire

Tire Size

module_tire

The steps you will need to take to accomplish this will be specific to each of the iOS and Android platforms. In case you are targeting both platforms, follow both the steps in iOS and Android as explicitly described in the following sections.

iOS

By including a run script to the build phase of your application target such as the following, you can deliver a much-reduced overall app bundle size for your users. Depending on the use case you are targeting, the savings may be significant.

Add a Run Script build phase to your application’s target in your iOS .xcodeproj file with the following contents:

Run script to remove unneeded assets in the SDK

# --Available Modules--
DIR_BARCODE="module_barcode"
DIR_DOCUMENT="module_document"
DIR_METER="module_energy"
DIR_ID="module_id"
DIR_LICENSE_PLATE="module_license_plate"
DIR_OCR="module_anyline_ocr"
DIR_TIRE="module_tire"

MODULES_ARRAY=(${DIR_OCR} ${DIR_BARCODE} ${DIR_DOCUMENT} ${DIR_METER} ${DIR_ID} ${DIR_LICENSE_PLATE} ${DIR_TIRE})

# Identify any of the SDK modules from the list above that the app requires
# for example, ID and Meter, and set the MODULES_TO_KEEP_ARRAY accordingly:
# MODULES_TO_KEEP_ARRAY=( ${DIR_ID} ${DIR_METER} )
#
MODULES_TO_KEEP_ARRAY=( ${DIR_ID} ${DIR_METER} )

echo "Modules to include: ${MODULES_TO_KEEP_ARRAY[@]}"

FILENAME="AnylineResources.bundle"
MODULES_DIR_PATH=$(find "${CODESIGNING_FOLDER_PATH}" -iname ${FILENAME})
echo "Modules dir path: ${MODULES_DIR_PATH}"

if ((${#MODULES_TO_KEEP_ARRAY[@]})); then
    for module in "${MODULES_ARRAY[@]}"; do
        if [[ ! "${MODULES_TO_KEEP_ARRAY[*]}" =~ "${module}" ]]; then
            echo "Removing module ${module}"
            rm -rf "${MODULES_DIR_PATH}/${module}"
        fi
    done
fi

Define the MODULES_TO_KEEP_ARRAY variable accordingly for your use case. For example, if you know that your application will only make use of the license plate and barcode plugins, put down: MODULES_TO_KEEP_ARRAY=(${DIR_BARCODE} ${DIR_LICENSE_PLATE}).

Ensure that this run script is the last Build Phase to be executed, and in particular, it must come after "[CP] Copy Pods Resources" (when present).

Regenerating the .xcworkspace file may result in this run script being removed. When doing so, re-add the run script, or consider a Cocoapods post-install hook to persist it in the project file.

Android

For a guide on how to reduce the application size on Android please follow Reduce SDK Size.

Custom model files for OCR

Certain specialized use cases may call for the Anyline OCR plugin to be used with custom model files. These model files are specifically constructed to make possible the scanning of non-standard products: labels on bottlecaps, cattle tags, or voucher codes, to give a few examples.

To use these files with your Anyline plugin, they have to become part of your application binary. But rather than adding them as "asset" files into your React Native project, you must take distinct steps to accomplish this for both Android and iOS platforms.

iOS

For iOS, what you need is the model files (consisting of .ale and .any files) to be added as files to the iOS application target on the Xcode project. Assuming the project name hasn’t been changed, the target to add this to would be would be in the Runner target in Runner.xcodeproj.

You can simply add your model file (here named cow_tag_scanner.ale) to the project by dragging it into the project navigator pane and selecting your iOS application as a target to add the file to.

Afterwards, your JSON configuration should reference said model file(s).

Android

For Android, the model files (consisting of .ale and .any files) need to be added as files to the Android application assets folder.

You can simply add your model file (here named cow_tag_scanner.ale) to the project by dragging it into the project view.

JSON Configuration

Now, in order for the OCR plugin to use this file, explicitly reference the name of the file in the customCmdFile property of the ocrConfig:

"viewPluginConfig": {
  "pluginConfig": {
    "id": "cow-tag",
    "ocrConfig": {
      "customCmdFile": "cow_tag_scanner.ale"
    }
  },
  ...
}

If an .any file is also included as part of the custom CMD package, add it to the application in the same manner, and also provide its name through the model property within ocrConfig.

UI Feedback Config

UI feedback elements can enhance the scanning experience, by informing the user about environmental conditions detected during scanning. Incorporating such elements during the scanning experience can be beneficial in many ways. For example:

Incorporating visual cues (such as images or text) next to the cutout within the scan view can guide the user on how or what to scan.
Using sound cues can alert the user when certain conditions are detected that might impact optimal scanning (e.g. insufficient lighting, incorrect distance from object, etc.).
Configuring interactive visual elements that trigger predefined actions, such as an alert message box, can offer users more options to improve their scanning practices.

For the full details on UI Feedback Config please refer to the

Get help

If there is anything you are missing, you require support, or want to provide us with feedback, please reach out to us via https://support.anyline.com, where you either may find helpful information in our Knowledge Base or you can open a Support Ticket for more specific inquiries.

In order to better assist you, please include any code of your Anyline integration and any ScanViewConfig you are using.

Advanced Topics

UI Configuration

Toolbar Title (iOS and Android)

iOS UI elements

Done Button (iOS-only)

Segment Control (iOS and Android)

Label

Android UI elements

Default Orientation (iOS and Android)

Rotate Button (iOS and Android)

Native View Integration

Use Cases

Implementation

Basic Usage

Setting Up Event Listeners

Starting a Scan

Switching Scan Modes

Stopping the Scan

Complete Example

Platform-Specific Scanning Options

When to Use This Feature

Usage

Available Parameters

Android (androidScanViewAttributes)

Important Notes

Reducing SDK size

iOS

Android

Custom model files for OCR

iOS

Android

JSON Configuration

UI Feedback Config

Android (`androidScanViewAttributes`)