react native scan-1

Barcode/QR Code Scanner (React Native)

Share this post on:

What is a Barcode & QR code?

A barcode holds information horizontally, while a QR code (Quick Response) holds information both vertically and horizontally.

To implement a barcode scanner in React Native, you’ll need react-native-vision-camera and react-native-worklets-core. These dependencies utilize MLKit Vision on Android and Apple Vision on iOS.

Install dependencies:

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

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

Add the worklet plugin to your babel.config.js:

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

Configure Permissions

Android: Add the following lines to your AndroidManifest.xml:

iOS: Add the following lines to your Info.plist:

Additional Android Setup:

Ensure your build.gradle includes the following configurations:

  • 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

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

Troubleshoot

Use the useCameraDevice hook to access the camera:

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.

Getting/Requesting Permission

Use the useCameraPermission hook to request camera permissions:

Frame Processors:

Frame processors are functions that process frames the camera “sees”. Use them to call high-performance native functions for specific use cases:

CodeScanner

Use the useCodeScanner hook to detect codes in a camera stream:

Scanner Example

Refer to the demo app for a comprehensive example. Check out the sample barcode code-128 and QR code. BarcodeQRScanCode.

Barcode code-128

QR code

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