React Native Tutorial: QRCode Scanner App for Android or iOS

In this React Native step by step tutorial, we will show you an example of creating a QRCode scanner for Android and iOS mobile apps. This example might be useful for your React Native application, so, we are trying to make integration easy to understand. We will use react-native-qrcode-scanner library for this tutorial. The "react-native-qrcode-scanner" provides a React component that renders a viewfinder for the device's camera and will scan QRCode that shows up in the frame.

This tutorial divided into several steps:

• Step #1: Install React Native CLI and Create App
• Step #2: Install react-native-qrcode-scanner Library
• Step #3: Implementing the QRCode Scanner
• Step #4: Run and Test the React Native QRCode Scanner

The following tools, frameworks, and modules are required for this tutorial:

1. React Native
2. Node.js (NPM or Yarn)
3. react-native-qrcode-scanner
4. Android Studio or SDK for Android
5. XCode for iOS
6. Terminal (OSX/Linux) or Node Command Line (Windows)
7. Text Editor or IDE (We are using VSCode)

Before start to the main steps, make sure that you have installed Node.js and can run NPM or Yarn in the terminal or command line. To check the existing or installed Node.js environment open the terminal/command line then type this command.

node -v
v12.16.1
npm -v
6.14.4
yarn -v
1.21.1

You can watch the video tutorial from our YouTube channel.

Step #1: Install React Native CLI and Create App

For this React Native tutorial, we will use React Native CLI to create a React Native app. To install it, type this command in your App projects folder.

sudo npm install -g react-native-cli

Now, we have "[email protected]" for this tutorial. Next, create a React Native App using this command from your project directory.

react-native init ReactNativeQrcode

Next, go to the newly created React App folder and run the React Native app to the iOS simulator.

cd ReactNativeQrcode && npx react-native run-ios

Or run to the Android device/emulator.

cd ReactNativeQrcode && npx react-native run-android

When a new terminal window opened, go to the React Native project folder then run the Metro bundler server.

cd ~/Apps/ReactNativeQrcode && yarn start

Now, you will see this in the iOS simulator.

Step #2: Install react-native-qrcode-scanner Library

Actually, the installation of this react-native-qrcode-scanner not easy because there is some additional configuration to remove the issues or errors. The react-native-qrcode-scanner is simply enough to install, but other dependencies such as react-native-camera and react-native-permissions need to configure properly.

Type these commands to install the react-native-qrcode-scanner library.

yarn add react-native-camera
react-native link react-native-camera
yarn add react-native-qrcode-scanner
yarn add react-native-permissions
react-native link react-native-qrcode-scanner
react-native link react-native-permissions

Next, for iOS, open and edit "ios/ReactNativeQrcode/Info.plist" then add these lines before the closing of </dict>.

    <key>NSCameraUsageDescription</key>
    <string>Your message to user when the camera is accessed for the first time</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Your message to user when the microsphone is accessed for the first time</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Your message to user when the photo library is accessed for the first time</string>

Open and edit "ios/Podfile" then add these lines before other pods.

target 'ReactNativeBarcode' do
  # Permissions
  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"

  # Pods for ReactNativeBarcode
  ...
end

Run this command inside the ios folder to reinstall the Pod.

cd ios
pod install

If necessary, in the XCode run Product -> Clean Build Folder before running this iOS app to the iOS device.

Next, for Android, open and edit "android/app/src/main/AndroidManifest.xml" then add this line of permission after other permission.

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

Open and edit "android/app/build.gradle" then add these lines inside the "defaultConfig" block.

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general'
    missingDimensionStrategy 'react-native-camera', 'mlkit'
  }
}

Now, the react-native-qrcode-scanner library is ready to use.

Step #3: Implementing the QRCode Scanner

The implementation of the QRCode scanner for this React Native app is very simple. Just a text to display a result and a button to start the scan by running the QRCode scanner camera. Open and edit "App.js" then add or replace these imports of required React Native elements, useState (we are using React Hooks), and QRCodeScanner (react-native-qrcode-scanner) library.

import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  Button
} from 'react-native';

import {
  Header,
  Colors,
} from 'react-native/Libraries/NewAppScreen';

import QRCodeScanner from 'react-native-qrcode-scanner';

Modify the App constant to be like this.

const App = () => {
...
}

Add the variables inside the App constant for show/hide the result and show/hide the QRCode scanner.

  const [scan, setScan] = useState(false)
  const [result, setResult] = useState()

Add the functions after those variables to handle the scan result and activate or start scan action.

  onSuccess = (e) => {
    setResult(e.data)
    setScan(false)
  }

  startScan = () => {
    setScan(true)
    setResult()
  }

Modify the render by replacing the default render with this.

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          <View style={styles.body}>
            { result &&
              <View style={styles.sectionContainer}>
                <Text style={styles.centerText}>{result}</Text>
              </View>
            }
            { !scan &&
              <View style={styles.sectionContainer}>
                <Button
                  title="Start Scan"
                  color="#f194ff"
                  onPress={this.startScan}
                />
              </View>
            }
            { scan &&
              <View style={styles.sectionContainer}>
                <QRCodeScanner
                  reactivate={true}
                  showMarker={true}
                  ref={(node) => { this.scanner = node }}
                  onRead={this.onSuccess}
                  topContent={
                    <Text style={styles.centerText}>
                      Scan your QRCode!
                    </Text>
                  }
                  bottomContent={
                    <TouchableOpacity style={styles.buttonTouchable} onPress={() => setScan(false)}>
                      <Text style={styles.buttonText}>Cancel Scan</Text>
                    </TouchableOpacity>
                  }
                />
              </View>
            }
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );

Finally, modify the styles to be like this.

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
  centerText: {
    flex: 1,
    fontSize: 18,
    padding: 32,
    color: '#777',
  },
  textBold: {
    fontWeight: '500',
    color: '#000',
  },
  buttonText: {
    fontSize: 21,
    color: 'rgb(0,122,255)',
  },
  buttonTouchable: {
    padding: 16,
  },
});

Step #4: Run and Test the React Native QRCode Scanner

Before running to the iOS or Android devices, make sure the devices are connected to your computer. Next, run the React Native app to the iOS device inside the XCode after opening the "ios/ReactNativeQrcode.xcworkspace" and the device exists in the XCode toolbar. Make sure you have chosen your Development Team in the Build Settings.

To run to the Android device, type this command in the terminal.

npx react-native run-android

When a new terminal window opened, go to the React Native project folder then run the Metro bundler server.

cd ~/Apps/ReactNativeQrcode && yarn start

And here the app looks like on the iPhone.

That it's, the React Native Tutorial: QRCode Scanner App for Android or iOS. You can get the full source code in our GitHub.

That just the basic. If you need more deep learning about React.js, React Native or related you can take the following cheap course:

• Master React Native Animations
• Advanced React Native Topics
• React Native
• Learning React Native Development
• React: React Native Mobile Development: 3-in-1

Thanks!