Stop keyboard overlay when interacting with TextField in a NativeScript application

After stumbling around a few other discussions and resources:

• Keyboard in going over the page view
• Android keyboard overlay
• Keyboard overlapping textview

There were a few takeaways from these resources which I'll review below.

Template Flow

First off, you'll need to ensure your page layout mirrors something like below:

ScrollView
  > StackLayout
    > GridLayout
      > SomeElement
    > GridLayout
      > TextField

Android Soft Input Mode

This relates to the on-screen keyboard that displays when a text field in the UI receives focus. One trick to ensure the keyboard does not overlay your textfield is to ensure you have the property windowSoftInputMode set in your AndroidManifest.xml. You can either use adjustResize or adjustPan. I'm not entirely sure of the differences, but some users have reported either or both working so you might need to play around with which works for your case. You can read more about these two flags here.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="__PACKAGE__"
  android:versionCode="10000"
  android:versionName="1.0">

  ...

  <application
    ...
    android:windowSoftInputMode="stateHidden | adjustPan">

Update 2

I believe there is something getting reset within NativeScript which is causing the flag set by android:windowSoftInputMode to be reset when the application is suspended and resumed. To get around this, you'll need to make some adjustments in the controller of the view itself to watch for these events to happen in your app's lifecycle and then retroactively enable the flags again.

some-view.component.ts (TypeScript)

import { Component, OnInit } from '@angular/core';
import * as app from "application";
import {
  resumeEvent,
  suspendEvent,
  ApplicationEventData,
  on as applicationOn,
  run as applicationRun } from "tns-core-modules/application";

declare var android: any; // <- important! avoids namespace issues

@Component({
  moduleId: module.id,
  selector: 'some-view',
  templateUrl: './some-view.component.html',
  styleUrls: ['./some-view.component.css']
})
export class SomeViewComponent implements OnInit {

  constructor() {
    applicationOn(suspendEvent, (args: ApplicationEventData) => {
      // args.android is an android activity
      if (args.android) {
        console.log("SUSPEND Activity: " + args.android);
      }
    });

    applicationOn(resumeEvent, (args: ApplicationEventData) => {
      if (args.android) {
        console.log("RESUME Activity: " + args.android);
        let window = app.android.startActivity.getWindow();
        window.setSoftInputMode(
          android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN
        );
        // This can be SOFT_INPUT_ADJUST_PAN
        // Or SOFT_INPUT_ADJUST_RESIZE
      }
    });
  }
}