{"id":20160578,"url":"https://github.com/reactnativecn/react-native-custom-keyboard","last_synced_at":"2025-07-28T18:06:54.144Z","repository":{"id":57169034,"uuid":"79935891","full_name":"reactnativecn/react-native-custom-keyboard","owner":"reactnativecn","description":null,"archived":false,"fork":false,"pushed_at":"2018-05-22T09:28:47.000Z","size":13,"stargazers_count":96,"open_issues_count":22,"forks_count":45,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-10T00:10:31.235Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactnativecn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-24T17:33:48.000Z","updated_at":"2024-07-01T21:37:13.000Z","dependencies_parsed_at":"2022-09-13T08:51:42.406Z","dependency_job_id":null,"html_url":"https://github.com/reactnativecn/react-native-custom-keyboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactnativecn%2Freact-native-custom-keyboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactnativecn%2Freact-native-custom-keyboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactnativecn%2Freact-native-custom-keyboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactnativecn%2Freact-native-custom-keyboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactnativecn","download_url":"https://codeload.github.com/reactnativecn/react-native-custom-keyboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131317,"owners_count":21052819,"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":[],"created_at":"2024-11-14T00:14:47.428Z","updated_at":"2025-04-10T00:10:33.213Z","avatar_url":"https://github.com/reactnativecn.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-native-custom-keyboard\n\n## Getting started\n\n`$ npm install react-native-custom-keyboard --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-custom-keyboard`\n\n### Manual installation\n\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-custom-keyboard` and add `RNCustomKeyboard.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNCustomKeyboard.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\u003c\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n  - Add `import cn.reactnative.customkeyboard.RNCustomKeyboardPackage;` to the imports at the top of the file\n  - Add `new RNCustomKeyboardPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-custom-keyboard'\n  \tproject(':react-native-custom-keyboard').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-custom-keyboard/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n      compile project(':react-native-custom-keyboard')\n  \t```\n\n\n## Usage\n\nRegister a component as custom keyboard: \n\n```javascript\nimport React, { Component } from 'react';\nimport {\n  TouchableOpacity,\n  Text,\n  View,\n} from 'react-native';\nimport { register, insertText } from 'react-native-custom-keyboard';\n\nclass MyKeyboard extends Component {\n  onPress = () =\u003e {\n    insertText(this.props.tag, 'Hello, world');\n  };\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cTouchableOpacity onPress={this.onPress}\u003e\n          \u003cText\u003eHello, world\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nregister('hello', () =\u003e MyKeyboard);\n```\n\nUse `CustomTextInput` instead of `TextInput`.\n\n```javascript\nimport React, { Component } from 'react';\nimport {CustomTextInput} from 'react-native-custom-keyboard';\n\nclass MyPage extends Component {\n  state = {\n    value: '';\n  };\n  onChangeText = text =\u003e {\n    this.setState({value: text});\n  };\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cCustomTextInput customKeyboardType=\"hello\" value={this.state.value} onChangeText={this.onChangeText} /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n## API\n\n### register(type, type)\n\nRegister a custom keyboard type.\n\n### install(tag, type)\n\nInstall custom keyboard to a `TextInput`.\n\nGenerally you can use CustomTextInput instead of this. But you can use this API\nto install/change custom keyboard dynamically.\n\n### uninstall(tag)\n\nUninstall custom keyboard from a `TextInput` dynamically.\n\n### insertText(tag, text)\n\nUse in a custom keyboard, insert text to `TextInput`.\n\n### backSpace(tag)\n\nUse in a custom keyboard, delete selected text or the charactor before cursor.\n\n### doDelete(tag)\n\nUse in a custom keyboard, delete selected text or the charactor after cursor.\n\n### moveLeft(tag)\n\nUse in a custom keyboard, move cursor to selection start or move cursor left.\n\n### moveRight(tag)\n\nUse in a custom keyboard, move cursor to selection end or move cursor right.\n\n### switchSystemKeyboard(tag)\n\nUse in a custom keyboard. Switch to system keyboard.\n\nNext time user press or focus on the `TextInput`, custom keyboard will\nappear again. To keep using system keyboard, call `uninstall` instead.\n\n### CustomTextInput\n\nUse instead of `TextInput`, this component support all properties of `TextInput`.\n\n#### prop: customKeyboardType: string\n\nUse a registered custom keyboard.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactnativecn%2Freact-native-custom-keyboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactnativecn%2Freact-native-custom-keyboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactnativecn%2Freact-native-custom-keyboard/lists"}