10

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.

Remi Guan
  • 21,506
  • 17
  • 64
  • 87
Rohit Goyal
  • 1,521
  • 3
  • 24
  • 49

6 Answers6

9

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! :)

Community
  • 1
  • 1
James Hollyer
  • 277
  • 1
  • 3
  • 18
  • Does it have highlight scanning area as well? – Rohit Goyal Apr 29 '16 at 08:16
  • Does this plugin also uses the whole screen to scan barcodes? – Ee-P May 16 '16 at 21:25
  • Good questions. I have not messed with this so I am not sure(maybe ask on the github page?). But I know that for android this comes standard. The above code provides a highlight area on the screen and it will only scan in that area. I am not sure how to control it though. good luck! – James Hollyer May 19 '16 at 17:17
  • Is this can scan all king of barcode ? In my case it is only scanning QR codes. How to scan all kind of barcodes with the same or other library ? – ARWIN Jul 21 '16 at 08:34
2

I recommend using React Native Community's React Native Camera. It's quite well maintained and you can simply pass a callback prop to receive the output:

<RNCamera onBarCodeRead={this.handleBarCodeRead}></RNCamera>

Your callback will be invoked when a barcode is detected in the camera's view. From the docs:

Event contains data (the data in the barcode) and type (the type of the barcode detected).

Sam
  • 2,540
  • 2
  • 23
  • 24
1

There is a react-native library for scanning QR codes with Highlighting scanning area with animated scan bar that moves up and down.

You can use isShowScanBar prop to show scan bar or either disable by passing false to this prop.

Github Link https://github.com/shifeng1993/react-native-qr-scanner#readme

It's npm is also here https://www.npmjs.com/package/react-native-qr-scanner

It's props are listed here https://www.npmjs.com/package/react-native-qr-scanner#qrscanner

Firstly, Install the react-native-camera library as this library is dependent on it.

Just run this command in root directory of your project npm i react-native-qr-scanner

then run this link command react-native link react-native-camera && react-native-qr-scanner

Import it using : import {QRscanner} from 'react-native-qr-scanner';

 <QRscanner onRead={this.onRead}
    cornerBorderColor ='black'
    cornerRadius={40}
    isRepeatScan = {true}
    cornerBorderRadius={40}
    cornerColor ='black'
    scanBarColor='black'
    cornerBorderWidth={10}
    cornerBorderLength={60}
    hintText="Please Align QRCode"
    renderBottomView={this.bottomView} flashMode={this.state.flashMode}
    finderY={50}/>

 onRead = (res) => {
   alert(JSON.stringify(res))
}

It works for both Android and iOS

HarshitMadhav
  • 4,769
  • 6
  • 36
  • 45
0

js.coach is a good place to look for react native plugins

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

https://github.com/leofidjeland/react-native-barcode

papacostas
  • 848
  • 1
  • 9
  • 24
  • react-native-barcode is only for generating barcode it seems. I want something to read barcodes. And using react-native-camera I am able to do this but I am having the issue I mentioned in my question. – Rohit Goyal Feb 17 '16 at 09:11
0

Just found universal code scanner - combines android and ios: https://www.npmjs.com/package/react-native-barcode-scanner-universal

Tried on Android works just fine.

Pavel Biryukov
  • 1,076
  • 12
  • 19
0

Expo provides BarCodeScanner component out of the box (preinstalled in managed apps).

It works like a charm, I definitely recommend it.

You can see if BarCodeScanner works with your bar code, try it in snack: https://snack.expo.io/@documentation/barcodescanner-example

hal
  • 1,705
  • 1
  • 22
  • 28
  • Expo is a great thing, but unfortunately on ios it supports only QR code. – 1011sophie Jun 23 '19 at 12:13
  • @1011sophie, Expo on iOS supports many barcodes, not only QR. See the docs: https://docs.expo.io/versions/latest/sdk/bar-code-scanner/#supported-formats. Expo's BarCodeScanner is thin wrapper for underlying iOS platform scanner, I think. It supports all barcodes that iOS supports. Anyone can try out BarCodeScanner if it scans their barcode from the snack: https://snack.expo.io/@documentation/barcodescanner-example – hal Jul 05 '19 at 06:07