Create Ionic 6 React Barcode and QR Code Scanner App

Ionic React Barcode and QR Code Scanner tutorial; In this example, we will explain how to add Barcode and QR Code scanner functionality in the Ionic React application with the help of Ionic native and Cordova barcode scanner plugin.

Ionic is a sublime application development framework, and it offers to cross platform app development solution exclusively for mobile and desktop apps.

The great thing about ionic is that you can create iOS and Android applications using a single piece of code.

In general, you need Java/Kotlin for native android apps, similarly Objective C or Swift for iOS app development; however, it makes your life easy.

You need only HTML, CSS, and JavaScript knowledge to get started with mobile app development. It also supports modern frameworks such as Angular, Vue, or even React js for robust app development.

In this tutorial, we will create an Ionic app with React js and take the help of Ionic UI components, add or install Barcode and QR scanner in Ionic react app, access barcode scanner plugin methods to implement barcode/QR code scanner in Ionic react app.

Ionic 6 React Barcode Scanner Example

Here are the steps towards building an Ionic React QR Scanner example.

• Step 1: Install Ionic React App
• Step 2: Add Barcode Scanner Plugin in Ionic React
• Step 3: Update BarcodeScanner in App Module
• Step 4: Integrate Barcode Scanner in Ionic React
• Step 5: Start Ionic React Project

Install Ionic React App

The first step begins with installation Ionic command line interface on your system:

npm install -g @ionic/cli

The ionic start command allows you to create a blank new Ionic React app:

ionic start react-qr-barcode-scanner blank --type=react

Enter into the app folder:

cd react-qr-barcode-scanner

Add Barcode Scanner Plugin in Ionic React

After entering the ionic react app, you need to install or add a native barcode scanner plugin in the Ionic React app, likewise, we need to install capacitor sync and ionic native core plugins.

npm install @ionic-native/core
npm install @ionic-native/barcode-scanner
npm install phonegap-plugin-barcodescanner
ionic cap sync

Integrate Barcode Scanner in Ionic React

To implement a Barcode scanner in ionic react, you have to open the src/pages/Home.tsx file and replace the given below code with the current code.

import { 
  IonContent, 
  IonInput, 
  IonButton, 
  IonItem, 
  IonHeader, 
  IonPage, 
  IonTitle, 
  IonToolbar } from '@ionic/react';
import React from 'react';
import './Home.css';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
class Home extends React.Component {
  state = {
    stringEncoded: '',
    encodeResponse: 'Hello World',
    dataEncode: ''
  }
  handleChange = (e: any) => {
    const { value, name } = e.target;
    this.setState({ 
      [name]: value }
    );
    console.log(this.state);
  };
  render() {
    const dataToScan = async () => {
      const data = await BarcodeScanner.scan();
      alert(JSON.stringify(data));
      this.setState({ stringEncoded: data.text })
    };
    const createCode = () => {
      BarcodeScanner.encode(BarcodeScanner.Encode.TEXT_TYPE, this.state.encodeResponse)
        .then(data => {
          console.log(data);
        }, error => {
          console.log("Error : " + error);
        });
    };

    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonTitle>Ionic QR/Barcode Scanner Example</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
          <strong>Scan Content</strong>
          <IonButton color="danger" expand="block" onClick={dataToScan}>
              Scan Data 
          </IonButton>
          <strong>Generate QR code</strong>
          <IonItem>
            <IonInput name='dataEncode' value={this.state.encodeResponse} onIonChange={this.handleChange} clearInput></IonInput>
          </IonItem>
          <IonButton color="primary" expand="block" onClick={createCode}>
            Generate QR
          </IonButton>
        </IonContent>
      </IonPage >
    );
  }
};
export default Home;

Start Ionic React Project

For testing QR code and barcode scanner, you can run this app on iOS and Andriod studio.

Execute given set of commands in Andriod studio

npm run build
npx cap copy
npx cap add android
npx cap copy android
npx cap open android

Likewise, you have to run the given below commands for running the app on the iOS emulator.

npm run build
npx cap copy
npx cap add ios
npx cap copy ios
npx cap open ios