QR Code and Barcode Reader App using React Native Expo

React Native Expo Project

QR code and Bar code Scanner in React Native

Hello, hackers..!!

When you go through the Google play store, you can see that there are soo many apps that are just for reading Qr code and bar codes. As we all know that Qr code or barcode has some hidden information. You just need a perfect tool to crack this information.

Now, we are going to make such an app. You can make it as your mainstream app and publish it in the play store with cool stylings or maybe a side project. I got this one from a freelancing project. Take a cup of coffee and let’s begin the hack.

Setup and Installations

  • Initialize the project
expo init ReaderApp
  • Select the blank javascript template and install all the javascript dependencies
  • Move to the parent directory. Install the required package
npm install expo-barcode-scanner
  • Done

Code of QR code (React Native Expo)

Scanner.js

  • Import the required packages
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
  • Now inside the Scanner function.
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
alert(`Bar code with type ${type} and data ${data} has been scanned!`);
};
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}

We are starting with some react hook. I am using two react hooks here. The first one is for camera access and the other is for the scan. The initial state of camera permission is null because we want the user to allow it. When the user allows the camera permission then the null state will change their state from null to permission granted state. This new state will be stored in “setHasPermission”.

We also use the useEffect hook. You can add an empty array in this hook as it is the second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to be re-run.

Next, we used an arrow function to handle the scanner. We want the type and data as the information from Qr code or bar code when we scan it. So, added that accordingly.

  • View
return (
<View style={styles.container}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
{scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
</View>
);

Return the Scanner function and style them accordingly. This is the simple raw code of the Qr code reader. You can run them accordingly.

I added react-navigation 6 and made it a little bit more dynamic. I used stack navigator. As you can see in the feature image.

You can have full GitHub code access here.

Barcode Scanner Supported formats (IOS & Android)

According to the official documentation, these are the supported format:

qr
upc_e
pdf417
interleaved2of5
ean8
ean13
datamatrix
code39mod43
code128
code93
code39
codabar
aztec

Well, that’s it..!!

Thank you for reading. If this article sounds informative then clap until your hands bleed and share it with your community.

Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me (freelance.rohit7@gmail.com)