How to implement a QR & Barcode scanner in your mobile app, using the react-native-vision-camera?

Rajavel Balasubramanian

4 min readNov 9, 2022

Hello friends, this article will explain to you all the details about how you can scan any barcode from your device.

Supported Barcode types:

UPC E, CODE 39, CODE 39 MOD 43, EAN 13, EAN 8, CODE 93, CODE 138, PDF 417, QR, AZTEC.

1. Setup your environment

Now let us create a react native project using React Native CLI,

Open a terminal (MAC or Linux) or PowerShell (Windows) and execute the following command.

npx react-native init QRORBarcodeScannerVision

The above command will create a new react native project.

Then, add the following packages for navigation between screens,

npm i @react-navigation/native-stack
npm i @react-navigation/native
npm install react-native-screens react-native-safe-area-context
(or)
yarn add @react-navigation/native-stack
yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context

Then, we have to install react native vision camera library, which we use to implement barcode scan functionality.

npm i react-native-vision-camera --save
(or)
yarn add react-native-vision-camera

Execute one of the above commands in the terminal (inside the project root folder) to install react native vision camera.

Next, we have to install a vision-camera-code-scanner, which is a library used to scan the barcodes and QR codes.

npm i vision-camera-code-scanner
(or)
yarn add vision-camera-code-scanner

Also, react-native-hole-view is for creating a scan view.

npm i react-native-hole-view
(or)
yarn add react-native-hole-view

Now we have to implement platform-specific integration.

Android:

We need to add permission to access the camera inside

android/app/src/main/AndroidManifest.xml

Add the following permission

Android Camera Permission — android/app/src/main/AndroidManifest.xml

IOS:

We need to add permission to access the camera for IOS devices, for that, add the following permission with a usage description in

ios/<APP_NAME>/info.plist

IOS Camera Permission — ios/<APP_NAME>/info.plist

Additionally, we have to add the following code inside ios/Podfile to enable the barcode recognition feature,

ios/Podfile

IOS Barcode Recognition — ios/Podfile

2. let's start coding

First, we have to import react-native-reanimated and insert it as the first line of your index.js.

import 'react-native-reanimated'

Add this plugin to your babel.config.js

babel.config.js

Now, to implement the scanner, inside the app we will create 2 screens, one is Home and the next is Barcode Scanner

Inside App.js or your own page (Home.js), import the following

Then need to add a state to save the scanned barcode and also useRoute to access the parameters via route

Then we use a callback function to get and set the barcode whenever the home page loads,

Next, add a Scan Barcode button to navigate to BarcodeScanner screen and also a disabled text input field to display the scanned barcode,

Here is the full code for App or Home component,

Next, let’s create BarcodeScanner.js,

Inside BarcodeScanner.js, import the following,

Now add the following inside the component,

Now we need to check whether we have the camera permission or not,

When the barcode has been scanned, the following toggleActivateState function will be called

Here, when the barcode is scanned, it will navigate to the home screen with the parameter as barcode value, there on the home page, we will fetch and display the barcode.

Here is the full BarcodeScanner component,