react-native-qupid

QR Code scanning stupid simple: Qupid.

React Native library for both android and iOS to read QR codes from images. This library is designed to be simple to use and fast. It can read QR codes from images and raw bitmaps.

This library uses the react native new architecture with TurboModules significantly improving the performance compared packages using the old architecture.

All react-native code is in TypeScript, android code is full Kotlin and iOS code is Objective-C.

Under the hood it uses BoofCV for android (which is 1.8 faster than the google MLKit. For more info check the performance section) and CIDetector for iOS.

This project has the TurboModule javascript interface in src and the native codes in android / ios folders.

There is also a example project to test the library. The example project has multiple use case demos e.g.

• Basic image read
• Image Overlay
• Base64 to Raw Bitmap
• Benchmark

More about performance can be found in the performance document.

Installation

yarn add react-native-qupid

npm install react-native-qupid

Setup

To enable the new architecture for your apps (it's enabled by default in the example project), follow the instructions in the here

Android

This library doesn't require any additional setup for android.

iOS

Add the following to your Podfile:

  pod 'zxing-cpp'

Usage

This library exports the functions readImage, readRaw with the useQupid hook for ease of use.

Basic Usage of the hook useQupid

import { useQupid } from 'react-native-qupid';

const App = () => {
  const [imagePath, setImagePath] = useState<string>('')
  const [qrCodes, error, processImage] = useQupid()

  useEffect(() => {
    if (!imagePath) return
    processImage(imagePath)
  }, [imagePath, processImage])

  ...

  return (
    {qrCodes.map((qrCode, index) => (
      <Text key={index}>{qrCode.data}</Text>
    ))}
  )
}    

Basic Usage of the function readImage

import { readImage } from 'react-native-qupid';

const filePath = 'path/to/image'
const qrCodes = await readImage(filePath)

Basic Usage of the function readRaw

import { readRaw } from 'react-native-qupid';

const rawBytes: number[] = [0x00, ..., 0x00]
const qrCodes = await readRaw(rawBytes)

API

• useQupid
• readImage
• readRaw
• QRCode

useQupid

This is a hook that provides QR code data, error messages, and a function to process an image.

Return Type

| Name | Type | Description | | --- | --- | --- | | qrData | QRCode[] | An array of QR codes. Each QRCode object contains the data encoded in the QR code and its position in the image. | | error | string | An error message. If there is no error, this will be an empty string. | | processImage | (uri: string) => void | A function that takes a URI of an image, reads the image, and sets qrData and error based on the image content. |

Usage

const [qrData, error, processImage] = useQupid();

Call processImage with the URI of an image to read QR codes from the image. After the image is processed, qrData will be an array of QR codes found in the image, and error will be an error message if there was an error reading the image.

readImage

This function reads QR codes from an image file.

Parameters

| Name | Type | Description | | --- | --- | --- | | filePath | string | The path to the image file. | | inputSubSample | number | The subsample factor for the image. A value of 1 means no subsample, 2 means every other pixel (1/2 of the image size). |

Return Type

| Type | Description | | --- | --- | | Promise<QRCode[]> | A promise that resolves to an array of QR codes found in the image. Each QRCode object contains the data encoded in the QR code and its position in the image. |

Usage

const qrCodes = await readImage(filePath, inputSubSample);

readRaw

This function reads QR codes from a raw bitmap.

Parameters

| Name | Type | Description | | --- | --- | --- | | data | number[] | The raw bitmap data. Android will parse it to a ReadableArray, and iOS will parse it to an NSArray<NSNumber>. |

Return Type

| Type | Description | | --- | --- | | Promise<QRCode[]> | A promise that resolves to an array of QR codes found in the raw bitmap. Each QRCode object contains the data encoded in the QR code and its position in the image. |

Usage

const qrCodes = await readRaw(data);

QRCode

type QRCode = {
  data: string
  x: number
  y: number
  width: number
  height: number
}

Properties

| Name | Type | Description | | --- | --- | --- | | data | string | The data encoded in the QR code. | | x | number | The x-coordinate of the top-left corner of the QR code in the image. | | y | number | The y-coordinate of the top-left corner of the QR code in the image. | | width | number | The width of the QR code in the image. | | height | number | The height of the QR code in the image. |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library