Barcode scanning using react native

Rohit Goyal picture Rohit Goyal · Feb 10, 2016 · Viewed 33.1k times · Source

I am using react-native-camera to build a barcode scanner for Android and iOS both.

I am able to scan the barcode in iOS but the issue is there is no visual for the scanning boundary. And I want the whole screen to be able to scan the bar code not just the middle of the screen.

Is there any way around it? If there is some other library that would also work for me.

Answer

James Hollyer picture James Hollyer · Apr 29, 2016

Well it took me all day but I finally found a library that worked. If anyone finds their way here and is looking for a barcode scanner for react native that works on android...I am here to help.

https://github.com/ideacreation/react-native-barcodescanner

1st if you do not have rnpm get it...it is very helpful!(npm install -g rnpm)(https://github.com/rnpm/rnpm)

then run these commands in your project file:

npm install --save react-native-barcodescanner

rnpm link react-native-barcodescanner

at this point I synced gradle and reran the app from android studios...not sure if it is needed(also sometimes rnpm link forgets a new line character...if you have an error message about the word include it is because this...just find it in your setting.gradle file add a new line before the word include)

now it is ready to use.

import it:

import BarcodeScanner from 'react-native-barcodescanner';

then use it in your render function's return statment:

<BarcodeScanner
    onBarCodeRead={this._BarCodeRead}
    style={styles.preview}
    torchMode='off'
    cameraType='back'
  />

If you need more info check out that link. I hope this helped someone avoid the torture I endured going through library after old library that did not work.

Happy coding! :)