{"id":18486685,"url":"https://github.com/kevinejohn/react-native-keyevent","last_synced_at":"2025-04-15T11:41:23.707Z","repository":{"id":41394720,"uuid":"65850778","full_name":"kevinejohn/react-native-keyevent","owner":"kevinejohn","description":"Capture external keyboard keys or remote control button events","archived":false,"fork":false,"pushed_at":"2024-04-05T19:02:22.000Z","size":492,"stargazers_count":212,"open_issues_count":55,"forks_count":97,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-07T20:51:22.010Z","etag":null,"topics":["android","javascript","keyevent","react","react-native"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kevinejohn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-16T20:19:45.000Z","updated_at":"2025-03-30T00:43:01.000Z","dependencies_parsed_at":"2023-02-08T14:30:55.700Z","dependency_job_id":"55ed5ccc-584a-42e9-bb58-f09cafc9507c","html_url":"https://github.com/kevinejohn/react-native-keyevent","commit_stats":{"total_commits":64,"total_committers":19,"mean_commits":"3.3684210526315788","dds":0.546875,"last_synced_commit":"df49acc1bb5490ccebea323b20a301665fc092fb"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinejohn%2Freact-native-keyevent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinejohn%2Freact-native-keyevent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinejohn%2Freact-native-keyevent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinejohn%2Freact-native-keyevent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevinejohn","download_url":"https://codeload.github.com/kevinejohn/react-native-keyevent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249063176,"owners_count":21206845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","javascript","keyevent","react","react-native"],"created_at":"2024-11-06T12:49:44.004Z","updated_at":"2025-04-15T11:41:23.688Z","avatar_url":"https://github.com/kevinejohn.png","language":"Java","funding_links":[],"categories":["Java"],"sub_categories":[],"readme":"# React Native KeyEvent\n\n[![npm version](https://badge.fury.io/js/react-native-keyevent.svg)](http://badge.fury.io/js/react-native-keyevent)\n\nCapture external keyboard keys or remote control button events\n\n[Learn about Android KeyEvent here](https://developer.android.com/reference/android/view/KeyEvent.html).\n\n\n### Installation\n\n#### via npm\n\nRun `npm install react-native-keyevent --save`\n\n#### via yarn\n\nRun `yarn add react-native-keyevent`\n\n### Linking\n\n#### Android:\n\n`react-native link react-native-keyevent` (for React Native \u003c= 0.59 only)\n\n#### iOS: \n\n `pod install`  inside your `ios` folder.\n\n\u003e Note: You still must manually register module in MainActivity! (Instructions below under Configuration Android)\n\n\n#### Linking Manually\n\n**Android**\n\n1. In `android/setting.gradle`\n\n    ```\n    ...\n    include ':react-native-keyevent'\n    project(':react-native-keyevent').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keyevent/android')\n    ```\n\n2. In `android/app/build.gradle`\n\n    ```\n    ...\n    dependencies {\n        ...\n        compile project(':react-native-keyevent')\n    }\n    ```\n\n3. Register module (in MainApplication.java)\n\n    ```\n    import com.github.kevinejohn.keyevent.KeyEventPackage;  // \u003c--- import\n\n    public class MainApplication extends Application implements ReactApplication {\n      ......\n\n      @Override\n      protected List\u003cReactPackage\u003e getPackages() {\n          return Arrays.\u003cReactPackage\u003easList(\n              new MainReactPackage(),\n              new KeyEventPackage()      \u003c------- Add this\n          );\n      }\n\n      ......\n\n    }\n    ```\n\n**iOS**\n\nFollow the instrutions listed here: [Manually Linking iOS](https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking).\n\n### Configuration\n\n#### Android\n\nImplement onConfigurationChanged method in MainActivity.java\n\n```\n    import android.view.KeyEvent; // \u003c--- import\n    import com.github.kevinejohn.keyevent.KeyEventModule; // \u003c--- import\n\n\n    public class MainActivity extends ReactActivity {\n      ......\n      @Override  // \u003c--- Add this method if you want to react to keyDown\n      public boolean onKeyDown(int keyCode, KeyEvent event) {\n\n        // A. Prevent multiple events on long button press\n        //    In the default behavior multiple events are fired if a button\n        //    is pressed for a while. You can prevent this behavior if you\n        //    forward only the first event:\n        //        if (event.getRepeatCount() == 0) {\n        //            KeyEventModule.getInstance().onKeyDownEvent(keyCode, event);\n        //        }\n        //\n        // B. If multiple Events shall be fired when the button is pressed\n        //    for a while use this code:\n        //        KeyEventModule.getInstance().onKeyDownEvent(keyCode, event);\n        //\n        // Using B.\n        KeyEventModule.getInstance().onKeyDownEvent(keyCode, event);\n\n        // There are 2 ways this can be done:\n        //  1.  Override the default keyboard event behavior\n        //    super.onKeyDown(keyCode, event);\n        //    return true;\n\n        //  2.  Keep default keyboard event behavior\n        //    return super.onKeyDown(keyCode, event);\n\n        // Using method #1 without blocking multiple\n        super.onKeyDown(keyCode, event);\n        return true;\n      }\n\n      @Override  // \u003c--- Add this method if you want to react to keyUp\n      public boolean onKeyUp(int keyCode, KeyEvent event) {\n        KeyEventModule.getInstance().onKeyUpEvent(keyCode, event);\n\n        // There are 2 ways this can be done:\n        //  1.  Override the default keyboard event behavior\n        //    super.onKeyUp(keyCode, event);\n        //    return true;\n\n        //  2.  Keep default keyboard event behavior\n        //    return super.onKeyUp(keyCode, event);\n\n        // Using method #1\n        super.onKeyUp(keyCode, event);\n        return true;\n      }\n\n      @Override\n      public boolean onKeyMultiple(int keyCode, int repeatCount, KeyEvent event) {\n          KeyEventModule.getInstance().onKeyMultipleEvent(keyCode, repeatCount, event);\n          return super.onKeyMultiple(keyCode, repeatCount, event);\n      }\n      ......\n\n    }\n```\n\n#### iOS\n\nThis will need to be added in your `AppDelegate.m` file:\n\n```objc\n// react-native-keyevent\n#import \u003cRNKeyEvent.h\u003e  // import our package after linking\n\n@implementation AppDelegate\n\n//....\n\n/*!\n * react-native-keyevent support\n */\nRNKeyEvent *keyEvent = nil;\n\n- (NSMutableArray\u003cUIKeyCommand *\u003e *)keyCommands {\n  NSMutableArray *keys = [NSMutableArray new];\n  \n  if (keyEvent == nil) {\n    keyEvent = [[RNKeyEvent alloc] init];\n  }\n  \n  if ([keyEvent isListening]) {\n    NSArray *namesArray = [[keyEvent getKeys] componentsSeparatedByString:@\",\"];\n    \n    NSCharacterSet *validChars = [NSCharacterSet characterSetWithCharactersInString:@\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"];\n    \n    for (NSString* names in namesArray) {\n      NSRange  range = [names rangeOfCharacterFromSet:validChars];\n      \n      if (NSNotFound != range.location) {\n        [keys addObject: [UIKeyCommand keyCommandWithInput:names modifierFlags:UIKeyModifierShift action:@selector(keyInput:)]];\n      } else {\n        [keys addObject: [UIKeyCommand keyCommandWithInput:names modifierFlags:0 action:@selector(keyInput:)]];\n      }\n    }\n  }\n  \n  return keys;\n}\n\n- (void)keyInput:(UIKeyCommand *)sender {\n  NSString *selected = sender.input;\n  [keyEvent sendKeyEvent:selected];\n}\n\n@end\n```\n\n## Usage\n\nWhenever you want to use it within React Native code now you can:\n\n`import KeyEvent from 'react-native-keyevent';`\n\n```javascript\n  componentDidMount() {\n    // if you want to react to keyDown\n    KeyEvent.onKeyDownListener((keyEvent) =\u003e {\n      console.log(`onKeyDown keyCode: ${keyEvent.keyCode}`);\n      console.log(`Action: ${keyEvent.action}`);\n      console.log(`Key: ${keyEvent.pressedKey}`);\n    });\n\n    // if you want to react to keyUp\n    KeyEvent.onKeyUpListener((keyEvent) =\u003e {\n      console.log(`onKeyUp keyCode: ${keyEvent.keyCode}`);\n      console.log(`Action: ${keyEvent.action}`);\n      console.log(`Key: ${keyEvent.pressedKey}`);\n    });\n\n    // if you want to react to keyMultiple\n    KeyEvent.onKeyMultipleListener((keyEvent) =\u003e {\n      console.log(`onKeyMultiple keyCode: ${keyEvent.keyCode}`);\n      console.log(`Action: ${keyEvent.action}`);\n      console.log(`Characters: ${keyEvent.characters}`);\n    });\n  }\n\n  componentWillUnmount() {\n    // if you are listening to keyDown\n    KeyEvent.removeKeyDownListener();\n\n     // if you are listening to keyUp\n    KeyEvent.removeKeyUpListener();\n\n     // if you are listening to keyMultiple\n    KeyEvent.removeKeyMultipleListener();\n  }\n```\n\n## TODOS\n\n- [x] iOS Support\n- [ ] Add iOS Support for keyDown and multipleKeys\n- [ ] Implement `keyCode` and `action` on iOS\n- [x] Support for TypeScript projects\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinejohn%2Freact-native-keyevent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinejohn%2Freact-native-keyevent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinejohn%2Freact-native-keyevent/lists"}