expo-key-event v1.2.0

Requirements

Expo SDK >= 52

Getting started

npm i expo-key-event

Usage

Automatic listening: Key events are listened to as soon as MyComponent is mounted.

import { useKeyEvent } from "expo-key-event";
import { Text } from "react-native";

export function MyComponent() {
  const { keyEvent } = useKeyEvent();

  return <Text>{keyEvent?.key}</Text>;
}

Manual listening: Key events are listened to when startListening is called.

import { useKeyEvent } from "expo-key-event";
import { Text, View } from "react-native";

export function MyComponent() {
  const { keyEvent, startListening, stopListening } = useKeyEvent(false);

  return (
    <View>
      <Text>{keyEvent?.key}</Text>
      <Button title="Start listening" onPress={() => startListening()} />
      <Button title="Stop listening" onPress={() => stopListening()} />
    </View>
  );
}

Handling state yourself: If you want to handle the state yourself or don't need the state at all, you can use the useKeyEventListener hook instead of the useKeyEvent hook.

import { KeyPressEvent, useKeyEventListener } from "expo-key-event";
import { Text, View } from "react-native";

export function MyComponent() {
  const [keyEvent, setKeyEvent] = useState<KeyPressEvent>();
  const { startListening, stopListening } = useKeyEventListener((event) => {
    setKeyEvent(event);
  }, automaticControl);

  return (
    <View>
      <Text>{keyEvent?.key}</Text>
      <Button title="Start listening" onPress={() => startListening()} />
      <Button title="Stop listening" onPress={() => stopListening()} />
    </View>
  );
}

Run example app

cd example

npm run ios / npm run android / npm run web

Troubleshooting

_expo.useEvent is not a function

This is most likely due to using Expo SDK lower than 52. useEvent was introduced in SDK 52.

Error: Cannot find native module 'ExpoKeyEvent'

Make sure to use a development build and not Expo Go. See https://docs.expo.dev/guides/local-app-development/ for more details.

In short: Use npx expo run:ios instead of npx expo start (make sure bundleIdentifier is set in app.json).

Key events are not registered in iOS simulator

Make sure that hardware keyboard is connected to the simulator.

Key events are not registered in Android emulator

Since the Android emulator does not support USB or Bluetooth, you need to use a physical device so that key events can be registered.

Another option is to use adb to send key events to the emulator.

e.g. adb shell input keyevent 10

How it works

This module translates the Apple UIKit and Android KeyEvent constants to a common set of key event types matching the ones from Web.

Todo

• Implement modifier key combinations similar to web like altKey, ctrlKey, metaKey, shiftKey