React Native capture events from physical barcode scanner

1.5k views Asked by At

I'm trying to implement a barcode scanner (this model is a Generalscan M100BT) inside a React Native application. Currently works ok for scanning into a TextiInput, but the soft keyboard is on the way and theres no way to hide it. So we are trying to capture the events from the scanner but I'm not able to determine which event should I look into, nor which module generates it or how to obtain the EAN code once I determine which event has it. I'm using Snoopy to look at the Bridge and trying to narrow down where to look, here are some of the logcat output where I think might be the event I'm looking for, but I'm not really sure

12-30 14:06:45.193  7608  7686 I ReactNativeJS: N->JS : RCTEventEmitter.receiveEvent([1149,"topLayout",{"target":1149,"layout":{"y":458,"height":0,"width":360,"x":0}}]) *
12-30 14:06:45.195  7608  7686 I ReactNativeJS: N->JS : RCTEventEmitter.receiveEvent([1155,"topLayout",{"target":1155,"layout":{"y":0,"height":561,"width":360,"x":0}}]) *
12-30 14:06:45.196  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1383]]) *
12-30 14:06:45.197  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1384]]) *
12-30 14:06:45.198  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1380,1382]]) *
12-30 14:06:45.357  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1386]]) *
12-30 14:06:45.358  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1390]]) *
12-30 14:06:45.361  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onAnimatedValueUpdate",{"value":2,"tag":3}]) *
12-30 14:07:17.609  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":879,"eventType":"focus"}]) *
12-30 14:07:17.964  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":879,"eventType":"select"}]) *
12-30 14:07:17.978  7608  7686 I ReactNativeJS: N->JS : RCTEventEmitter.receiveEvent([879,"topClick",{}]) *
12-30 14:07:18.072  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1394]]) *
12-30 14:07:18.081  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onAnimatedValueUpdate",{"value":1,"tag":3}]) *
12-30 14:07:18.083  7608  7686 I ReactNativeJS: N->JS : <callback for NativeAnimatedModule.startAnimatingNode>([{"finished":true}]) *
12-30 14:07:18.095  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1399]]) *
12-30 14:07:18.250  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1400]]) *
12-30 14:07:18.295  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":879,"eventType":"blur"}]) *
12-30 14:07:18.296  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":13,"eventType":"focus"}]) *
12-30 14:07:18.305  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onAnimatedValueUpdate",{"value":1,"tag":3}]) *
12-30 14:08:24.954  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":13,"eventType":"select"}]) *
12-30 14:08:24.969  7608  7686 I ReactNativeJS: N->JS : RCTEventEmitter.receiveEvent([13,"topClick",{}]) *

besides that I'm trying to capture the event using:

const nativeEventEmitter = new NativeEventEmitter(NativeModules.{BarcodeScannerModule});
nativeEventEmitter.addListener('onHWKeyEvent', (data) => console.log("Barcode Scanner Event: ", data));

but I don't know where to look for the {BarcodeScannerModule} module name to use with this code,

UPDATE

Heres the code for the TextInput that receives the scanned barcode, on the onSubmitEditing it uses the event:

  <TextInput style={{ color: "white", width: 0, height: 0 }}
    onFocus={() => NativeModules.KeyboardModule.hideKeyboard()}
    autoFocus={true}
    onChange={this.handleTextChange}
    ref={(input) => { this.scanInput = input }}
    caretHidden={true}
    onSubmitEditing={(event) => { this.findEanData(event.nativeEvent.text); }}
  />

any help is greatly appreciated!

1

There are 1 answers

0
Dieguinho On BEST ANSWER

I'm closing this question cause found that I could capture the events using react-native-keyevent, which wasn't working cause there was a bluetooth problem between the device and the scanner.