Create Ionic 7 React Native Barcode and QR Code Scanner

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 React Native 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

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    ...
}

Add Barcode Scanner Plugin in Ionic React

After entering the ionic react app, you need to install or add a native barcode scanner plugin.

Go ahead and one by one all four commands given below.

By following the process, install capacitor sync and ionic native core plugins.

npm install @ionic-native/core --legacy-peer-deps

npm install @ionic-native/barcode-scanner --legacy-peer-deps

npm install phonegap-plugin-barcodescanner --legacy-peer-deps

 npm i terser --legacy-peer-deps
 

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

The @ionic-native/core plugin by default doesn’t come with package.json file.

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

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

Execute given set of commands in Android studio

npm run build
npx cap copy

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

npm run build
npx cap copy