NativeScript wrapper of the popular IQKeyboardManager iOS library
npm install @nativescript/iqkeyboardmanagerA NativeScript wrapper for the popular IQKeyboardManager iOS framework, which provides an elegant solution for preventing the iOS keyboard from covering UITextView controls.
!Example of using the IQKeyBoardManager NativeScript plugin on an iOS device
To install the plugin, run the following command from the root folder of your project:
``cli`
npm install @nativescript/iqkeyboardmanager
The following sections describe how to use the @nativescript/iqkeyboardmanager plugin in the different flavors that NativeScript supports.
> Note Make related text fields siblings for the IQKeyboardManager to automatically
add the previous(<) and next(>) buttons to the accessory bar. The user can then use those buttons to jump back and forth.
attribute under a prefix( IQKeyboardManager for example) that you can use to access the PreviousNextView.`xml
`
2. Access the PreviousNextView using the prefix.`xml
`
The 2 preceding steps result in the code below:`xml
`$3
1. Register the
PreviousNextView element in the .modules.ts file where you want to use this feature (or the app.module.ts for global access).`ts
import { registerElement } from '@nativescript/angular';
import { PreviousNextView } from '@nativescript/iqkeyboardmanager';
registerElement('PreviousNextView', () => PreviousNextView);
`2. Add
PreviousNextView to the markup as follows:`html
>
`$3
1. Register
PreviousNextView by adding the following code to the app.ts file.`ts
registerElement('PreviousNextView', () => require('@nativescript/iqkeyboardmanager').PreviousNextView);
`
2. Use PreviousNextView in markup.`xml
>
`$3
1. Register
PreviousNextView by adding the following code to the app.ts file.`ts
registerNativeViewElement('previousNextView', () => require('@nativescript/iqkeyboardmanager').PreviousNextView);
`
2. Add previousNextView to markup.`xml
`
For a demo app, visit NativeScript Svelte: IQ Keyboard Manager.$3
By default, when a
TextField is focused, the keyboard manager shows the field's hint label in the accessory bar above the keyboard.For a
TextView, however, use the TextViewWithHint component,
provided by this plugin, to add the hint label to the accessory bar. #### Core
`xml
`#### Angular
In the
.modules.ts file where you want to use this feature (or the app.module.ts),
register the TextViewWithHint element:`typescript
import { registerElement } from '@nativescript/angular';
import { TextViewWithHint } from '@nativescript/iqkeyboardmanager';
registerElement('TextViewWithHint', () => TextViewWithHint);
`Then in the markup, use that element like this:
`html
`#### Vue
Register the component.
`javascript
.registerElement('TextViewWithHint', () => require('@nativescript/iqkeyboardmanager').TextViewWithHint);
`#### Svelte
Register the component.
`javascript
.registerNativeViewElement('textViewWithHint', () => require('@nativescript/iqkeyboardmanager').TextViewWithHint);
`$3
1. Register the
TextViewWithHint component.`ts
interface PreviewNextViewAttributes extends ViewAttributes {
}
interface TextViewWithHintAttributes extends ViewAttributes {
text:string;
hint?: string
}
declare global {
module JSX {
interface IntrinsicElements {
/**
* If determining the GradientAttributes is too much work,
* you could substitute it for any type!
*/
previousNextView: NativeScriptProps,
textViewWithHint: NativeScriptProps
}
}
}
registerElement("previousNextView", ()=> require("@nativescript/iqkeyboardmanager").PreviousNextView)
registerElement("textViewWithHint", ()=> require("@nativescript/iqkeyboardmanager").TextViewWithHint) `
2. Use TextViewWithHint in markup:
`xml
`
$3
The following are links to the plugin demo apps in the different JS flavors.
* NativeScript TS: IQ Keyboard Manager.
* NativeScript Svelte: IQ Keyboard Manager
* NativeScript React: IQ Keyboard Manager
$3
To tweak the appearance and behavior of
PreviousNextView, follow the steps below:1. Add the following path to your app’s
references.d.ts file. `xml
///
`2. Initialize an instance of
IQKeyboardManager as follows.`typescript
const iqKeyboard = IQKeyboardManager.sharedManager();
`You now have the full IQKeyboardManager APIs available for you to use. For example, to switch to a dark keyboard you could use the following code.
`typescript
const iqKeyboard = IQKeyboardManager.sharedManager();
iqKeyboard.overrideKeyboardAppearance = true;
iqKeyboard.keyboardAppearance = UIKeyboardAppearance.Dark;
`
#### Multi-factor one-time code auto-fill
iOS 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.If the field is identified as a
one-time code field, the suggestion will appear for about 3 minutes after being received. The user simply has to tap the suggestion to fill in the value — no short-term memorization or copy/paste gestures are required. Examples of message formats are:- 123456 is your App Name code.
- 123456 is your App Name login code.
- 123456 is your App Name verification code.
To implement this functionality in your app, first declare
UITextContentTypeOneTimeCode near the component imports:`typescript
declare var UITextContentTypeOneTimeCode;
`Then, set the field's
ios.textContentType property:`typescript
// This code assumes this.page exists as a reference to the current Page.
const mfaCodeField: TextField = this.page.getViewById(oneTimeCodeFieldName);
if (mfaCodeField !== null && mfaCodeField.ios) {
mfaCodeField.ios.textContentType = UITextContentTypeOneTimeCode;
}
`There are other
textContentType values you might want to use. You can read more about the property in this article.Native documentation
For more details on how IQKeyboardManager works, including more detailed API documentation, refer to the library's CocoaPod page.
Maintainers
For maintainers of this plugin: when the IQKeyboardManager Podfile updates, you should generate new typings for the plugin to reflect those changes.
To do so, execute these commands.
`bash
cd demo
TNS_DEBUG_METADATA_PATH="$(pwd)/metadata" tns build ios
TNS_TYPESCRIPT_DECLARATIONS_PATH="$(pwd)/typings" tns build ios
`Next, locate IQKeyboardManager’s generated typings file in the
demo/typings folder and override the IQKeyboardManager.d.ts` file in this repo’s root.Apache License Version 2.0