Barcode/QR Code Scanner (React Native)

What is a Barcode & QR code?

QR stands for “Quick Response”, The barcode holds information horizontally, Well, QRcode does so both vertically & horizontally.

Installation :

React-native-vision-camera and react-native-worklets-core are the dependencies for barcode scanner. Scanner use MLKit Vision on Android & Apple Vision on iOS.

command 1: npm install react-native-vision-camera@3.3.0

command 2: npm install react-native-worklets-core@0.2.2

To configure worklet plugins, must required to add below code into the babel.config.js:

module.exports = {
   plugins: [
        ['react-native-worklets-core/plugin']
   ],
}

Configure Permissions

Android: Open your project’s AndroidManifest.xml and add the following lines inside the <manifest> tag:

<uses-permission android:name="android.permission.CAMERA" />

iOS: Open your project’s Info.plist and add the following lines inside the outermost <dict> tag:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

Few Other Android Setup required

Open build.gradle add below code if not added

• Set buildToolsVersion to 33.0.0 or higher

• Set compileSdkVersion to 33 or higher

• Set targetSdkVersion to 33 or higher

• Set minSdkVersion to 26 or higher

• Set ndkVersion to “23.1.7779620” or higher

• Update the Gradle Build-Tools version to 7.3.1 or higher, Like this: classpath(“com.android.tools.build:gradle:7.3.1”)

In Android Make sure your Gradle Wrapper version is 7.5.1 or higher in gradle-wrapper.properties:

distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip

Troubleshoot

If you find any issues with libraries, you can refer to this Troubleshooting.

Get Device

By using useCameraDevice hook, by passing ‘back’ as a parameter we are able to get the device which is required by camera component.

const device = useCameraDevice('back');

Getting/Requesting Permission

By using useCameraPermission hook, we can request the permission if the app hasn’t the permission that we mentioned in manifest using requestPermission(). If camera permission is “granted”, hasPermission will be true otherwise false.

const { hasPermission, requestPermission } = useCameraPermission();

Frame Processors:

Frame processors are functions that are written in JavaScript (or TypeScript) which can be used to process frames the camera “sees”. Inside those functions you can call Frame Processor Plugins, which are high performance native functions specifically designed for certain use-cases.

const frameProcessor = useFrameProcessor((frame) => { 
      'worklet'
      const objects = detectObjects(frame)
      console.log(`Detected ${objects.length} objects.`) 
}, [])

CodeScanner

A scanner for detecting codes in a Camera Stream.

const codeScanner = useCodeScanner({ 
      codeTypes: ['qr', 'ean-13'], 
      onCodeScanned: (codes) => { 
           console.log(`Scanned ${codes.length} codes!`) 
      } 
})

Scanner Example

Sample Barcode code-128 and QR code as below and you can find the example source code BarcodeQRScanCode.

QR code

Please check out the demo app for better understanding qrcode_scanner_recording.mp4.