{"id":15416621,"url":"https://github.com/bunlong/react-native-custom-keyboard-kit","last_synced_at":"2025-04-14T13:12:31.726Z","repository":{"id":41796591,"uuid":"153249430","full_name":"Bunlong/react-native-custom-keyboard-kit","owner":"Bunlong","description":"React Native Custom Keyboard - Use your own custom keyboard instead of the system keyboard with React Native Custom Keyboard Kit. Its working on Android and iOS.","archived":false,"fork":false,"pushed_at":"2022-12-08T19:14:41.000Z","size":693,"stargazers_count":92,"open_issues_count":26,"forks_count":32,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-25T06:08:55.716Z","etag":null,"topics":["android","custom-keyboard","ios","keyboard","keyboard-component","keyboard-input","react-native","react-native-custom-keyboard"],"latest_commit_sha":null,"homepage":"","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/Bunlong.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}},"created_at":"2018-10-16T08:23:30.000Z","updated_at":"2025-03-24T06:49:21.000Z","dependencies_parsed_at":"2023-01-25T17:46:00.315Z","dependency_job_id":null,"html_url":"https://github.com/Bunlong/react-native-custom-keyboard-kit","commit_stats":null,"previous_names":["themodernjavascript/react-native-custom-keyboard-kit"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Freact-native-custom-keyboard-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Freact-native-custom-keyboard-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Freact-native-custom-keyboard-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Freact-native-custom-keyboard-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bunlong","download_url":"https://codeload.github.com/Bunlong/react-native-custom-keyboard-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248886325,"owners_count":21177644,"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","custom-keyboard","ios","keyboard","keyboard-component","keyboard-input","react-native","react-native-custom-keyboard"],"created_at":"2024-10-01T17:12:50.560Z","updated_at":"2025-04-14T13:12:31.685Z","avatar_url":"https://github.com/Bunlong.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-custom-keyboard-kit\n\nReact Native Custom Keyboard - Use your own custom keyboard instead of the system keyboard with React Native Custom Keyboard Kit. [![version](https://img.shields.io/npm/v/react-native-custom-keyboard-kit.svg?style=flat-square)](https://www.npmjs.com/package/react-native-custom-keyboard-kit) [![downloads](https://img.shields.io/npm/dm/react-native-custom-keyboard-kit.svg?style=flat-square)](https://www.npmjs.com/package/react-native-custom-keyboard-kit) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](http://opensource.org/licenses/MIT).\n\n![react-native-custom-keyboard-kit](./react-native-custom-keyboard-kit.png)\n\n## Getting started\n\n`$ npm install react-native-custom-keyboard-kit --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-custom-keyboard-kit`\n\n### Manual installation\n\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainApplication.java`\n  - Add `import com.reactlibrary.RNCustomKeyboardKitPackage;` to the imports at the top of the file\n  - Add `new RNCustomKeyboardKitPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n    ```\n    include ':react-native-custom-keyboard-kit'\n    project(':react-native-custom-keyboard-kit').projectDir = new File(rootProject.projectDir,  '../node_modules/react-native-custom-keyboard-kit/android')\n    ```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n    ```\n    compile project(':react-native-custom-keyboard-kit')\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-kit` and add `RNCustomKeyboardKit.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNCustomKeyboardKit.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\u003c\n\n\n## Usage\n\nRegister a component as a custom keyboard kit:\n\n```\nclass MyKeyboard extends Component {\n  onPress1 = () =\u003e {\n    insertText(this.props.tag, '1');\n  }\n\n  onPress2 = () =\u003e {\n    insertText(this.props.tag, '2');\n  }\n\n  onPress3 = () =\u003e {\n    insertText(this.props.tag, '3');\n  }\n  \n  onPress4 = () =\u003e {\n    insertText(this.props.tag, '4');\n  }\n\n  onPress5 = () =\u003e {\n    insertText(this.props.tag, '5');\n  }\n  \n  onPress6 = () =\u003e {\n    insertText(this.props.tag, '6');\n  }\n\n  onPress7 = () =\u003e {\n    insertText(this.props.tag, '7');\n  }\n\n  onPress8 = () =\u003e {\n    insertText(this.props.tag, '8');\n  }\n\n  onPress9 = () =\u003e {\n    insertText(this.props.tag, '9');\n  }\n  \n  onPressBackSpace = () =\u003e {\n    backSpace(this.props.tag);\n  }\n  \n  onPress0= () =\u003e {\n    insertText(this.props.tag, '0');\n  }\n  \n  onPressHideKeyboard = () =\u003e {\n    hideKeyboard(this.props.tag);\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cView style={{flexDirection: \"row\"}}\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress1}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                1\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress2}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                2\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress3}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                3\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n        \u003cView style={{flexDirection: \"row\"}}\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress4}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                4\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress5}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                5\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress6}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                6\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n        \u003cView style={{flexDirection: \"row\"}}\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress7}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                7\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress8}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                8\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress9}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                9\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n        \u003cView style={{flexDirection: \"row\"}}\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPressBackSpace}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                \u0026larr;\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress0}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                0\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPressHideKeyboard}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                \u0026crarr;\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nregister('price', () =\u003e MyKeyboard);\n```\n\nUse `CustomTextInput` instead of `TextInput`:\n\n```\nexport default class App extends Component\u003cProps\u003e {\n  state = {\n    value: ''\n  }\n\n  onChangeText = text =\u003e {\n    this.setState({value: text});\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cCustomTextInput\n          customKeyboardType=\"price\"\n          value={this.state.value}\n          onChangeText={this.onChangeText}\n          style={styles.input}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n### Full usage code\n\n```\nimport React, {Component} from 'react';\nimport {\n  Platform,\n  StyleSheet,\n  Text,\n  View,\n  NativeModules,\n  TouchableOpacity,\n  Keyboard,\n} from 'react-native';\n\nimport { \n  CustomTextInput,\n  register,\n  insertText,\n  backSpace,\n  uninstall,\n  hideKeyboard,\n} from 'react-native-custom-keyboard-kit';\n\nclass MyKeyboard extends Component {\n  onPress1 = () =\u003e {\n    insertText(this.props.tag, '1');\n  }\n\n  onPress2 = () =\u003e {\n    insertText(this.props.tag, '2');\n  }\n\n  onPress3 = () =\u003e {\n    insertText(this.props.tag, '3');\n  }\n  \n  onPress4 = () =\u003e {\n    insertText(this.props.tag, '4');\n  }\n\n  onPress5 = () =\u003e {\n    insertText(this.props.tag, '5');\n  }\n  \n  onPress6 = () =\u003e {\n    insertText(this.props.tag, '6');\n  }\n\n  onPress7 = () =\u003e {\n    insertText(this.props.tag, '7');\n  }\n\n  onPress8 = () =\u003e {\n    insertText(this.props.tag, '8');\n  }\n\n  onPress9 = () =\u003e {\n    insertText(this.props.tag, '9');\n  }\n  \n  onPressBackSpace = () =\u003e {\n    backSpace(this.props.tag);\n  }\n  \n  onPress0= () =\u003e {\n    insertText(this.props.tag, '0');\n  }\n  \n  onPressHideKeyboard = () =\u003e {\n    hideKeyboard(this.props.tag);\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cView style={{flexDirection: \"row\"}}\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress1}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                1\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress2}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                2\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress3}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                3\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n        \u003cView style={{flexDirection: \"row\"}}\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress4}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                4\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress5}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                5\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress6}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                6\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n        \u003cView style={{flexDirection: \"row\"}}\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress7}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                7\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress8}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                8\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress9}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                9\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n        \u003cView style={{flexDirection: \"row\"}}\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPressBackSpace}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                \u0026larr;\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPress0}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                0\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n          \u003cView style={styles.button}\u003e\n            \u003cTouchableOpacity onPress={this.onPressHideKeyboard}\u003e\n              \u003cText style={styles.buttonLabel}\u003e\n                \u0026crarr;\n              \u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nregister('price', () =\u003e MyKeyboard);\n\ntype Props = {};\nexport default class App extends Component\u003cProps\u003e {\n  state = {\n    value: ''\n  }\n\n  onChangeText = text =\u003e {\n    this.setState({value: text});\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cCustomTextInput\n          customKeyboardType=\"price\"\n          value={this.state.value}\n          onChangeText={this.onChangeText}\n          style={styles.input}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  input: {\n    backgroundColor: \"#ffffff\",\n    borderWidth: 1,\n    borderColor: \"grey\",\n    width: 270,\n    fontSize: 19,\n  },\n  buttonLabel: {\n    borderWidth: 0.5,\n    borderColor: \"#d6d7da\",\n    padding: 10,\n    textAlign: \"center\",\n    justifyContent: 'center',\n    alignItems: 'center',\n    paddingTop: 13,\n    paddingBottom: 13,\n    fontSize: 20,\n  },\n  button: {\n    width: \"33.333333333%\",\n  },\n});\n```\n\nYou can find the source code [here](./examples/CustomKeyboardKitBasic).\n\n## API\n\n| Function   |      Description      |\n|:----------|:----------|\n| register(type, type) | Register a custom keyboard type. |\n| install(tag, type) | Install custom keyboard to a `TextInput`. Generally you can use CustomTextInput instead of this. But you can use this API to install/change custom keyboard dynamically. |\n| uninstall(tag) | Uninstall custom keyboard from a `TextInput` dynamically. |\n| insertText(tag, text) | Use in a custom keyboard, insert text to `TextInput`. |\n| backSpace(tag) | Use in a custom keyboard, delete selected text or the charactor before cursor. |\n| doDelete(tag) | Use in a custom keyboard, delete selected text or the charactor after cursor. |\n| moveLeft(tag) | Use in a custom keyboard, move cursor to selection start or move cursor left. |\n| moveRight(tag) | Use in a custom keyboard, move cursor to selection end or move cursor right. |\n| hideKeyboard(tag) | Hide a custom keyboard. |\n| switchSystemKeyboard(tag) | Use in a custom keyboard. Switch to system keyboard. Next time user press or focus on the `TextInput`, custom keyboard will appear again. To keep using system keyboard, call `uninstall` instead. |\n| CustomTextInput | Use instead of `TextInput`, this component support all properties of `TextInput`. |\n| prop: customKeyboardType: string | Use a registered custom keyboard. |\n\n## Wrap Up\n\nIf you think any of the `react-native-custom-keyboard-kit` can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.\n\n## Contribution\n\nWe'd love to have your helping hand on contributions to `react-native-custom-keyboard-kit` by forking and sending a pull request!\n\nYour contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)\n\nHow to contribute:\n\n- Open pull request with improvements\n- Discuss ideas in issues\n- Spread the word\n- Reach out with any feedback\n\n## License\n\nThe MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbunlong%2Freact-native-custom-keyboard-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbunlong%2Freact-native-custom-keyboard-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbunlong%2Freact-native-custom-keyboard-kit/lists"}