Move UI element with keyboard nativescript (IOS) - nativescript

Question

On my nativescript app - I have a button at the bottom of a screen. On the screen there is a Text area. When the user taps in the Text Area, a virtual keyboard appears. At this point, I want the button at the bottom to move up and appear just on top of the virtual keyboard. Any suggestions on how I can achieve this in both android and iOS?
Code
<GridLayout>
<ActionBar title="" backgroundColor="#f82462" top="0" left="0">
<NavigationButton (tap)="goBack()"></NavigationButton>
</ActionBar>
<GridLayout rows="*, auto">
<GridLayout row ='0' rows="auto *" columns="">
<GridLayout row="0" rows="" columns="">
<Button text="Top Button" (tap)="goNext()"></Button>
</GridLayout>
<GridLayout row="1" backgroundColor="#f82462">
<TextView [(ngModel)]="xyz" class="input" hint="Write your question as a complete sentence.Click on camera to add images if required." returnkeyType="done" id="questionText"></TextView>
</GridLayout>
</GridLayout>
<StackLayout row='1'>
<Button text="Next" (tap)="goNext()"></Button>
</StackLayout>
</GridLayout>

Answer 1

I am not able to test this right now, but have you tried to wrap everything inside the main GridLayout in <ScrollView> ... </ScrollView>

Answer 2

I also encountered this problem for my instant chat application, here is the solution : https://gist.github.com/elvticc/0c789d08d57b1f4d9273f7d93a7083ec
// Also use IQKeyboardManager to customize the iOS keyboard
// See https://github.com/tjvantoll/nativescript-IQKeyboardManager
// let iqKeyboard: IQKeyboardManager = IQKeyboardManager.sharedManager();
// iqKeyboard.toolbarDoneBarButtonItemText = "OK";
// iqKeyboard.canAdjustAdditionalSafeAreaInsets = true;
// iqKeyboard.shouldFixInteractivePopGestureRecognizer = true;
// Angular
[...]
import { OnInit, OnDestroy, ElementRef, ViewChild } from "#angular/core";
[...]
// NativeScript
[...]
import { ios as iosApp } from "tns-core-modules/application/application";
[...]
#ViewChild("element") private _element: ElementRef<StackLayout>; // FlexboxLayout, GridLayout, etc.
private _keyboardHeight: number = 0;
private _elementHeight: number = 0;
private _observerIDs: Array<object> = new Array();
// Start events when the component is ready
ngOnInit(): void {
// iOS keyboard events
if (iosApp) {
let eventNames: Array<string> = [
UIKeyboardWillShowNotification,
UIKeyboardDidShowNotification,
UIKeyboardWillHideNotification
];
// Catch the keyboard height before it appears
this._observerIDs.push({
event: eventNames[0],
id: iosApp.addNotificationObserver(eventNames[0], (event) => {
let currHeight: number = this._keyboardHeight,
newHeight: number = event.userInfo.valueForKey(UIKeyboardFrameEndUserInfoKey).CGRectValue.size.height;
if (currHeight != newHeight) {
this._keyboardHeight = newHeight;
}
})
});
// Position the element according to the height of the keyboard
this._observerIDs.push({
event: eventNames[1],
id: iosApp.addNotificationObserver(eventNames[1], (event) => {
if (this._elementHeight == 0) {
this._elementHeight = this._element.nativeElement.getActualSize().height;
}
this._element.nativeElement.height = this._keyboardHeight + this._elementHeight;
})
});
// Reposition the element according to its starting height
this._observerIDs.push({
event: eventNames[2],
id: iosApp.addNotificationObserver(eventNames[2], () => {
this._element.nativeElement.height = this._elementHeight; // or "auto";
})
});
}
}
// Stop events to avoid a memory leak
ngOnDestroy(): void {
if (iosApp) {
let index: number = 0;
for (index; index < this._observerIDs.length; index++) {
let observerId: number = this._observerIDs[index]['id'],
eventName: string = this._observerIDs[index]['event'];
iosApp.removeNotificationObserver(observerId, eventName);
}
}
}
Marcel Ploch's original : https://gist.github.com/marcel-ploch/bf914dd62355049a0e5efb4885ca4c6e