DOCSEARCHbyAlgolia
Submit Docs

BlinkID React Native Plugin

repository·master·Indexed 41 days ago

https://github.com/microblink/blinkid-react-native

A cross-platform wrapper for the native BlinkID SDK and UX modules, providing secure ID card scanning and data extraction for React Native applications. Version 8001.0.0 supports camera-based scanning via performScan and static image extraction via performDirectApiScan, including support for MRZ, barcodes, and VIZ modules.

Tokens
22.6K
Snippets
62
Records
96
Agent score
51%

What's inside BlinkID

  1. Filter accepted documents with ClassFilter

    master

    The ClassFilter class allows you to determine which documents the SDK will process based on Country, Region, and Type.

    • includeClasses: Setting this property configures the filter to scan only the specified document classes. All others will be rejected.
    • excludeClasses: Setting this property configures the filter to reject the specified document classes. All others will be accepted by default.

    If a document is excluded and the standard BlinkID Overlay is used, an alert will notify the user that the document cannot be scanned. Excluded documents will not return recognition results.

  2. Define custom mandatory fields for scanning

    master

    You can define a custom set of mandatory fields to increase flexibility and ensure only necessary information is extracted. This can be applied to specific documents or universally across all document types.

    Custom mandatory fields are configured using CustomClassRules and DetailedFieldType.

  3. Understand the modular recognition architecture in v8000+

    master

    BlinkID v8000 introduced a modular architecture where extraction is driven by four independent modules. Instead of using flat scanning settings, you enable and configure these modules separately to control specific scanning behaviors:

    • Document capture: Handles document detection, image quality checks (blur, glare, tilt, lighting), and cropped image extraction.
    • MRZ: Handles Machine Readable Zone detection and parsing for passports, visas, and ID cards.
    • Barcode: Handles 1D/2D barcode detection and parsing (e.g., PDF417, QR, retail codes).
    • VIZ: Handles Visual Inspection Zone field extraction, character validation, and signature images.

  5. Understand BlinkID scanning results

    master

    The BlinkIdScanningResult object contains all extracted data and images. Key components include:

    1. documentClassInfo: Contains country, region, and documentType (each with id and rawValue).
    2. dataMatchResult: Information regarding data matching.
    3. subResults: An array of SingleSideScanningResult objects containing viz, mrz, and barcode data per side of the document.
    4. Aggregated fields: Top-level fields like firstName, lastName, documentNumber, etc.
    5. Images: Access to firstDocumentImage, secondDocumentImage, faceImage, signatureImage, and more.

  6. Configure BlinkID SDK, Session, and UI settings

    master

    To control the scanning behavior, you must provide specific settings objects:

    • BlinkIdSdkSettings: Manages the license key and how the SDK models are obtained.
    • BlinkIdSessionSettings: Controls the scanning session via ScanningMode and BlinkIdScanningSettings.
    • BlinkIdUiSettings: Used to customize the visual aspects of the scanning interface.

  7. Quickstart with the BlinkID Sample Application

    master

    The sample application demonstrates Default BlinkID UX scanning (camera-based), Multiside DirectAPI scanning (two static images), and Singleside DirectAPI scanning (one static image). It also includes a module settings panel for configuring document capture, barcode, MRZ, and VIZ modules.

    Prerequisites: Ensure Node and Watchman are installed via Homebrew (on macOS):

    # install Watchman
brew install watchman

# install Node
brew install node

    Setup Steps:

    1. Clone the repository:
    git clone https://github.com/microblink/blinkid-react-native.git
    1. Navigate to the folder:
    cd blinkid-react-native
    1. Run the initialization script to create the sample app with required configurations:
    ./initBlinkIdReactNativeSample.sh
    1. Navigate to the BlinkIdSample folder to run the app.
    git clone https://github.com/microblink/blinkid-react-native.git
cd blinkid-react-native
./initBlinkIdReactNativeSample.sh

  8. Migrate from v7.x to v8000/v8001

    master

    When upgrading from @microblink/blinkid-react-native@7.x, several breaking changes must be addressed:

    1. Settings as Plain Objects

    Settings are no longer instantiated via class constructors. They are now plain TypeScript objects.

    2. Modular Scanning Settings

    Flat v7 settings have been moved into specific module configurations. For example, quality detection settings (blur, glare, tilt) are now nested under documentCaptureModule.

    3. Method Call Style

    It is recommended to switch from positional arguments to a single settings object.

    4. Renamed Concepts

    • Anonymization has been renamed to Redaction (RedactionSettings, RedactionSettingsResolver).
    • DetectionLevel has been replaced by SensitivityLevel (off, low, mid, high).

    5. Removed Types

    The following types have been removed: CroppedImageSettings, AnonymizationMode, DetectionLevel, and RecognitionMode.

    // v7 — positional arguments
await performScan(sdkSettings, sessionSettings, uxSettings, classFilter);

// v8000 / v8001 — recommended object style
await performScan({ sdkSettings, sessionSettings, scanningUxSettings: uxSettings, classFilter });

  10. Install the BlinkID React Native Plugin

    master

    To integrate the plugin into an existing or new React Native project:

    1. Initialize a new project (if needed):
    npx @react-native-community/cli init YourAppName --package-name YourPackageName --title YourAppTitle --version "0.82.0"
    1. Install the dependency:
    npm install --save @microblink/blinkid-react-native@8001.0.0
    1. Follow platform-specific setup instructions for Android and iOS.

  11. Migrate from BlinkID v8000 to v8001

    master

    Version 8001 introduces a modular architecture with several breaking changes in configuration:

    SDK Settings Migration

    Settings have moved from a flat structure to nested objects. downloadResources is now resourcesConfig.download.

    // v8000 (Flat)
const sdkSettings = { licenseKey, downloadResources: true };

// v8001 (Nested)
const sdkSettings: BlinkIdSdkSettings = {
  licenseKey,
  resourcesConfig: { download: true },
  otaResourcesConfig: {
    checkForUpdates: true,
    strict: false,
  },
};

    Document Capture Migration

    inputImageCropped has been replaced by cropType.

    // v8000
documentCaptureModule: { inputImageCropped: true }

// v8001
documentCaptureModule: { cropType: 'cropped' } // or 'unknown' | 'not-cropped'

    Note: For camera UX (performScan), you must use cropType: 'not-cropped'.

    Result Field Changes

    • Document Class Info: country, region, and documentType now return objects containing { id?, rawValue } instead of flat values.
    • New Fields: ethnicity is now available in results, and ParentInfo uses fullName.
    // v8001 Document Class Info access
const countryId = result.documentClassInfo?.country?.id;
const countryRaw = result.documentClassInfo?.country?.rawValue;

  12. Requirements for BlinkID React Native v8001.0.0

    master

    To use version v8001.0.0 of the BlinkID React Native plugin, ensure your environment meets the following minimum requirements:

    • React Native: 0.82.x or newer (supports both old and new architectures).
    • iOS: 16.0 or newer.
    • Android: API level 24 or newer; compileSdk 36; Kotlin 2.2.21.

    Note: Integrator apps do not need to set up Jetpack Compose; it is used internally by the BlinkID UX.