react-native-ocr-package

React Native OCR Component

A React component for scanning National Identity cards using a device's camera. This package integrates OCR technology to extract the text data from scanned cards by making API calls.

Features

• Opens the camera directly in your React application.
• Scans National Identity cards in real-time.
• Calls a backend API for OCR processing.
• Returns parsed data for further use.

Installation

Install the package via npm:

npm install react-native-ocr-package

Additionally, install the required dependency:

npm install react-native-document-scanner-plugin

Usage

Here is how to use the component in your React application:

Basic Example

import React, {useState} from 'react';
import { View } from 'react-native';
import {CameraComponent} from 'react-native-ocr-package';

const App = () => {

  const handleOCRResult = ocrResult => {
    console.log('OCR Result:', ocrResult);
  };

  return (
    <View style={{flex: 1}}>
        <CameraComponent
          ocrApiUrl="https://your-api-endpoint.com/"
          onScanComplete={handleOCRResult}
        />
    </View>
  );
};

export default App;

Props

The CameraComponent accepts the following props:

Prop Name	Type	Required	Description
ocrApiUrl	string	Yes	The API endpoint to call for OCR processing of the scanned image.
onScanComplete	func	Yes	Callback function invoked with the scanned OCR result.

Sample Output

Here is an example of the JSON output returned by the API when the scan is successful:

{
  "Code": 200,
  "Message": "Success",
  "Data": {
    "OCR": {
      "Code": 100,
      "Message": "Success",
      "CNIC_MATCHED": true,
      "DOI": "10.06.2014",
      "DOB": "12.03.2000",
      "DOE": "10.06.2024",
      "CNum": "12345-1234567-1",
      "Name": "ABC",
      "FName": "XYZ"
    },
    "Image_Comparison": {
      "Code": 100,
      "Message": "Selfie and CNIC Matched",
      "confidence_score": 100.0
    }
  }
}