react-native-global-keyevent


> React Native module for listen global key event

Introdution

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

Example

Installation

- Add dependency with yarn add react-native-global-keyevent
- You may need to run react-native link react-native-global-keyevent or autolinking.

$3

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.

$3

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

Usage

- GlobalKeyEvent.addKeyDownListener((event: GlobalKeyEvent) => {}): EmitterSubscription
- GlobalKeyEvent.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? |

Credits

- react-native-keyevent` used to be our solution before this.

License

MIT

---

Built and maintained by BRICKS.