Expo-key-event

Interface for reading key events from external devices such as Bluetooth keyboards/gamepads.
Getting started · Report Bug

iOS

Android

Web

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>
  );
}

Run example app

cd example

npm run ios / npm run android / npm run web

Troubleshooting

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