{"id":15141923,"url":"https://github.com/eddyverbruggen/nativescript-keyboard-toolbar","last_synced_at":"2025-09-06T02:33:08.899Z","repository":{"id":52440416,"uuid":"161074088","full_name":"EddyVerbruggen/nativescript-keyboard-toolbar","owner":"EddyVerbruggen","description":"⌨️🛠Add a customizable toolbar on top of the soft keyboard","archived":false,"fork":false,"pushed_at":"2021-04-29T04:02:42.000Z","size":25342,"stargazers_count":70,"open_issues_count":3,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-24T16:01:18.962Z","etag":null,"topics":["accessorybar","keyboard","nativescript","nativescript-plugin","toolbar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EddyVerbruggen.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-12-09T19:33:29.000Z","updated_at":"2024-12-11T03:27:11.000Z","dependencies_parsed_at":"2022-08-28T23:30:29.929Z","dependency_job_id":null,"html_url":"https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/EddyVerbruggen/nativescript-keyboard-toolbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-keyboard-toolbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-keyboard-toolbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-keyboard-toolbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-keyboard-toolbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EddyVerbruggen","download_url":"https://codeload.github.com/EddyVerbruggen/nativescript-keyboard-toolbar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-keyboard-toolbar/sbom","scorecard":{"id":44188,"data":{"date":"2025-08-11","repo":{"name":"github.com/EddyVerbruggen/nativescript-keyboard-toolbar","commit":"4601dea1f8e4bcbe9b604d0177304e748cd4d2b2"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.9,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":1,"reason":"Found 3/27 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: npmCommand not pinned by hash: publish/pack.sh:10","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 6 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-14T22:19:40.631Z","repository_id":52440416,"created_at":"2025-08-14T22:19:40.631Z","updated_at":"2025-08-14T22:19:40.631Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273848363,"owners_count":25178902,"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-09-06T02:00:13.247Z","response_time":2576,"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":["accessorybar","keyboard","nativescript","nativescript-plugin","toolbar"],"created_at":"2024-09-26T09:20:34.751Z","updated_at":"2025-09-06T02:33:08.843Z","avatar_url":"https://github.com/EddyVerbruggen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NativeScript Keyboard Toolbar\n\n[![Build Status][build-status]][build-url]\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][npm-url]\n[![Twitter Follow][twitter-image]][twitter-url]\n\n[build-status]:https://travis-ci.org/EddyVerbruggen/nativescript-keyboard-toolbar.svg?branch=master\n[build-url]:https://travis-ci.org/EddyVerbruggen/nativescript-keyboard-toolbar\n[npm-image]:http://img.shields.io/npm/v/nativescript-keyboard-toolbar.svg\n[npm-url]:https://npmjs.org/package/nativescript-keyboard-toolbar\n[downloads-image]:http://img.shields.io/npm/dm/nativescript-keyboard-toolbar.svg\n[twitter-image]:https://img.shields.io/twitter/follow/eddyverbruggen.svg?style=social\u0026label=Follow%20me\n[twitter-url]:https://twitter.com/eddyverbruggen\n\n\u003cimg src=\"https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar/raw/master/media/keyboard-toolbar-demo.gif\" height=\"550px\" /\u003e\n\n_iOS and Android running the included [demo](/demo) - much better framerate [on YouTube](https://www.youtube.com/watch?v=JJOOXrcopSA)!_\n\n## What The Keyboard!?\nGlad you asked 😅!\n\n- ⌨️ Mobile keyboards are a compromise at best. Let's make them easier to work with by attaching a toolbar on top of it.\n- 🥅 Design goal = declare any NativeScript layout and stick it on top of the soft keyboard.\n- 🏒 Make the toolbar _stick_ to the keyboard, no matter its shape or form.\n- 🙅‍♀️ No third party dependencies; use only stuff from `tns-core-modules` (which your app already has).\n- ♾ Allow multiple toolbar designs on one page.\n\n## Installation\n```bash\ntns plugin add nativescript-keyboard-toolbar\n```\n\n## General usage instructions\nThe plugin works by grabbing your declared toolbar layout and moving it off-screen.\n\nThen, whenever the related `TextField` or `TextView` received focus,\nthe plugin animates the toolbar to the top of the keyboard and keeps it there until the field loses focus.\n\nFor this to behave properly you'll need to grab any layout you currently have and wrap it in a `GridLayout`\nas show in the examples below. The `GridLayout` allows for stacking multiple child layout on top of each other\nwhen their `row` and `col` properties are equal (or omitted).\n\nSo if your layout structure is currently this:\n\n```xml\n\u003cActionBar/\u003e\n\u003cStackLayout/\u003e\n``` \n\nChange it to this:\n\n```xml\n\u003cActionBar/\u003e\n\u003cGridLayout\u003e\n    \u003cStackLayout/\u003e\n    \u003cToolbar/\u003e\n\u003c/GridLayout\u003e\n```\nNot too bad, right? That will make the `Toolbar` stack on top of the `StackLayout` you already had.\n\n\u003e Note that the plugin could have done this for you, or take some other approach entirely, but many hours of tinkering has convinced me this is the best solution.\n\n## Usage with NativeScript Core\nMind the comments in the example below.\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:kt=\"nativescript-keyboard-toolbar\"\u003e\n\n    \u003c!-- This GridLayout wrapper is required; it wraps the visible layout and the Toolbar layout(s) --\u003e\n    \u003cGridLayout\u003e\n\n        \u003cStackLayout\u003e\n            \u003cLabel text=\"Some text\"/\u003e\n            \u003c!-- Add an 'id' property that we can reference below --\u003e\n            \u003cTextField id=\"priceTextField\" hint=\"Enter the price\" keyboardType=\"number\"/\u003e\n        \u003c/StackLayout\u003e\n\n        \u003c!-- The 'forId' and 'height' properties are mandatory --\u003e\n        \u003ckt:Toolbar forId=\"priceTextField\" height=\"44\"\u003e\n            \u003cGridLayout columns=\"*, *, *\" class=\"toolbar\"\u003e\n                \u003cLabel col=\"0\" text=\"👍\" tap=\"{{ appendToTextView }}\"/\u003e\n                \u003cLabel col=\"1\" text=\"👎\" tap=\"{{ appendToTextView }}\"/\u003e\n                \u003cLabel col=\"2\" text=\"😄\" tap=\"{{ appendToTextView }}\"/\u003e\n            \u003c/GridLayout\u003e\n        \u003c/kt:Toolbar\u003e\n\n    \u003c/GridLayout\u003e\n\u003c/Page\u003e\n```\n\n### Core demo app\nCheck the source in the [demo](/demo) folder, or run it on your own device:\n\n```bash\ngit clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar\ncd nativescript-keyboard-toolbar/src\nnpm i\nnpm run demo.ios # or .android\n```\n\n## Usage with NativeScript-Angular\nRegister the plugin in a specific module, or globally in the app module: \n\n```typescript\nimport { registerElement } from \"nativescript-angular\";\nregisterElement(\"KeyboardToolbar\", () =\u003e require(\"nativescript-keyboard-toolbar\").Toolbar);\n```\n\nIn this example, we're adding a `TextField` to the `ActionBar`. Note that we still need to wrap the rest of the page in a `GridLayout`:\n\n```html\n\u003cActionBar\u003e\n  \u003cTextField #textField1 id=\"tf1\"\u003e\u003c/TextField\u003e\n\u003c/ActionBar\u003e\n\n\u003c!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack --\u003e\n\u003cGridLayout\u003e\n\n  \u003c!-- Add whatever visible layout you need here --\u003e\n  \u003cListView [items]=\"items\"\u003e\n    \u003cng-template let-item=\"item\"\u003e\n      \u003cLabel [nsRouterLink]=\"['/item', item.id]\" [text]=\"item.name\" class=\"list-group-item\"\u003e\u003c/Label\u003e\n    \u003c/ng-template\u003e\n  \u003c/ListView\u003e\n\n  \u003c!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).\n   The 'forId' and 'height' properties are mandatory --\u003e\n  \u003cKeyboardToolbar forId=\"tf1\" height=\"44\"\u003e\n    \u003cGridLayout columns=\"*, *, *, auto\" class=\"toolbar\"\u003e\n      \u003cLabel col=\"0\" text=\"👍\" (tap)=\"appendToTextField(textField1, '👍')\"\u003e\u003c/Label\u003e\n      \u003cLabel col=\"1\" text=\"👎\" (tap)=\"appendToTextField(textField1, '👎')\"\u003e\u003c/Label\u003e\n      \u003cLabel col=\"2\" text=\"😄\" (tap)=\"appendToTextField(textField1, '😄')\"\u003e\u003c/Label\u003e\n      \u003cLabel col=\"3\" text=\"Close️\" (tap)=\"closeKeyboard(textField1)\"\u003e\u003c/Label\u003e\n    \u003c/GridLayout\u003e\n  \u003c/KeyboardToolbar\u003e\n\u003c/GridLayout\u003e\n```\n\n### Angular demo app\nCheck the source in the [demo-ng](/demo-ng) folder, or run it on your own device:\n\n```bash\ngit clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar\ncd nativescript-keyboard-toolbar/src\nnpm i\nnpm run demo-ng.ios # or .android\n```\n\n## Usage with NativeScript-Vue\nRegister the plugin in `app.js` (or depending on your app's setup: `app.ts`, or `main.js`, etc): \n\n```typescript\nimport Vue from \"nativescript-vue\";\nVue.registerElement('KeyboardToolbar', () =\u003e require('nativescript-keyboard-toolbar').Toolbar);\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cPage class=\"page\"\u003e\n    \u003cActionBar class=\"action-bar\"\u003e\n      \u003cLabel class=\"action-bar-title\" text=\"Home\"\u003e\u003c/Label\u003e\n    \u003c/ActionBar\u003e\n\n    \u003c!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack --\u003e\n    \u003cGridLayout\u003e\n\n      \u003cStackLayout\u003e\n        \u003cTextView id=\"tv2\" text=\"Say it with emoji!\"/\u003e\n      \u003c/StackLayout\u003e\n\n      \u003c!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).\n         The 'forId' and 'height' properties are mandatory --\u003e\n      \u003cKeyboardToolbar forId=\"tv2\" height=\"44\"\u003e\n        \u003cGridLayout columns=\"*, *, *\" class=\"toolbar\"\u003e\n          \u003cLabel col=\"0\" text=\"👍\" @tap=\"appendToTextView2\"/\u003e\n          \u003cLabel col=\"1\" text=\"👎\" @tap=\"appendToTextView2\"/\u003e\n          \u003cLabel col=\"2\" text=\"😄\" @tap=\"appendToTextView2\"/\u003e\n        \u003c/GridLayout\u003e\n      \u003c/KeyboardToolbar\u003e\n\n    \u003c/GridLayout\u003e\n  \u003c/Page\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { topmost } from \"tns-core-modules/ui/frame\";\n\n  export default {\n    methods: {\n      appendToTextView2(args) {\n        const textView = topmost().currentPage.getViewById(\"tv2\");\n        textView.text += args.object.text;\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n### Vue demo app\nCheck the source in the [demo-vue](/demo-vue) folder, or run it on your own device:\n\n```bash\ngit clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar\ncd nativescript-keyboard-toolbar/src\nnpm i\nnpm run demo-vue.ios # or .android\n```\n\n## What about IQKeyboardManager?\nIf you have [IQKeyboardManager](https://github.com/tjvantoll/nativescript-IQKeyboardManager) installed for better\nkeyboard behavior on iOS, then this plugin will detect it and add the height of your custom toolbar to the scroll offset\nIQKeyboardManager applies. You can see this in action in the [NativeScript Core demo app](/demo).\n\nYou may want to suppress IQKeyboardManager's own toolbar in this case (to avoid a double toolbar), [as shown here](https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar/blob/f81cfb2e5c84fda16e8e735bf34b1030a8b5eeb6/demo/app/main-view-model.ts#L32-L33).\n\n## Future work\n- Orientation-change support.\n- Dismiss keyboard on iOS when tapping outside the keyboard (configurable). Fot the time being you can add and configure IQKeyboardManager as mentioned above.\n- Auto-scroll the view if the keyboard overlaps the text field (on iOS you can already do that with [IQKeyboardManager](https://github.com/tjvantoll/nativescript-IQKeyboardManager)).\n- Modal support on Android (currently you can't use the toolbar in a modal because the toolbar is behind the modal)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddyverbruggen%2Fnativescript-keyboard-toolbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feddyverbruggen%2Fnativescript-keyboard-toolbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddyverbruggen%2Fnativescript-keyboard-toolbar/lists"}