QR code scanner app using React native

QR code is popular due to its large storage capacity and instant readability capabilities. Nowadays, most applications use QR codes for item identification, tracking, and even marketing.

Getting Started

A few QR code scanning applications are scanning products in supermarkets, reading ID numbers from Passports, and reading off a vehicle registration number. It gives an easy way to recognize products instead of entering 16-digit long numbers from barcodes.

React-Native has an open-source npm package called react-native-qrcode-scanner to perform the QR code scanning. The following is a list of scan plugins and functionalities you can implement using React-native.

1. react-native-qrcode-scanner
2. react-native-scan-view
3. react-native-camera

The idea behind this article is to develop a QR code scanner application using React native.

Step 1: Create your project in react native

Let’s create a project in react native.

If you are new to react native you can skim through the following article to get in touch with the dependencies and environment setup of react-native along with a hello world app demo.

Develop hello world app in React native

Open the terminal and run the below commands to create a react native project.

create-react-native-app qrcode-scanner-app
cd qrcode-scanner-app 
react-native run-android

Step 2: Add your dependencies

Install the dependencies of QRCode scanning into the project.

yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git
yarn add react-native-qrcode-scanner

To use react-native-qrcode-scanner, import the module and use the <QRCodeScanner /> tag in your component.

Step 3: Adding permissions

Add the following code to AndroidManifest.xml to access the camera.

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

Step 4: QR Code scanner implementation

In order to call the QRCode method, let us create a beautiful view by clicking the capture button. We will create a component called Scan to scan the QR code using react-native-qrcode-scanner

scan.js

scanStyle.js

Bind the scan component in your App.js file.

Step 5: Run your project

Now, you can run your project by executing the following command,

react-native run-android

There you have it! Your own QR code scanner app in React native :)

To experiment with the various features of QRCode scanning, try the following methods in your application.

Thanks for reading this article.

If you enjoyed this article, please click on the clap button 👏 and share to help others find it!

The full code of the project in the article is available on

GitHub - codemaker2015/qr-code-scanner-react-native: QR code scanner app using react native

The article is also available on Dev

If you are interested in further exploring, here are some resources I found helpful along the way:

Setting up the development environment · React Native

Publishing to Google Play Store · React Native

Publishing to Google Play Store · React Native