How to listen to keyboard input in React Native

Question

I have a Honeywell scanner that displays text when scanning barcodes. I can use it as a “keyboard” for entering text, which is very convenient because I do not need to interact with anything. But he has the disadvantage of focusing on the input and displaying the virtual keyboard of a mobile device, which is unacceptable for the project I'm working on.

Is there a way to get the scanned value without having to focus the input? I believe that listening for keyPress events or the like would be the right way, storing the value entered into the variable somewhere other than textInput.

If there is a better way to achieve this, I am all ears!

Answer 1

Well, that's it, I found a way to do this, not too crazy. This is not the most elegant solution, but it does exactly what I need and does not add too much code.

import { Keyboard, TextInput } from 'react-native'; ... <TextInput autoFocus onFocus={() => Keyboard.dismiss()} /> 

The name of the game here was autoFocus and onFocus={() => Keyboard.dismiss()} /> .

Now I will use https://www.npmjs.com/package/react-native-keyevent , as suggested by @MattAft, to listen for keystrokes (unfortunately, this package will not give me the actual input of the scanner, however it will raise the keyDown event ) to focus TextInput when the scanner reads something.

Answer 2

I know that response-native has a keyboard module for managing keyboard events

The keyboard module allows you to listen to your own events and respond to them, as well as make changes to the keyboard, for example, reject it.

 import React, { Component } from 'react'; import { Keyboard, TextInput } from 'react-native'; class Example extends Component { componentWillMount () { this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow); this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide); } componentWillUnmount () { this.keyboardDidShowListener.remove(); this.keyboardDidHideListener.remove(); } _keyboardDidShow () { alert('Keyboard Shown'); } _keyboardDidHide () { alert('Keyboard Hidden'); } render() { return ( <TextInput onSubmitEditing={Keyboard.dismiss} /> ); } }