React Native QR Code Scanner Using Expo

Introduction

Hello Everyone, welcome to this new Article where we are going to explore how we could make, a React Native QR Code Scanner using Expo.

QR Code stands for Quick Response code, which is one type of Barcode similar to the onces you see, in pretty much all grocery products, it contains data related to these products, that the manufacturer added.

You can see this in action at the cashier table in groceries, where the cashier scans the code, and it automatically, get’s the product price and adds it to the bill.

Similarly, you could also add QR code to your digital products.

In this Article, we are going to make a QR code scanner to read data from read QR code from an image.

Our final result will look similar to this.

Without further due, let’s get started.

Environment Setup

If you haven’t created a React Native Project already, go ahead and make a new once.

expo init new-app

This command will generate a new blank react native expo project for you.

In Order to scan the QR code, we will need to enhance our camera with the tools needed to read the qr code from the image in real time.

For that we can use The BarCodeScanner library by expo, which reads various types of barcode, including the QR.

This library will provide us with a React Native Camera component, enhanced with Qr code Scanning and Reading.

To install it simply run this command.

expo install expo-barcode-scanner

QR Code Scanner Basic Usage

Before we can start using our scanner, there is one important phase.

The QR Scanner Component uses Camera to handle the scanning, which requires CAMERA Permission.

Without the Camera Permission, the Camera won’t launch, so no QR code Scanning.
So We have to handle it properly.

Full Code

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';

export default function App() {
  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(`${data}`);
  };

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  barCodeView: {
    width: '100%', 
    height: '50%', 
    marginBottom: 40
  },
});

Conclusion

That was it for this article, we have explored how to make a React Native QR Code Scanner.

I hope you enjoyed this article and found it as informative as you have expected.

Stay tuned and happy coding