React Native module for listen global key event
npm install react-native-global-keyevent
> React Native module for listen global key event
``js
import GlobalKeyEvent from 'react-native-global-keyevent'
GlobalKeyEvent.addKeyDownListener((evt) => {
console.log('---key down---')
console.log('code:', evt.keyCode)
console.log('key:', evt.pressedKey)
console.log('flag shift:', evt.shift)
})
GlobalKeyEvent.addKeyUpListener((evt) => {
console.log('---key up---')
console.log('code:', evt.keyCode)
console.log('key:', evt.pressedKey)
console.log('flag shift:', evt.shift)
})
`
- Add dependency with yarn add react-native-global-keyeventreact-native link react-native-global-keyevent
- You may need to run or autolinking.
This module required to replace root view controller:
`patch
--- AppDelegate.m 2022-02-09 07:32:28.000000000 +0800
+++ AppDelegate.m 2022-02-09 07:31:53.000000000 +0800
@@ -3,6 +3,7 @@
#import
#import
#import
+#import "RNGlobalKeyEventViewController.h"
#ifdef FB_SONARKIT_ENABLED
#import
@@ -43,7 +44,7 @@
}
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
- UIViewController *rootViewController = [UIViewController new];
+ UIViewController *rootViewController = [RNGlobalKeyEventViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
`
If you have own custom root view controller, you can follow ios/RNGlobalKeyEventViewController.m.
It's also supported iOS / tvOS version less than 13.4, but it only supports keyUp event.
This module required to listen key event on MainActivity:
`patch`
--- MainActivity.java 2022-02-03 09:01:32.000000000 +0800
+++ MainActivity.java 2022-02-03 09:01:32.000000000 +0800
@@ -1,6 +1,8 @@
package com.example;
import com.facebook.react.ReactActivity;
+import android.view.KeyEvent;
+import com.globalkeyevent.GlobalKeyEventModule;
public class MainActivity extends ReactActivity {
@@ -12,4 +14,18 @@
protected String getMainComponentName() {
return "example";
}
+
+ @Override
+ public boolean onKeyDown(int keyCode, KeyEvent event) {
+ GlobalKeyEventModule instance = GlobalKeyEventModule.getInstance();
+ if (instance != null) instance.onKeyDownEvent(keyCode, event);
+ return super.onKeyDown(keyCode, event);
+ }
+
+ @Override
+ public boolean onKeyUp(int keyCode, KeyEvent event) {
+ GlobalKeyEventModule instance = GlobalKeyEventModule.getInstance();
+ if (instance != null) instance.onKeyUpEvent(keyCode, event);
+ return super.onKeyUp(keyCode, event);
+ }
}
- GlobalKeyEvent.addKeyDownListener((event: GlobalKeyEvent) => {}): EmitterSubscriptionGlobalKeyEvent.addKeyUpListener((event: GlobalKeyEvent) => {}): EmitterSubscription
-
- EmitterSubscription reference
`flow`
type GlobalKeyEvent = {
pressedKey: string,
keyCode: number,
shift: boolean,
control: boolean,
alt: boolean,
meta: boolean,
capsLock: boolean,
fn: boolean,
numericPad: boolean,
}
#### GlobalKeyEvent
| Prop | Type | Note |
| ------------- | ------------| ------------------------------------ |
| pressedKey | String | Pressed key |keyCode
| | Number | [Not supported on iOS] Key code |shift
| | Boolean | Is Shift key hold? |control
| | Boolean | Is Ctrl (iOS: Control) key hold? |alt
| | Boolean | Is Alt (iOS: Option) key hold? |meta
| | Boolean | Is META (iOS: Command) key hold? |capsLock
| | Boolean | Is Caps Lock enabled? |fn
| | Boolean | [Android only] Is Fn key hold? |numericPad
| | Boolean | [iOS only] Is user pressed a key located on the numeric keypad? |
- react-native-keyevent` used to be our solution before this.
---
Built and maintained by BRICKS.