Support IQKeyboardManager #2

Author: EddyVerbruggen

demo/app/main-page.xml

@@ -95,4 +95,4 @@
         </kt:Toolbar>
 
     </GridLayout>
-</Page>
+</Page>

demo/app/main-view-model.ts

@@ -4,6 +4,8 @@ import { topmost } from "tns-core-modules/ui/frame";
 import { TextView } from "tns-core-modules/ui/text-view";
 const emailValidator = require("email-validator");
 
+declare const IQKeyboardManager: any;
+
 export class HelloWorldModel extends Observable {
 
   email: string;
@@ -27,6 +29,9 @@ export class HelloWorldModel extends Observable {
   constructor() {
     super();
 
+    // this suppresses IQKeyboardManager's toolbar (the one with < > and OK buttons)
+    IQKeyboardManager.sharedManager().enableAutoToolbar = false;
+
     // laughable code, I know, but it's just a quick demo
     setTimeout(() => {
       const page = topmost().currentPage;

demo/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "email-validator": "^2.0.4",
+    "nativescript-iqkeyboardmanager": "^1.3.0",
     "nativescript-keyboard-toolbar": "file:../src",
     "nativescript-theme-core": "^1.0.4",
     "nativescript-unit-test-runner": "^0.3.4",

src/keyboard-toolbar.ios.ts

@@ -6,6 +6,8 @@ import { AnimationCurve } from "tns-core-modules/ui/enums";
 import { topmost } from "tns-core-modules/ui/frame";
 import { ToolbarBase } from "./keyboard-toolbar.common";
 
+declare const IQKeyboardManager: any;
+
 export class Toolbar extends ToolbarBase {
   private startPositionY: number;
   private lastHeight: number;
@@ -37,8 +39,15 @@ export class Toolbar extends ToolbarBase {
       // experimental support for non-text widgets.. but not sure if this is useful, so not documenting it yet
       const isText = forView instanceof EditableTextBase;
 
+      const hasIQKeyboardManagerInstalled = typeof(IQKeyboardManager) !== "undefined";
+      const iqKeyboardManagerOriginalDistance = hasIQKeyboardManagerInstalled ? IQKeyboardManager.sharedManager().keyboardDistanceFromTextField : 0;
+
       if (isText) {
         forView.on("focus", () => {
+          if (hasIQKeyboardManagerInstalled) {
+            IQKeyboardManager.sharedManager().keyboardDistanceFromTextField = iqKeyboardManagerOriginalDistance + parent.height;
+          }
+
           this.hasFocus = true;
           // wrap in a timeout, to make sure this runs after 'UIKeyboardWillChangeFrameNotification'
           setTimeout(() => {
@@ -55,6 +64,10 @@ export class Toolbar extends ToolbarBase {
         });
 
         forView.on("blur", () => {
+          if (hasIQKeyboardManagerInstalled) {
+            IQKeyboardManager.sharedManager().keyboardDistanceFromTextField = iqKeyboardManagerOriginalDistance;
+          }
+
           this.hasFocus = false;
           const animateToY = this.showWhenKeyboardHidden === true && this.showAtBottomWhenKeyboardHidden !== true ? 0 : this.startPositionY;
           this.log("blur, animateToY: " + animateToY);

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-keyboard-toolbar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "NativeScript Keyboard Toolbar plugin",
   "main": "keyboard-toolbar",
   "typings": "index.d.ts",