react-native-barcodescanner

A barcode scanner component for React Native Android. For iOS you can use https://github.com/lwansbrough/react-native-camera. The library depends on https://github.com/dm77/barcodescanner and https://github.com/zxing/zxing.

Installation

npm i --save react-native-barcodescanner

Add it to your android project

• In android/setting.gradle

...
include ':ReactNativeBarcodescanner', ':app'
project(':ReactNativeBarcodescanner').projectDir =newFile(rootProject.projectDir, '../node_modules/react-native-barcodescanner/android')

• In android/app/build.gradle

...
dependencies {
...
compile project(':ReactNativeBarcodescanner')
}

• register module (in MainActivity.java)

importcom.eguma.barcodescanner.BarcodeScanner; // <--- importpublicclassMainActivityextendsActivityimplementsDefaultHardwareBackBtnHandler {
......
@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = newReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(newMainReactPackage())
.addPackage(newBarcodeScanner()) // <------ add here
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
setContentView(mReactRootView);
}
......
}

Example

varBarcodeScanner=require('react-native-barcodescanner');varBarcodeScannerExampleApp=React.createClass({getInitialState(){return({torchMode: 'off',cameraType: 'back',});},barcodeReceived(e){console.log('Barcode: '+e.data);console.log('Type: '+e.type);},render(){return(<BarcodeScanneronBarCodeRead={this.barcodeReceived}style={{flex: 1}}torchMode={this.state.torchMode}cameraType={this.state.cameraType}/>);}});

Properties

onBarCodeRead

Will call the specified method when a barcode is detected in the camera's view. Event contains data (barcode value) and type (barcode type). The following barcode types can be recognised:

BarcodeFormat.UPC_ABarcodeFormat.UPC_EBarcodeFormat.EAN_13BarcodeFormat.EAN_8BarcodeFormat.RSS_14BarcodeFormat.CODE_39BarcodeFormat.CODE_93BarcodeFormat.CODE_128BarcodeFormat.ITFBarcodeFormat.CODABARBarcodeFormat.QR_CODEBarcodeFormat.DATA_MATRIXBarcodeFormat.PDF_417

torchMode

Values: on, off (default)

Use the torchMode property to specify the camera torch mode.

cameraType

Values: back (default), front

Use the cameraType property to specify the camera to use. If you specify the front camera, but the device has no front camera the back camera is used.

Viewfinder properties

The following properties can be used to style the viewfinder:

viewFinderBackgroundColor, viewFinderBorderColor, viewFinderBorderWidth, viewFinderBorderLength, viewFinderDrawLaser, viewFinderLaserColor

All color values are strings and must be specified as #AARRGGBB (alpha, red, green, blue). viewFinderBorderWidth and viewFinderBorderLength are numbers, viewFinderDrawLaser is either true or false (default). For a better overview of the viewfinder see .