{"id":16811016,"url":"https://github.com/lukebrandonfarrell/react-native-screen-keyboard","last_synced_at":"2025-07-27T20:06:12.233Z","repository":{"id":37431291,"uuid":"184396447","full_name":"lukebrandonfarrell/react-native-screen-keyboard","owner":"lukebrandonfarrell","description":"On-screen keyboard with customisable keys and tactile / UI feedback 📱","archived":false,"fork":false,"pushed_at":"2023-04-24T23:56:06.000Z","size":2156,"stargazers_count":29,"open_issues_count":7,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-17T21:15:01.022Z","etag":null,"topics":["feedback","javascript","keyboard","native","on-screen","on-screen-keyboard","pin-code","pins","react-native","react-native-pins"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/lukebrandonfarrell.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-01T09:44:34.000Z","updated_at":"2024-04-04T17:12:19.000Z","dependencies_parsed_at":"2024-06-21T07:11:52.715Z","dependency_job_id":"5e8d90ad-7992-4bab-8ea7-8b5313c8e6fb","html_url":"https://github.com/lukebrandonfarrell/react-native-screen-keyboard","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/lukebrandonfarrell/react-native-screen-keyboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukebrandonfarrell%2Freact-native-screen-keyboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukebrandonfarrell%2Freact-native-screen-keyboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukebrandonfarrell%2Freact-native-screen-keyboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukebrandonfarrell%2Freact-native-screen-keyboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukebrandonfarrell","download_url":"https://codeload.github.com/lukebrandonfarrell/react-native-screen-keyboard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukebrandonfarrell%2Freact-native-screen-keyboard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267417664,"owners_count":24083839,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["feedback","javascript","keyboard","native","on-screen","on-screen-keyboard","pin-code","pins","react-native","react-native-pins"],"created_at":"2024-10-13T10:17:25.453Z","updated_at":"2025-07-27T20:06:12.185Z","avatar_url":"https://github.com/lukebrandonfarrell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-screen-keyboard\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n[![npm](https://img.shields.io/npm/v/react-native-screen-keyboard.svg?style=flat-square)](https://www.npmjs.com/package/react-native-screen-keyboard)\n[![npm licence](http://img.shields.io/npm/l/react-native-screen-keyboard.svg?style=flat-square)](https://npmjs.org/package/react-native-screen-keyboard)\n[![npm downloads](http://img.shields.io/npm/dt/react-native-screen-keyboard.svg?style=flat-square)](https://npmjs.org/package/react-native-screen-keyboard)\n\n\u003cimg src=\"https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-awesome-pin/keyboard.png\" width=\"50%\" /\u003e\u003cbr /\u003e\n\n## Install\n\nTo get started install via npm:\n```sh\n npm install react-native-screen-keyboard\n```\n\n#### Usage\n\nImport:\n```js\n import { VirtualKeyboard } from 'react-native-screen-keyboard';\n```\n\nThen add it to your code:\n```js\n\u003cVirtualKeyboard\n    onRef={ref =\u003e (this.keyboard = ref)}\n    keyDown={this.keyDown.bind(this)}\n/\u003e\n\n// Callback function which receives the key pressed\nkeyDown(key) {\n    // Key pressed\n}\n```\n\nThe back and custom key will pass a string, either `\"back\"` or `\"custom\"` to the keyDown callback.\n\nThe `\u003cVirtualKeyboard /\u003e` also has a number of functions which can be triggered through refs.\n\n- `back()` this will execute the back action to delete one character.\n- `setText(text)` this will set the keyboard text to the given value.\n- `displayMessage(message)` this will create a popup above the\n  keyboard displaying the given a message. The style of the popup can be customized through props.\n- `clearMessage()` this will clear the keyboard message dialog.\n- `enable()` this will enable the keyboard for input.\n- `disable()` this will disable the keyboard.\n\n#### VirtualKeyboard\n\nThe `\u003cVirtualKeyboard /\u003e` uses two arrays to allow you to set keys and define custom functions for each key.\n\n| Prop                       | Type     | Optional | Default                | Description                                                                                                                                                                                                                                                                                                                                      |\n|----------------------------|----------|----------|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| onRef                      | any      | Yes      |                        | onRef allows you to call the `throwError(message)` method.                                                                                                                                                                                                                                                                                       |\n| onKeyDown                  | function | Yes      |                        | Callback function triggered when a key is pressed. Returns the key value.                                                                                                                                                                                                                                                                        |\n| onChange                   | function | Yes      |                        | Callback function triggered when a key is pressed. Returns the full string.                                                                                                                                                                                                                                                                      |\n| onCustomKey                | function | Yes      |                        | Callback function triggered when custom left button is pressed, use with `onChange`                                                                                                                                                                                                                                                              |\n| onPressFunction            | string   | Yes      | onPressIn              | Determines which function to call when the user pressed a key. Could be one of the following three functions: `onPress`, `onPressIn` or `onPressOut`. For an explanation how the functions work take a look at the GitHub page from the [react-native-material-ripple](https://github.com/n4kz/react-native-material-ripple#properties) project. |\n| keyboard                   | array    | Yes      | See VirtualKeyboard.js | 4 x 3 matrix containing the value for each key. See VirtualKeyboard.js.                                                                                                                                                                                                                                                                          |\n| keyboardFunc               | array    | Yes      | See VirtualKeyboard.js | 4 x 3 matrix containing custom functions for each key. Pass null for no function.                                                                                                                                                                                                                                                                |\n| keyboardCustomKeyImage     | number   | Yes      | null                   | Image for the custom key (bottom left key)                                                                                                                                                                                                                                                                                                       |\n| keyboardCustomBackKey      | element  | Yes      | backAsset              | Element for the back key (bottom right key)                                                                                                                                                                                                                                                                                                      |\n| keyDisabled                | array    | Yes      | See VirtualKeyboard.js | 4 x 3 matrix containing the disabled value for each key. See VirtualKeyboard.js.                                                                                                                                                                                                                                                                 |\n| keyboardMessageDisplayTime | number   | Yes      | 3000                   | Time in milliseconds for the message dialog to automatically clear.                                                                                                                                                                                                                                                                              |\n| vibration                  | bool     | Yes      | false                  | Key / Tactile vibration enabled                                                                                                                                                                                                                                                                                                                  |\n| keyboardStyle              | object   | Yes      | See VirtualKeyboard.js | Style applied to the keyboard.                                                                                                                                                                                                                                                                                                                   |\n| keyboardDisabledStyle      | object   | Yes      | See VirtualKeyboard.js | Style applied when the keyboard is disabled.                                                                                                                                                                                                                                                                                                     |\n| keyCustomStyle             | array    | Yes      | See VirtualKeyboard.js | 4 x 3 matrix containing a custom style for each key. Pass null for default style or to use keyStyle as an override.                                                                                                                                                                                                                              |\n| keyStyle                   | object   | Yes      | See VirtualKeyboard.js | Style applied to each key on the keyboard.                                                                                                                                                                                                                                                                                                       |\n| keyTextStyle               | object   | Yes      | See VirtualKeyboard.js | Style applied to the text inside each key.                                                                                                                                                                                                                                                                                                       |\n| keyImageStyle              | object   | Yes      | See VirtualKeyboard.js | Style applied to image in a key. If an image is passed.                                                                                                                                                                                                                                                                                          |\n| messageStyle               | object   | Yes      | See VirtualKeyboard.js | Style applied to popup error. Can set the background colour here.                                                                                                                                                                                                                                                                                |\n| messageTextStyle           | object   | Yes      | See VirtualKeyboard.js | Style applied to the text inside the popup error.                                                                                                                                                                                                                                                                                                |\n| messageTestID              | string   | Yes      | \"MessageContainer\"     | TestID belonging to the view component of the popup error.                                                                                                                                                                                                                                                                                       |\n| messageTextTestID          | string   | Yes      | \"Message\"              | TestID belonging to the text component inside the popup error.                                                                                                                                                                                                                                                                                   |\n\n## Contributing\n\nIf you want to issue a PR, go ahead ;)\n\n## License\n\nThis project is licensed under the MIT License\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://www.lukebrandonfarrell.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/18139277?v=4?s=100\" width=\"100px;\" alt=\"Luke Brandon Farrell\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuke Brandon Farrell\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/lukebrandonfarrell/react-native-screen-keyboard/commits?author=lukebrandonfarrell\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/lukebrandonfarrell/react-native-screen-keyboard/commits?author=lukebrandonfarrell\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-lukebrandonfarrell\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/aikewoody\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/17004429?v=4?s=100\" width=\"100px;\" alt=\"Aike van den Brink\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAike van den Brink\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#data-aikewoody\" title=\"Data\"\u003e🔣\u003c/a\u003e \u003ca href=\"https://github.com/lukebrandonfarrell/react-native-screen-keyboard/commits?author=aikewoody\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/lukebrandonfarrell/react-native-screen-keyboard/commits?author=aikewoody\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/ajp8164\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1063765?v=4?s=100\" width=\"100px;\" alt=\"Andy Phillipson\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndy Phillipson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/lukebrandonfarrell/react-native-screen-keyboard/commits?author=ajp8164\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/lukebrandonfarrell/react-native-screen-keyboard/commits?author=ajp8164\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.leonardoballand.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5455556?v=4?s=100\" width=\"100px;\" alt=\"Leonardo BALLAND\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLeonardo BALLAND\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/lukebrandonfarrell/react-native-screen-keyboard/commits?author=leonardoballand\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/lukebrandonfarrell/react-native-screen-keyboard/commits?author=leonardoballand\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://timvandijck.be\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4528796?v=4?s=100\" width=\"100px;\" alt=\"Tim Van Dijck\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTim Van Dijck\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/lukebrandonfarrell/react-native-screen-keyboard/commits?author=timvandijck\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukebrandonfarrell%2Freact-native-screen-keyboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukebrandonfarrell%2Freact-native-screen-keyboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukebrandonfarrell%2Freact-native-screen-keyboard/lists"}