2

How do I get the key pressed in React Native (other than having the user click a text box)? onKeyPress and onKeyDown gives a type error when being added to the <View> component.

I have also seen this answer, but it requires a 3rd party package. I imagine React Native apps support keyboard input for accessibility purposes.

The following code does not work

import { View } from 'react-native'
<View onKeyDown={handleKeyDown}>my app</View>

This gives the following error:

Property 'onKeyDown' does not exist on type 'IntrinsicAttributes & InterfaceViewProps & RefAttributes<unknown>'

window.addEventListener('keydown') also does not work for android or IOS which makes sense given there is no browser.

EDIT I am trying to listen for ANY keyboard input from the user at any time when using the app. Ex: User presses 'f' randomly when using the app to trigger a blind-friendly feature, without clicking or seeing anything.

Logan Cundiff
  • 479
  • 8
  • 13
  • 1
    Can you show your code? – Joel Hager Jun 17 '22 at 20:50
  • 1
    Please see [ask]. You need to show the code you referred to in your post. – isherwood Jun 17 '22 at 21:06
  • @JoelHager I went and added some code, but I don't know what code to reference since it is a general question of how to get keyboard input within React Native. Any mechanism would be fine as long as it works within the all Native environments – Logan Cundiff Jun 17 '22 at 21:37

5 Answers5

1

Well, it's not the most elegant way, but it does exactly as you want:

import { Keyboard, TextInput } from 'react-native';

<TextInput autoFocus onFocus={() => Keyboard.dismiss()} />

The keyboard key event listener will get key presses now without showing the keyboard. Hope this helps.

Alireza Nazari
  • 193
  • 1
  • 10
  • Tried this along with adding onKeyPress and when Keyboard.dismiss() is called, it no longer collects user keyboard input :/ If I don't dismiss it, the web version will continue to get keyboard events until the user clicks somewhere. – Logan Cundiff Jun 20 '22 at 13:42
1

If you are looking for physical keyboard handling, there are no physical Keyboard key press handling functionality so far.

You can try 3rd party libraries, for example mine: https://www.npmjs.com/package/react-native-external-keyboard

 import {ExternalKeyboardView} from 'react-native-external-keyboard';
  <ExternalKeyboardView
    onKeyDownPress={onKeyDownHandler}
    onKeyUpPress={onKeyUpHandler}
    canBeFocused
  >
Artur Kalach
  • 36
  • 2
0

you need to use a TextInput component to handle this kind of event. You can find the API here: https://reactnative.dev/docs/textinput.

Bear in mind that react library is built as an API so it can take advantage of different renders. But the issue is that when using the mobile native renderer you will not have the DOM properties you would have on a web view, it is way different.

Toni Bardina Comas
  • 1,670
  • 1
  • 5
  • 15
  • That requires the user clicking the textInput first correct? Is there no other way to get the keyboard input? – Logan Cundiff Jun 17 '22 at 21:55
  • You cannot by default. Maybe you can try to find some library but I think that you can solve your issue by reformulating it. What do you want to achieve with this event handling? – Toni Bardina Comas Jun 17 '22 at 21:59
  • It's for accessibility for the web version of the app. A blind user can type certain letters to trigger an event that would usually require dragging and dropping. – Logan Cundiff Jun 17 '22 at 22:04
  • Id recommend you to keep web and app separated, Its is true that you can create a web version of your react native app but it will be super limited and it will not let you do many things like the one you want to do, – Toni Bardina Comas Jun 17 '22 at 22:16
  • yea I'm starting to realize that react-native isn't as much of a trinity app as I thought, but I would think web version would be easiest to support since it's in Javascript already. Is there was a way to use `window` ONLY when compiling for web? Android/IOS would ignore it? – Logan Cundiff Jun 20 '22 at 13:10
0

I am not sure about the View component, but for TextInput this might work!

<TextInput
    onKeyPress={handleKeyDown}
    placeholder="Sample Text"
/>

and for function part:

const handleKeyDown = (e) => {
    if(e.nativeEvent.key == "Enter"){
        dismissKeyboard();
    }
}
Naman Barkiya
  • 159
  • 1
  • 4
-2

First, you add onKeyDown={keyDownHandler} to a React element. This will trigger your keyDownHandler function each time a key is pressed. Ex:

<div className='example-class' onKeyDown={keyDownHandler}>

You can set up your function like this:

const keyDownHandler = (
    event: React.KeyboardEvent<HTMLDivElement>
) => {
        if (event.code === 'ArrowDown') {
            // do something
        } else if (event.code === 'A') {
            // do something
        }
}
Micah Katz
  • 140
  • 5