react-native-infy-qrcode-scanner

  

QR code scanner component is used for React Native applications, built on top of react-native-infy-camera by Satish Attada

This prototype will used as barcode scanner and was built for QR code scanning

Getting started

$3

#### Android 8

With Android 8 and higher you should add "Vibration" permission on your AndroidManifest.xml of your project. This should be found in your android/app/src/main/AndroidManifest.xml Add the following:

``

`
You should add "missingDimensionStrategy" defaultConfig to the 'react-native-infy-camera' by placing it to 'general', this should be found in android/app/build.gradle of your project,
please add the following:
`
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-infy-camera', 'general'
}
}
`

#### react-native-infy-camera
There is a dependency with react-native-infy-camera to this package.
Install react-native-infy-camera

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

$3

1. npm i react-native-infy-qrcode-scanner
2. react-native link react-native-infy-qrcode-scanner

_Please note: If you are using react-native version 0.60 or above, then please ignore react-native link._

#### react-native-permissions

You should 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

_Please note: If you are using react-native version 0.60 or above, then please ignore react-native link._

_Please note: You may also need to reset your simulator/emulator data after adding the permissions Device -> Erase All Content and Settings... ._

Usage

To use react-native-infy-qrcode-scanner, import the react-native-infy-qrcode-scanner module and use the tag.
Here is an example of basic usage:

`js
'use strict';

import React, { Component } from 'react';

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

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

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

render() {
return (
onRead={this.onSuccess}
flashMode={RNCamera.Constants.FlashMode.torch}
topContent={

Go to{' '}
https://www.qr-code-generator.com/
and add some TEXT QR code generator on
your computer and scan the QR code.

}
bottomContent={

Confirm

}
/>
);
}
}

const styles = StyleSheet.create({
centerText: {
flex: 1,
fontSize: 16,
padding: 20,
color: '#eee'
},
textBold: {
fontWeight: '600',
color: '#000'
},
buttonText: {
fontSize: 21,
color: '#009b00'
},
buttonTouchable: {
padding: 10
}
});

AppRegistry.registerComponent('default', () => ScanQRComponent);
`

Methods

#### reactivate()

To enable the scan again, use this method
{ this.scanner = node }}> and call this.scanner.reactivate()

Props

#### onRead (required)

propType: func.isRequired
default: (e) => (console.log('QR code scanned!', e))
After scanning the QR code, onRead method is used to read the QR code and this method is required.

#### fadeIn

propType: bool
default: true

Camera view fades after scanning, it is like animation fading.

#### reactivate

propType: bool
default: false

After scanning the QRCodeScanner, You cannot scan another, if set to false
if set to true it will reactivate the scanning

#### reactivateTimeout

propType: number
default: 0

reactivate with some time (in milliseconds). reactivateTimeout is used, by default it is 0

#### cameraTimeout
propType: number
default: 0

This is used to take some time ( in milliseconds) before the QRCodeScanner displayed.

#### cameraTimeoutView

propType: element

Pass component to show when the camera is inactive in cameraTimeout (another prop) milliseconds. If the cameraTimeout is 0 or not specified, this prop will be never used.

#### flashMode

propType: RNCamera.Constants.FlashMode
default: RNCamera.Constants.FlashMode.auto

Flash modes

- RNCamera.Constants.FlashMode.off turns it to off.
- RNCamera.Constants.FlashMode.on means camera flash will be used for all photos.
- RNCamera.Constants.FlashMode.auto used to flash automatically based on lightening conditions.
- RNCamera.Constants.FlashMode.torch on camera open, light will be opened for scanning.


#### topContent

propType: oneOfType([ PropTypes.element, PropTypes.string, ])

This us used to render any additional content at the top of the camera view.

#### bottomContent

propType: oneOfType([ PropTypes.element, PropTypes.string, ])

This us used to render any additional content at the bottom of the camera view.

#### containerStyle

propType: any

This us used pass styling for the outermost container. Useful for adding margin/padding to account for navigation bar.

#### cameraStyle

propType: any

This us used to pass or overwrite styling for the camera window rendered.

#### cameraContainerStyle

propType: any

This us used to pass or overwrite styling for the camera container (view) window rendered.

#### topViewStyle

propType: any

This us used to pass or overwrite styling for the that contains the topContent prop.

#### bottomViewStyle

propType: any

This us used to pass or overwrite styling for the that contains the bottomContent prop.

#### showMarker

propType: boolean
default: false

This us used to show marker on the camera scanning window.

#### customMarker

propType: element

This us used for custom marker.

#### markerStyle

propType: any

This us used to add custom styling to the default marker.

#### notAuthorizedView

propType: element

Pass a RN element/component to use it when no permissions given to the camera (iOS only).

#### cameraType

propType: oneOf(['front', 'back'])
default: 'back'

This us used to control which camera to use for scanning QR codes, defaults to rear camera.

#### checkAndroid6Permissions

propType: bool
default: false

This us used to enable permission checking on Android 6

#### permissionDialogTitle

propType: string
default: 'Info'

This us used to set permission dialog title (Android only).

#### permissionDialogMessage

propType: string
default: 'Need camera permission'

This us used to set permission dialog message (Android only).

#### buttonPositive

propType: string
default: 'OK'

This us used to set permission dialog button text (Android only).

#### cameraProps

propType: object

Properties to be passed to the Camera` component.

License

See LICENSE.md