NativeScript - ios how to adjust view when keyboard appears

Question

I'm building an app with NativeScript 6.4.1 and Angular 8.

I have been working on this in Android and if we set 'android:windowSoftInputMode="adjustResize"' in the AndroidManifest file, the layout will adjust if the keyboard opens: How to adjust layout when soft keyboard appears

I have provided my sample code. I have a login page with a text field. I want the view to compress as the keyboard appears.

eg see pictures for desired result

I changed the AndroidManifest file: https://github.com/NativeScript/NativeScript/issues/5088#issuecomment-353394591

and listened for the page event layoutChanged Event as seen in the sample code.

It's working great for Android.

My Question: Is there an equivalent behavior for iOS?

Here is the research I have done for iOS:

I have tried to use this highly recommended plugin: https://www.npmjs.com/package/nativescript-iqkeyboardmanager

While it prevents the keyboard from covering the text field, it doesn't help me to compress my view.

https://developer.apple.com/documentation/uikit/uikeyboarddidshownotification?language=objc

https://github.com/NativeScript/NativeScript/issues/2907

https://stackoverflow.com/questions/26070242/move-view-with-keyboard-using-swift

There are a number of keyboard events that we can listen to and respond to.

Such as:

UIKeyboardWillShowNotification
Posted immediately prior to the display of the keyboard.

UIKeyboardDidShowNotification
Posted immediately after the display of the keyboard.

UIKeyboardWillHideNotification
Posted immediately prior to the dismissal of the keyboard.

UIKeyboardDidHideNotification
Posted immediately after the dismissal of the keyboard.

UIKeyboardWillChangeFrameNotification
Posted immediately prior to a change in the keyboard’s frame.

UIKeyboardDidChangeFrameNotification
Posted immediately after a change in the keyboard’s frame.

UIKeyboardAnimationDurationUserInfoKey
UIKeyboardIsLocalUserInfoKey
UIKeyboardCenterBeginUserInfoKey
UIKeyboardFrameEndUserInfoKey

This will allow me to set a boolean value when the keyboard shows and hides as I have done in my sample code. I can hide images etc.

However, it does not squish the layout in the same way that Android does.

I have read some other answers here that also recommend listening for the keyboard events: How to show complete List when keyboard is showing up in SwiftUI

How can I squish my layout when the keyboard shows?

Here is the repository for my sample code:

https://github.com/aubrey-fowler/KeyBoardHelp

Answer 1

IQKeyboardManager doesn't change the frame size of any views, but instead uses a position offset.

I haven't tested it, but you could theoretically do this by adding a callback that listens to the movement of the view. It probably won't play well with the view offset business, and it may cause instability in your view.

import { isIOS } from 'tns-core-modules/platform/platform';
if (isIOS) {
    IQKeyboardManager.sharedManager().movedDistanceChanged = (delta: number) => {
        console.log(`IQKeyboardManager (moved distance): ${delta}`);
    };
}

Remember to add to your references.d.ts in order to get the IQKeyboardManager class definition:

/// <reference path="./node_modules/nativescript-iqkeyboardmanager/index.d.ts" />