CODEWITHSUNDEEP
javascriptandroidmobileexpo
holydragon
holydragon

Reputation: 6728

How to integrate React Native KeyEvent with Expo?

I am looking for a way to get input data from device's hardware barcode scanner. I found a library that reportedly can get the job done, which is React Native KeyEvent.

However, the instructions mostly lead me to edit the gradle files inside android folder. Since I am using Expo, I do not have the android folder to follow the document.

Without Ejecting to ExpoKit, is there any other way to integrate them?

Upvotes: 1

Views: 1672

Answers (4)

tealow
tealow

Reputation: 71

The plugins posted above don't seem to work anymore with expo 52. Instead of debugging the unmaintained projects I decided to write a proper module that supports iOS, Android and also Web.

It works with Expo 52 and new achitecture. Let me know what you think about it.

https://github.com/tlow92/expo-key-event

Upvotes: 1

ahmed bilal
ahmed bilal

Reputation: 21

Accepted Answer no longer works on latest Expo 50 and 51

The plugin mentioned in the answer: react-native-keyevent-expo-config-plugin

This plugin hasn't been updated to support Expo SDK 50 and 51 However there is a fork of it that works https://github.com/bamlab/react-native-keyevent-expo-config-plugin

You can also add it using npm as

npm i react-native-keyevent

and then for plugin

npm install --save-dev @bam.tech/react-native-keyevent
-expo-config-plugin

and then in App.json

"plugins": [
      "<Your other plugins>..",
      "@bam.tech/react-native-keyevent-expo-config-plugin"
    ],

Upvotes: 2

Alan
Alan

Reputation: 56

I managed to get the plugin working....but it was a challenge. Here are the steps (for some reason, I had to use 'yarn'. 'npm' didn't work):

 yarn add react-native-keyevent
 yarn add --dev react-native-keyevent-expo-config-plugin

Add the following line to app.json file in the "expo" section:

 "plugins": ["react-native-keyevent-expo-config-plugin"],

Edit your component to import the package:

 import KeyEvent from "react-native-keyevent";

Set listeners:

 KeyEvent.onKeyDownListener((keyEvent) => {....}

Don't forget to remove listeners when your component unmounts:

 KeyEvent.removeKeyDownListener();

Now here's the tricky part - it won't work with Expo Go. You can still run your app in Expo Go, but your app won't pick up keystrokes on the external keyboard. So, to test it, you need to actually build your app and then install it on a device.

Also, I only managed to get it working on Android. I don't need it to work on iOS, so didn't spend any time on it. Therefore, I'm not sure if it's possible to get it working on iOS.

Upvotes: 3

FWD
FWD

Reputation: 21

You would need to write an expo plugin for it. Fortunately, somebody seems to already have done just that. See:

expo plugin for react-native-keyevent

Upvotes: 1

Related Questions