React Native QRCode or BarCode Scanner Component Tutorial With Example Source Code Full Project For Beginners

 

 

react-native-qrcode-scanner

npm version Backers on Open Collective Sponsors on Open Collective

A QR code scanner component for React Native built on top of react-native-camera by Lochlan Wansbrough

Please note, this will also function as a generic barcode scanner by the virtue of the above module supporting barcode scanning, however, this module was initially built as a QR code scanner.

This module was originally written because the author couldn’t find a module that could be simply plugged into a project without requiring too much setup.

Looking for active contributors. See Contribution guide for more details.

Please note: Most of the support on debugging new issues, especially with Android, relies on the open source community. The project is on the look out for active contributors who want to maintain this library more rigorously.

Getting started

Requirements

iOS 10

With iOS 10 and higher you need to add the “Privacy – Camera Usage Description” key to the info.plist of your project. This should be found in ‘your_project/ios/your_project/Info.plist’. Add the following code:

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microsphone is accessed for the first time</string>

Android 7

With Android 7 and higher you need to add the “Vibration” permission to your AndroidManifest.xml of your project. This should be found in your android/app/src/main/AndroidManifest.xml Add the following:

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

You need to add the “missingDimensionStrategy” config for the ‘react-native-camera’ setting to ‘general’, this should be found in your android/app/build.gradle add the following:

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
  }
}

react-native-camera

react-native-camera is a dependency for this package that you’ll need to add to your project. To install, run the following commands:

  1. npm install react-native-camera --save
  2. react-native link react-native-camera

New Version/Migration

If using an older version of this module with RCTCamera you will need to follow the docs here to move from the old RCTCamera to the new RNCamera. You will then need to install it as above.

See also  Build a React.js Live Digital Clock in Browser Using react-live-clock Library Using Javascript Full Project For Beginners

Versions of this library > 0.0.30 will not support react-native-camera versions less than 1.0.0.

To install and start using react-native-qrcode-scanner:

  1. npm install react-native-qrcode-scanner --save
  2. react-native link react-native-qrcode-scanner

react-native-permissions

You will also need to install react-native-permissions to handle camera related permissions

  1. npm install react-native-permissions --save
  2. react-native link react-native-permissions

For iOS, as part of the react-native-permissions setup you will need to add the following code to your Podfile

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

You may also need to reset your simulator data after adding those permissions Device -> Erase All Content and Settings...

Usage

To use react-native-qrcode-scanner, import the react-native-qrcode-scanner module and use the <QRCodeScanner /> tag. More usage examples can be seen under the examples/ folder.

Here is an example of basic usage:

'use strict';

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  Linking
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

class ScanScreen extends Component {
  onSuccess = e => {
    Linking.openURL(e.data).catch(err =>
      console.error('An error occured', err)
    );
  };

  render() {
    return (
      <QRCodeScanner
        onRead={this.onSuccess}
        flashMode={RNCamera.Constants.FlashMode.torch}
        topContent={
          <Text style={styles.centerText}>
            Go to{' '}
            <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on
            your computer and scan the QR code.
          </Text>
        }
        bottomContent={
          <TouchableOpacity style={styles.buttonTouchable}>
            <Text style={styles.buttonText}>OK. Got it!</Text>
          </TouchableOpacity>
        }
      />
    );
  }
}

const styles = StyleSheet.create({
  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
  }
});

AppRegistry.registerComponent('default', () => ScanScreen);

Screenshot of the above:

See also  Build a React Native Camera Selfie App Using react-native-camera Library in TypeScript Full Project For Beginners

screenshot 2017-05-02 15 06 33

Leave a Reply