react-native-qrcode-package

QR Code generator and QR Code Scanner for React Native.

Features

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

Installation

npm i react-native-qrcode-package

Install dependency packages to generate qr code:

yarn add react-native-svg

Or

npm i react-native-svg

Install dependency packages to scan qr code:

yarn add react-native-camera

yarn add react-native-permissions

Or

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 if you want to use vibration after a successful scan. 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-qrcode-package';

// Simple usage(all fields have default values except 'jsonObject')
 render() {
    return (
      <View>
        <GenerateQRCode
          jsonObject={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>
        <GenerateQRCode
          jsonObject={data}
          onError={e => handleError(e)}
        />
      </View>
    );
  }

ScanQRCode

import ScanQRCode from 'react-native-qrcode-package';

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

// error handle
handleError = (error: undefined) => {
    console.error('Something went wrong', error);
    Alert.alert(
      'Invalid QR Code',
      'The scanned QR code does not contain valid JSON',
      [
        {
          text: 'OK',
          onPress: () => {},
        },
      ],
    );
  };
render() {
    return (
      <View>
         <ScanQRCode
          onQRCodeScanned={handleScanJsonObject}
          onError={handleError}
        />
      </View>
    );
  }

Props

GenerateQRCode

Name | Default | Description ----------------|------------|-------------- sizeQRCode | 150 | Size of rendered image in pixels jsonObject | object | Put your a JSON .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 backgroundColorQRCode | 'white' | Color of the background QR code enableLinearGradient | false | Enable or disable linear gradient linearGradient | ['rgb(255,0,0)','rgb(0,255,255)'] | Array of 2 rgb colors used to create the linear gradient gradientDirection| [170,0,0,0] | The direction of the linear gradient logo | null | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} logoSize | 20% of size | Size of the imprinted logo. Bigger logo equals less error correction in QR code logoBackgroundColor | 'transparent' | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop. logoMargin | 2 | Logo distance to it's wrapper logoBorderRadius | 0 | Border-radius of logo image (Android isn't supported) quietZone | 0 | Quiet zone around the qr in pixels (Useful when saving image to gallery) getRef | null | Get SVG ref for further usage ecl | 'M' | Error correction level

Prop | Type
----------------|------------ sizeQRCode | number
jsonObject | object
colorQrCode | string
onError(error) | Function
backgroundColorQRCode | string enableLinearGradient | boolean
linearGradient | string [] gradientDirection| string []
logo | ImageSourcePropType
logoSize | number logoBackgroundColor | string logoMargin | number
logoBorderRadius | number
quietZone | number
getRef(c: any) => any | Function
ecl | 'L' or 'M' or 'Q' or 'H'

ScanQRCode

Name | Default | Description ----------------|------------|-------------- onQRCodeScanned(object) | - | Will call this specified method when a QR code is detected in the camera. vibrateAfterScan | false | Vibrate after Scanned QR reactivateCamera | true | Will reactivate the scanning ability of the component. reactivateScanTimeout | 0 | Use this to configure how long it should take (in milliseconds) before the ScanQRCode should reactivate. 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. showScanMarker | 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']) customMarker | - | Pass a RN element/component to use it as a custom marker. containerStyle | - | Use this to pass styling for the outermost container. cameraStyle | - | Use this to pass or overwrite styling for the camera window rendered. cameraContainerStyle | - | Use this to pass or overwrite styling for the camera container (view) window rendered. markerStyle | - | Use this to add custom styling to the default marker. topViewStyle | - | Use this to pass or overwrite styling for the '' that contains the topContent prop. bottomViewStyle | - | Use this to pass or overwrite styling for the '' that contains the bottomContent prop. topContent | - | Use this to render any additional content at the top of the camera view.(propType: oneOfType([ PropTypes.element, PropTypes.string, ])) bottomContent | - | Use this to render any additional content at the bottom of the camera view.(propType: oneOfType([ PropTypes.element, PropTypes.string, ])) notAuthorizedView | - | Pass a RN element/component to use it when no permissions given to a camera (only IOS). permissionDialogTitle | 'Permission' | Use this to set permission dialog title (only Android).(propType: string) permissionDialogMessage | 'Requires camera permission to scan' | Use this to set permission dialog message (only Android).(propType: string) buttonPositive | 'OK' | Use this to set permission dialog button text (only Android).(propType: string) checkAndroid6Permissions | false | Use this to enable permission checking on Android 6. 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 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. cameraProps | - | Properties to be passed to the Camera component.(prop type: object) cameraTimeoutView | - | Pass an RN element/component to show it when the camera is inactive for cameraScanTimeout (another prop) milliseconds. If the cameraScanTimeout is 0 or not specified, this prop will never be used.

Prop | Type
----------------|------------ onQRCodeScanned(json: object) => void | Function vibrateAfterScan | boolean reactivateCamera | boolean reactivateScanTimeout | number
fadeImageIn | boolean showScanMarker | boolean cameraType | 'front' | 'back' customMarker | JSX.Element
containerStyle | StyleProp
cameraStyle | StyleProp
cameraContainerStyle | StyleProp
markerStyle | StyleProp
topViewStyle | StyleProp
bottomViewStyle | StyleProp
topContent | JSX.Element or string bottomContent | JSX.Element or string
notAuthorizedView | JSX.Element permissionDialogTitle | string permissionDialogMessage | string buttonPositive | string
checkAndroid6Permissions | boolean lightMode | RNCamera.Constants.FlashMode.off or RNCamera.Constants.FlashMode.on or RNCamera.Constants.FlashMode.auto or RNCamera.Constants.FlashMode.torch onError(error: undefined) => void | Function cameraScanTimeout | number
cameraProps | RNCameraProps
cameraTimeoutView | JSX.Element