https://github.com/mybigday/react-native-global-keyevent
React Native module for listen global key event
https://github.com/mybigday/react-native-global-keyevent
Last synced: 2 months ago
JSON representation
React Native module for listen global key event
- Host: GitHub
- URL: https://github.com/mybigday/react-native-global-keyevent
- Owner: mybigday
- License: mit
- Created: 2022-02-04T02:24:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-10T18:45:00.000Z (8 months ago)
- Last Synced: 2025-03-23T09:48:33.025Z (3 months ago)
- Language: Objective-C
- Size: 801 KB
- Stars: 6
- Watchers: 5
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://github.com/mybigday/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](example/App.js)
## Installation
- Add dependency with `yarn add react-native-global-keyevent`
- You may need to run `react-native link react-native-global-keyevent` or autolinking.
### iOS / tvOS
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`](ios/RNGlobalKeyEventViewController.m).
It's also supported iOS / tvOS version less than 13.4, but it only supports `keyUp` event.
### Android
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](https://github.com/facebook/react-native/blob/8bd3edec88148d0ab1f225d2119435681fbbba33/Libraries/vendor/emitter/_EmitterSubscription.js)
```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`](https://github.com/kevinejohn/react-native-keyevent) used to be our solution before this.
## License
[MIT](LICENSE.md)
---
Built and maintained by BRICKS.