{"id":15141828,"url":"https://github.com/nativescript/nativescript-iqkeyboardmanager","last_synced_at":"2025-09-29T10:31:31.087Z","repository":{"id":141978791,"uuid":"287153665","full_name":"NativeScript/nativescript-IQKeyboardManager","owner":"NativeScript","description":"NativeScript wrapper for the popular IQKeyboardManager iOS framework","archived":false,"fork":true,"pushed_at":"2020-09-07T18:49:15.000Z","size":30453,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-23T10:01:07.244Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Shell","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"tjvantoll/nativescript-IQKeyboardManager","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NativeScript.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}},"created_at":"2020-08-13T01:39:00.000Z","updated_at":"2020-09-07T18:49:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"e1b74476-7125-4784-ac86-c458b914ab61","html_url":"https://github.com/NativeScript/nativescript-IQKeyboardManager","commit_stats":{"total_commits":42,"total_committers":8,"mean_commits":5.25,"dds":"0.47619047619047616","last_synced_commit":"9bbdb876f082cd165816342e324dd54aee55aee5"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-IQKeyboardManager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-IQKeyboardManager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-IQKeyboardManager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-IQKeyboardManager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NativeScript","download_url":"https://codeload.github.com/NativeScript/nativescript-IQKeyboardManager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219874490,"owners_count":16554583,"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-09-26T09:02:27.189Z","updated_at":"2025-09-29T10:31:21.074Z","avatar_url":"https://github.com/NativeScript.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"## NativeScript 7\n\n* Use `@nativescript/iqkeyboardmanager`: `~2.0.0`\n* [Source managed here](https://github.com/NativeScript/plugins)\n\n## If using 6 and below, see the following:\n\n# NativeScript IQKeyboardManager Plugin\n\nNativeScript wrapper for the popular [IQKeyboardManager](https://cocoapods.org/pods/IQKeyboardManager) iOS framework, which provides an elegant solution for preventing the iOS keyboard from covering `UITextView` controls.\n\n![Example of using the IQKeyBoardManager NativeScript plugin on an iOS device](screenshot.gif)\n\n## Installation\n\n```\n$ tns plugin add nativescript-iqkeyboardmanager\n```\n\n## Usage\n\nThat's it! IQKeyboardManager takes care of all initialization when your app starts up by default.\n\n## Advanced usage\n\n### Grouping related textfields (previous / next buttons)\nIf your UI layout has sibling text fields, then IQKeyboardManager is able to automatically\nadd previous / next buttons to the accessory bar which the user can use to jump back and forth.\nSee those \u003c and \u003e buttons in the video above.\n\nIn case those fields were not direct siblings, until version 1.3.0 of this plugin, you had no way\nto force the previous / next buttons to appear. However, now you can:\n\n#### NativeScript /w XML usage\nNote in the example below that the two `\u003cTextField\u003e` controls are not siblings (both have parent `\u003cStackLayout\u003e` containers). Because of this, IQKeyboardManager will not automatically provide an optimized keyboard by default.\n\nHowever, if you surround the controls with this plugin's `\u003cPreviousNextView\u003e` control, as the example below shows, you will continue to get an optimized keyboard as expected.\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"nativescript-iqkeyboardmanager\"\u003e\n  \u003cStackLayout\u003e\n    \u003cIQKeyboardManager:PreviousNextView\u003e\u003c!-- add this 'wrapper' to enable those previous / next buttons --\u003e\n      \u003cStackLayout\u003e\n        \u003cStackLayout\u003e\n          \u003cTextField hint=\"Email\"/\u003e\n        \u003c/StackLayout\u003e\n        \u003cStackLayout\u003e\n          \u003cTextField hint=\"Password\"/\u003e\n        \u003c/StackLayout\u003e\n      \u003c/StackLayout\u003e\n    \u003c/IQKeyboardManager:PreviousNextView\u003e\n  \u003c/Stacklayout\u003e\n\u003c/Page\u003e\n```\n\n#### NativeScript /w Angular usage\nIn the `.modules.ts` file where you want to use this feature (or the `app.module.ts`),\nregister the `PreviousNextView` element:\n\n```typescript\nimport { registerElement } from \"nativescript-angular\";\nregisterElement(\"PreviousNextView\", () =\u003e require(\"nativescript-iqkeyboardmanager\").PreviousNextView);\n```\n\nThen in the view, use that element like this (again, we went nuts with the `\u003cStackLayout\u003e`s:\n\n```html\n\u003cStackLayout\u003e\n  \u003cPreviousNextView\u003e\u003c!-- add this 'wrapper' to enable those previous / next buttons --\u003e\n    \u003cStackLayout\u003e\n      \u003cStackLayout\u003e\n        \u003cTextField hint=\"Email\"\u003e\u003c/TextField\u003e\n      \u003c/StackLayout\u003e\n      \u003cStackLayout\u003e\n        \u003cTextField hint=\"Password\"\u003e\u003c/TextField\u003e\n      \u003c/StackLayout\u003e\n    \u003c/StackLayout\u003e\n  \u003c/PreviousNextView\u003e\n\u003c/Stacklayout\u003e\n```\n\n#### NativeScript /w Vue usage\nVue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:\n\n```javascript\nVue.registerElement(\"PreviousNextView\", () =\u003e require(\"nativescript-iqkeyboardmanager\"). PreviousNextView)\n```\n\n### Adding a placeholder/hint on a `TextView`'s accessory bar\nLooking at the gif above you may notice when focusing the Email address and password fields,\nthe placeholder/hint of those `TextField`s is shown in the accessory bar above the keyboard.\n\nBut when you use a `TextView` instead of a `TextField`, the placeholder is not shown because\nof an iOS limitation. You can work around this limitation by using the `TextViewWithHint`\nprovided by this plugin. So whenever you want to use a `TextView` with a placeholder,\nuse `TextViewWithHint` instead.\n\n#### NativeScript /w XML usage\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"nativescript-iqkeyboardmanager\"\u003e\n  \u003cStackLayout\u003e\n    \u003cTextView hint=\"Not working TextView hint\"/\u003e\n    \u003cIQKeyboardManager:TextViewWithHint hint=\"Working TextView hint 🤪\"/\u003e\n  \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### NativeScript /w Angular usage\nIn the `.modules.ts` file where you want to use this feature (or the `app.module.ts`),\nregister the `TextViewWithHint` element:\n\n```typescript\nimport { registerElement } from \"nativescript-angular\";\nregisterElement(\"TextViewWithHint\", () =\u003e require(\"nativescript-iqkeyboardmanager\").TextViewWithHint);\n```\n\nThen in the view, use that element like this:\n\n```html\n\u003cStackLayout\u003e\n  \u003cTextView hint=\"Not working TextView hint\"\u003e\u003c/TextView\u003e\n  \u003cTextViewWithHint hint=\"Working TextView hint 🤪\"\u003e\u003c/TextViewWithHint\u003e\n\u003c/Stacklayout\u003e\n```\n\n#### NativeScript /w Vue usage\nVue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:\n\n```javascript\nVue.registerElement(\"TextViewWithHint\", () =\u003e require(\"nativescript-iqkeyboardmanager\").TextViewWithHint)\n```\n\n### Tweaking the appearance and behavior\n\nStart by adding the following two paths into your app’s `references.d.ts` file. (See this repo’s demo app for a specific example.)\n\n```\n/// \u003creference path=\"./node_modules/tns-platform-declarations/ios/ios.d.ts\" /\u003e\n/// \u003creference path=\"./node_modules/nativescript-iqkeyboardmanager/index.d.ts\" /\u003e\n```\n\n\u003e **NOTE**: You might also need to `npm install --save-dev tns-platform-declarations` to bring in NativeScript’s TypeScript definitions for native iOS development.\n\nNext, initialize an instance of `IQKeyboardManager` with the following line of code.\n\n```typescript\nconst iqKeyboard = IQKeyboardManager.sharedManager();\n```\n\nYou now have the full IQKeyboardManager APIs available for you to use. For example you could use the following code to switch to a dark keyboard.\n\n```typescript\nconst iqKeyboard = IQKeyboardManager.sharedManager();\niqKeyboard.overrideKeyboardAppearance = true;\niqKeyboard.keyboardAppearance = UIKeyboardAppearance.Dark;\n```\n\nFor more examples of what's possible, run the demo app (shown in the gif below) and check out the [app's `main-view-model.ts` file](demo/app/main-view-model.ts).\n\n\u003cimg src=\"https://github.com/tjvantoll/nativescript-IQKeyboardManager/raw/master/demo.gif\" width=\"320px\"/\u003e\n\n### Multi-factor one-time code auto-fill\n\nWhile the following is not a feature specific to IQKeyboardManager, you are here because you want the best keyboard experience for your NativeScript app and this may be helpful to know about.\n\niOS has a feature where a text field's QuickType search suggestion bar can suggest one-time code values for multi-factor authentication that were texted to your device.\n\nIf the field is specially-identified as a one-time code field, the suggestion will appear for about 3 minutes after being received, and the user simply has to tap the suggestion to fill in the value—no short term memorization or copy/paste gestures required. Examples of message formats are:\n* 123456 is your App Name code.\n* 123456 is your App Name login code.\n* 123456 is your App Name verification code.\n\nTo implement this functionality in your own app, first declare `UITextContentTypeOneTimeCode` near your component imports:\n\n```typescript\ndeclare var UITextContentTypeOneTimeCode;\n```\n\nThen, set the field's `ios.textContentType` property:\n\n```typescript\n// This code assumes this.page exists as a reference to the current Page.\nconst mfaCodeField: TextField = this.page.getViewById(oneTimeCodeFieldName);\nif (mfaCodeField !== null \u0026\u0026 mfaCodeField.ios) {\n  mfaCodeField.ios.textContentType = UITextContentTypeOneTimeCode;\n}\n```\n\nThere are other `textContentType` values you might want to use. You can read more about the property in [this article](https://medium.com/developerinsider/ios12-password-autofill-automatic-strong-password-and-security-code-autofill-6e7db8da1810).\n\n## Documentation\n\nFor more details on how IQKeyboardManager works, including more detailed API documentation, refer to [the library's CocoaPod page](https://cocoapods.org/pods/IQKeyboardManager).\n\n## Maintainers\n\nFor maintainer’s of this plugin’s source code: when the [IQKeyboardManager Podfile](platforms/ios/Podfile) updates, you should generate new typings for for this plugin to reflect those changes.\n\nTo do so, execute these commands.\n\n```bash\ncd demo\nTNS_DEBUG_METADATA_PATH=\"$(pwd)/metadata\" tns build ios\nTNS_TYPESCRIPT_DECLARATIONS_PATH=\"$(pwd)/typings\" tns build ios\n```\n\nNext, locate IQKeyboardManager’s generated typings file in the `demo/typings` folder and override the `IQKeyboardManager.d.ts` file in this repo’s root.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-iqkeyboardmanager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript%2Fnativescript-iqkeyboardmanager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-iqkeyboardmanager/lists"}