{"id":21854970,"url":"https://github.com/wix-incubator/react-native-keyboard-input","last_synced_at":"2025-05-16T18:07:08.691Z","repository":{"id":37734248,"uuid":"76446476","full_name":"wix-incubator/react-native-keyboard-input","owner":"wix-incubator","description":"Use your own custom input component instead of the system keyboard","archived":false,"fork":false,"pushed_at":"2023-07-18T20:22:33.000Z","size":8814,"stargazers_count":824,"open_issues_count":79,"forks_count":151,"subscribers_count":278,"default_branch":"master","last_synced_at":"2025-05-16T18:07:05.761Z","etag":null,"topics":["android","inputaccessoryview","ios","keyboard","keyboard-component","keyboard-input","react-native"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","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/wix-incubator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-12-14T09:49:51.000Z","updated_at":"2025-04-22T10:22:25.000Z","dependencies_parsed_at":"2024-06-18T14:03:04.440Z","dependency_job_id":"b5e18e86-c117-4f97-b4e1-cc8d9b4cbe54","html_url":"https://github.com/wix-incubator/react-native-keyboard-input","commit_stats":null,"previous_names":["wix/react-native-keyboard-input","wix/react-native-custom-input-controller"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-native-keyboard-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-native-keyboard-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-native-keyboard-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-native-keyboard-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wix-incubator","download_url":"https://codeload.github.com/wix-incubator/react-native-keyboard-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582907,"owners_count":22095518,"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","inputaccessoryview","ios","keyboard","keyboard-component","keyboard-input","react-native"],"created_at":"2024-11-28T02:12:44.437Z","updated_at":"2025-05-16T18:07:08.667Z","avatar_url":"https://github.com/wix-incubator.png","language":"Objective-C","funding_links":[],"categories":["Objective-C"],"sub_categories":[],"readme":"# Important: deprecation alert\nThis library is being deprecated and the repository will not be maintaned, the components have moved to our UI library - please start migrating to [RN-UILib](https://github.com/wix/react-native-ui-lib/).    \nIf you want to try out our excelent (and constantly improving) UI compoenent library, please use:  \n```\nimport {Keyboard} from 'react-native-ui-lib';\nconst KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;\n```\nIf you don't want to import the whole library, you can use only the `keyboard` package:  \n```\nimport {KeyboardAccessoryView} from 'react-native-ui-lib/keyboard';\n```\n\n# React Native Keyboard Input\n\nPresents a React component as an input view which replaces the system keyboard. Can be used for creating custom input views such as an image gallery, stickers, etc.\n\nSupports both iOS and Android.\n\n\u003cimg src=\"Supplementals/example2.gif\" width=300/\u003e   \u003cimg style=\"width:300px\" src=\"Supplementals/example-android.gif\" width=300/\u003e\n\n# Installation\nInstall the package from npm:\n\n`yarn add react-native-keyboard-input` or `npm i --save react-native-keyboard-input`\n\n## Android\n\nUpdate your dependencies in `android/app/build.gradle`:\n\n```gradle\ndependencies {\n  // Add this dependency:\n  compile project(\":reactnativekeyboardinput\")\n}\n```\n\nUpdate your `android/settings.gradle`:\n\n```gradle\ninclude ':reactnativekeyboardinput'\nproject(':reactnativekeyboardinput').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keyboard-input/lib/android')\n```\n\nIn your `MainApplication.java`, add to the `getPackages()` list:\n\n```java\nimport com.wix.reactnativekeyboardinput.KeyboardInputPackage;\n\n@Override\nprotected List\u003cReactPackage\u003e getPackages() {\n  return Arrays.\u003cReactPackage\u003easList(\n      // Add this package:\n      new KeyboardInputPackage(this) // (this = Android application object)\n    );\n}\n```\n\n### ProGuard\n\nIf you have pro-guard enabled and are having trouble with your build, apply this to your project's main `proguard-rules.pro`:\n\n```\n-dontwarn com.wix.reactnativekeyboardinput.**\n```\n\n## iOS\nIn Xcode, drag both `RCTCustomInputController.xcodeproj` and `KeyboardTrackingView.xcodeproj` from your `node_modules` to the Libraries folder in the Project Navigator, then add `libRCTCustomInputController.a` and `libKeyboardTrackingView.a` to your app target \"Linked Frameworks and Libraries\".\n\n#### Covering the whold keyboard in predictive mode\nTo utilize this feature you'll need to add `KeyboardTrackingView` to your projects scheme build action.\n\nFrom Xcode menu:\n \n 1. `product -\u003e scheme -\u003e manage schemes -\u003e double-click your project`\n 2. Slect build at the right menu, click the + icon at the bottom of the targets list and select `KeyboardTrackingView`.\n 3. Drag and position `KeyboardTrackingView` to be first, above your project, and unmark \"Parallelize Build\" option at the top.\n\nIf necessary, you can take a look at how it is set-up in the demo project.\n\n\n# Usage\n\nThere are 2 main parts necessary for the implementation:\n\n## 1. A keyboard component\nCreate a component that you wish to use as a keyboard input. For example:\n\n```js\nclass KeyboardView extends Component {\n  static propTypes = {\n    title: PropTypes.string,\n  };\n  render() {\n    return (\n      \u003cScrollView contentContainerStyle={[styles.keyboardContainer, {backgroundColor: 'purple'}]}\u003e\n        \u003cText style={{color: 'white'}}\u003eHELOOOO!!!\u003c/Text\u003e\n        \u003cText style={{color: 'white'}}\u003e{this.props.title}\u003c/Text\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n```\n\nNow register with the keyboard registry so it can be used later as a keyboard:\n\n```js\nimport {KeyboardRegistry} from 'react-native-keyboard-input';\n\nKeyboardRegistry.registerKeyboard('MyKeyboardView', () =\u003e KeyboardView);\n```\n\nWhen you need to notify about selecting an item in the keyboard, use:\n\n```js\nKeyboardRegistry.onItemSelected(`MyKeyboardView`, params);\n```\n\n## 2. Using the keyboard component as an input view\nWhile this package provides several component and classes for low-level control over custom keyboard inputs, the easiets way would be to use `KeyboardAccessoryView`. It's the only thing you'll need to show your Keyboard component as a custom input. For example:\n\n```js\n\u003cKeyboardAccessoryView\n  renderContent={this.keyboardToolbarContent}\n  kbInputRef={this.textInputRef}\n  kbComponent={this.state.customKeyboard.component}\n  kbInitialProp={this.state.customKeyboard.initialProps}\n/\u003e\n```\n\n| Prop | Type | Description |\n| ---- | ---- | ----------- |\n| renderContent | Function | a fucntion for rendering the content of the keyboard toolbar |\n| kbInputRef | Object | A ref to the input component which triggers the showing of the keyboard |\n| kbComponent | String | The registered component name |\n| kbInitialProps | Object | Initial props to pass to the registered keyboard component |\n| onItemSelected | Function | a callback function for a selection of an item in the keyboard component |\n\nThis component takes care of making your toolbar (which is rendered via `renderContent `) \"float\" above the keyboard (necessary for iOS), and for setting your component as the keyboard input when the `kbComponent` changes.\n\n# Demo\n\nSee [demoScreen.js](https://github.com/wix/react-native-keyboard-input/blob/master/demo/demoScreen.js) for a full working example.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Freact-native-keyboard-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwix-incubator%2Freact-native-keyboard-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Freact-native-keyboard-input/lists"}