Search code examples
reactjsreact-nativeaccessibilitykeyboard-events

How can I get user keypress in React Native?


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.


Solution

  • 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
      >