How do I listen to keyboard input in React Native

Question

I have a Honeywell Scanner that outputs text when scanning bar codes. I can use it as a "keyboard" for text inputs, which comes in very handy because I don't have to interface anything. But it has the downside of having to focus an input and thus displaying the virtual keyboard of the mobile device, which is unacceptable for the project I'm working on.

Is there any way to get the value scanned without having to focus an input? I believe that listening for the keyPress events or the likes of it would be the way to go, storing the value inputted in a variable elsewhere than the textInput.

If there's a better way of achieving this, I'm all ears!

Do you only have one `TextInput` in the component? If so you can just `setState` for the whatever state you're using for the `value` prop of the `TextInput` from the scan, can't you? — MattyK14, Mar 09 '18 at 19:16
Try this package out, if it's being passed as a keypress event then it should work: https://www.npmjs.com/package/react-native-keyevent Note: This wont work with expo unless you eject. — Matt Aft, Mar 09 '18 at 19:20
Yes, yes I can. But unfortunately, to input the scanned value to the input, I have to have it focused. And there's no way of focusing a input without the keyboard showing up, which is the root of all evil here :/ — Lucas Bernardo, Mar 09 '18 at 19:20
Thank you @MattAft! That repo's description is quite literally what I've been googling for the last few hours. I'll try it out and if it works I'll edit the OP. Thanks again — Lucas Bernardo, Mar 09 '18 at 19:24
@LucasBernardo np, hopefully it works...we ran into this problem ~1 year ago and our work around was to hookup each barcode scanner to a raspberry pi which communicated with the app via sockets...but I doubt you want to do all that lol — Matt Aft, Mar 09 '18 at 19:29
omg I have to ship this functionality to production in 2 days, that wouldn't cut it haha — Lucas Bernardo, Mar 09 '18 at 19:31
@MattAft unfortunately this won't do it. It's able to detect keyboard events succesfully, but doesn't capture the value of the input. it does output the keyCode for the keyboard input, but it gives me keyCode = 0 when I scan something. So this won't do it either... :( — Lucas Bernardo, Mar 12 '18 at 13:35

Lucas Bernardo · Accepted Answer · 2018-08-29T12:57:34.650

8

Okay everyone, found a way to do this without going way too crazy. It's not the most elegant solution, but it does exactly what I need and doesn't add too much to the 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'll be using https://www.npmjs.com/package/react-native-keyevent as suggested by @MattAft to listen for key presses (unfortunately this package wont give me the actual scanner input. It will, however, trigger the keyDown event) to focus the TextInput when the scanner reads something.

UPDATE A coworker helped me a bit with this a few days ago when we had some time to refactor this component, and we found out there is a listener called onKeyMultipleListener on the react-native-keyevent package which not only listens for multiple simultaneous keyPresses but also captures the entire input, which is exactly what we needed here.

edited Aug 29 '18 at 12:57

answered Mar 12 '18 at 17:47

Lucas Bernardo

519
1
4
13

3

To anyone else. 'react-native-keyevent' doesn't work for iOS. – Oliver Dixon Jul 10 '18 at 08:40
1

Hi @Lucas Bernardo! When the onKeyMultipleListener event is fired? Only keyup and keydown works for me! – Geovani Anholete Aug 30 '18 at 20:29
hey @lucas-bernardo, in RN documentation it says that [`Keyboard.dismiss()`](https://facebook.github.io/react-native/docs/keyboard#dismiss) removes focus on TextInput. How do you keep focus on `TextInput` component? Don't you need to have a focused `TextInput` to listen key events? – milkersarac Oct 18 '18 at 16:42
Same, I can only track keyup and keydown by using react-native-keyevent library. Thanks by the way, I achieve what I want by using keydown. My flow is: scan barcode -> library capture the keycode input -> convert keycode to character -> do some logic with the result. – aLIEz Feb 11 '19 at 06:52

score 3 · Answer 2 · answered Mar 09 '18 at 18:40

I know react-native has a keyboard module to control keyboard events

The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing 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}
      />
    );
  }
}

Thanks for the answer! Yes, I'm aware. Unfortunately it seems th Keyboard listener only listens to mounting, unmounting, and dimension changes to the actual Keyboard component. So there's no way to check for a key press event or anything I could use to trigger a value change listener — Lucas Bernardo, Mar 09 '18 at 19:06
Well yes, but it really is just a text input. (is there a way to format this as a code snippet?) console.log('v: ', v))} /> — Lucas Bernardo, Mar 09 '18 at 19:10

How do I listen to keyboard input in React Native

2 Answers2

Linked