react-native-qr-code-package

react-native-qr-code-package

QR Code generator and QR Code Scanner for React Native based on react-native-qrcode-svg and react-native-qrcode-scanner

Features

• Rendering of QR code images from JSON file
• Scanning QR code images, data processing, log errors

Installation

npm i react-native-qr-code-package

Install dependency packages to generate qr code:

yarn add react-native-qrcode-svg

yarn add react-native-svg

Or

npm i react-native-qrcode-svg

npm i react-native-svg

Install dependency packages to scan qr code:

yarn add react-native-qrcode-scanner

yarn add react-native-camera

yarn add react-native-permissions

Or

npm i react-native-qrcode-scanner

npm i react-native-camera

npm i react-native-permissions

IMPORTANT New version of react-native-permissions (3.8.0) has breaking changes and doesn't work correctly on ios with camera permission. Use "react-native-permissions": "3.7.3" or below version.

After that for ios go to the folder your-project/ios and run pod install.

WARNING

You may got this warn after install react-native-camera: ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. If you have warn then: go to the node-modules folder -> find react-native-camera folder -> src folder -> find the file RNCamera.js -> find inside the file: import ViewPropTypes from from 'react-native'; -> delete this import from 'react-native' -> create new import: import {ViewPropTypes} from 'deprecated-react-native-prop-types'; This is one of the solutions to this warn.

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>

Also you will need to add the following code to your Podfile (as part of the react-native-permissions setup):

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

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
  }
}

Examples

GenerateQRCode

import GenerateQRCode from 'react-native-qr-code-package';

// Simple usage(all fields have default values except 'jsonFile')
 render() {
    return (
      <View>
        <GenerateQRCode
          jsonFile={data} // data - it's your json file(data.json)
          sizeQRcode={200}
        />
      </View>
    );
  }

// error handle
handleError = (error: undefined) => {
    console.error('Something went wrong', error);
  };
render() {
    return (
      <View>
        <CustomGenerateQRCode
          jsonFile={data}
          onErrorHandle={e => this.handleError(e)}
        />
      </View>
    );
  }

ScanQRCode

import ScanQRCode from 'react-native-qr-code-package';

// Simple usage(all fields have default values except 'onQRCodeScanned')
handleScanJsonObject = (json: object) => {
    console.log('QR Code data:', json);
  };
 render() {
    return (
      <View>
        <ScanQRCode
          onQRCodeScanned={e => handleScanJsonObject(e)}
        />
      </View>
    );
  }

// error handle
handleError = (error: Error) => {
   console.error('Something weng wrong', error);
  };
render() {
    return (
      <View>
         <CustomScanQRCode
          onQRCodeScanned={e => handleScanJsonObject(e)}
          onError={handleError}
        />
      </View>
    );
  }

Props

GenerateQRCode

Name	Default	Description
size	150	Size of rendered image in pixels
jsonValue	'this is a JSON file'	.json file of the QR code. Example: '{"brand": "Name","model": "Model name"}'
colorQrCode	'black'	Color of the QR code
onError(error)	undefined	Callback fired when exception happened during the code generating process

ScanQRCode

Name	Default	Description
onQRCodeScanned(json)	'this is handle scan method'	Will call this specified method when a QR code is detected in the camera's view passing in the event emitted upon reading the code.
reactivateCamera	true	When set to false, when a QR code is scanned, the ScanQRCode will not scan another code until it is re-rendered. When set to true this will reactivate the scanning ability of the component.
vibrateAfterScan	false	Vibrate after Scanned QR
reactivateScanTimeout	0	Use this to configure how long it should take (in milliseconds) before the ScanQRCode should reactivate.
cameraScanTimeout	0	Use this to configure how long it should take (in milliseconds) before the ScanQRCode should be displayed. After that the camera will be inactive and press the view to reactivate it.
fadeImageIn	true	When set to true this ensures that the camera view fades in after the initial load up instead of being rendered immediately. Set this to false to prevent the animated fade in of the camera view.
showQRMarker	false	Use this to show marker on the camera scanning window.
cameraType	'back'	Use this to control which camera to use for scanning QR codes.(propType: ['front', 'back'])
lightMode	RNCamera.Constants.FlashMode.off	Part of the react-native-camera package react-native-camera/flashMode:RNCamera.Constants.FlashMode.off (turns it off) / RNCamera.Constants.FlashMode.on(means camera will use flash in all photos taken) / RNCamera.Constants.FlashMode.auto(leaves your phone to decide when to use flash when taking photos, based on the lightning conditions that the camera observes) / RNCamera.Constants.FlashMode.torch(turns on torch mode, meaning the flash light will be turned on all the time (even before taking photo) just like a flashlight).
onError(error: Error)	'this is handling errors that occurred during scanning'	Callback fired when exception happened during the scanning process