All geek questions in one place

Barcode Scan Using

I use the built-in camera to create a barcode scanner for Android and iOS.

I can scan the barcode in iOS, but the problem is the lack of visibility for the border of the scan. And I want the whole screen to be able to scan a barcode not only in the middle of the screen.

Is there any way? If there is another library that will also work for me.

+9
source share
7 answers

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

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

If you don’t have rnpm get it ... this is very useful! (npm install -g rnpm) ( https://github.com/rnpm/rnpm )

then run these commands in the project file:

npm install --save response-native-barcodescanner

rnpm link react-native-barcodescanner

at that moment I synchronized gradle and restarted the application from Android studios ... not sure if this is necessary (also sometimes the rnpm link forgets a new line character ... if you have an error message regarding the word include this is because it is. .. just find it in your setup.gradle file add a new line before the word is included)

Now it is ready to use.

import it:

import BarcodeScanner from 'react-native-barcodescanner';

then use it in the return status of the render function:

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

If you need more information, check out this link. Hope this helped someone avoid the torture that I went through the library after the old library, which didn't work.

Happy coding! :)

+8
source

I recommend using the React Native Community React Native Camera . It is well supported, and you can simply pass a callback hint to get the output:

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

A callback will be called when a barcode is detected on the camera screen. From the docs :

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

+1
source

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

Tried on Android works fine.

0
source

To disable the yellow cell, console.disableYellowBox = true; anywhere in your application. Usually in the root file it is used for both iOS and Android.

0
source

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

It works like a charm, I definitely recommend it.

You can see if BarCodeScanner with your barcode, try it in a light snack: https://snack.expo.io/@documentation/barcodescanner-example

0
source

There is a built-in library for scanning QR codes with a dedicated scan area with an animated scan panel that moves up and down.

You can use isShowScanBar prop to show the scan panel, or disable it by passing false this prop.

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

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

These details are listed here https://www.npmjs.com/package/react-native-qr-scanner#qrscanner

First, install the act-native-camera library, as it depends on it.

Just run this command in the root directory of your project. npm 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)) }
0
source

Source: https://habr.com/ru/post/1242689/

More articles:


All Articles