@nativescript/iqkeyboardmanager

Contents

* Intro
* Installation
* Use @nativescript/iqkeyboardmanager
* Core
* Angular
* Vue
* Svelte
* React
* Adding a hint text to the TextView accessory bar
* Core
* Angular
* Vue
* Svelte
* Demo app
* Tweaking the appearance and behavior
* Multi-factor one-time code auto-fill
* Native documentation
* Maintainers
* License

Intro

A 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

Installation

To install the plugin, run the following command from the root folder of your project:

``cli
npm install @nativescript/iqkeyboardmanager
`

Use @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.

$3


1. Register the plugin namespace with Page's xmlns 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.

License

Apache License Version 2.0