Nativescript: Detect if keyboard is showing or not on angular app?

[shabib3]

Hey guys,

I searched some but didn't find something that solve my issue.

I need to detect when keyboard is showing or now on angular app.
there is that plugin -> nativescript-keyboardshowing, but it doesn't work with angular apps.

if there is any way to actually listen to event that tells me that keyboard state changed is much better.

Thanks a lot! :)

[tsonevn]

Hi @shabib3,
I tested the plugin on my side and everything seems to work as expected in NS Angular project on both iOS and Android. For your convenience, I am attaching a sample project.
Archive.zip

[carlosen14]

I use this..

    if (application.android) {
        textField.dismissSoftInput(); // if showing it will hide, if not showing nothing will happen
    }else if (application.ios) {
        textField.ios.resignFirstResponder(); // same here.. 
    }

[IAMtheIAM]

It does not work anymore with ns 4.1 webpack. It says
Unable to apply changes on device: emulator-5554. Error is: Processing node_modules failed. Error: ENOENT: no such file or directory, lstat '/nativescript/node_modules/fsevents/package.json'.

This happens after running tns plugin add nativescript-keyboardshowing. It appears that project is not being maintained. Is there another way to detect the keyboard using nativescript angular?

[tsonevn]

Hi @IAMtheIAM,
Try removing the platforms, node_modules and hooks folders from the project and restart the simulator, which you used. Then rebuild the app with tns run android.

[vick16ach]

i need another way to check keypad whether open or not. can anyone please share some native android code or nativescript code or give some simple answers or guidelines.

[jokro]

plugin -> nativescript-keyboardshowing in the above link says that it is not supported anymore. Also documentation to use is is gone. Is there another solution to know the state of the keyboard ?

[NathanaelA]

@jokro - Three things;

1. The docs were present, they were pointing to the ProPlugins version of the docs.
2. I set the docs to the ProPlugins.org version because I figured the community would prefer the most accurate docs; but a lot of people didn't see it that way. I have been slowly reverting the docs back (and just did in KeyboardShowing). So the original docs are back for some of my plugins, the rest will come as I have time...
3. The ProPlugins version is supported and works fine in NS 6, and even has some additional functionality. I have no idea if the community version works in NS 6, but I'm willing to take PR's for it and publish new versions if the community wants to spend the time to fix it.

[jokro]

@NathanaelA Thx for investing in plugin. My main problem is that your link link to doc is broken: Your link "https://npm.proplugins.org/-/web/detail/@proplugins/nativescript-keyboardshowing" responds with

Sorry, we couldn't find it...The page you're looking for doesn't exist.

How can I get the proplugin version ?

Do I have to subscribe to ProPlugins first ? I checked and found no free subscription possibility on the site. Without being logged in your plugin is not found.

[jokro]

@NathanaelA
I found this link on github.
If this is the plugin, then it does not do what I expected. The plugin has a button to open/close a keyboard and remembers it state. It does not show the state of the keyboard if a user uses the android standard buttons/actions to open/close the keyboard. That is it is not possible to know the state of the keyboard with standard use.

[NathanaelA]

@jokro - Well, that is not good that you can't see the link working. Can you tell me what browser and if what operating system you are using? I just tried that link and it worked for me in two different browsers.

---

No, you unfortunately misunderstood the demo. This plugin does EXACTLY what it says it does.

Ok; when you launch the demo you see this:

The "Hiding" is telling you the current state of the keyboard. (Which of course in the picture is closed/hiding)
If you click in the text field (which says "Click on me"); then the OS automatically brings up the keyboard.

And then because the keyboards is now showing, the text at the top says "Showing" and the event handler also enables the button to easily disable the keyboard; however you can also use the button on the navbar to hide the keyboard. And the state will go back to "Hiding". If you look at the demo code:

https://github.com/NathanaelA/nativescript-keyboardshowing/blob/master/demo/app/main-page.js#L22

This is the event that gets called when the keyboard is opened or closed (no matter how it is opened or closed). Depending on what the evt.showing flag is set. And so I use whatever value gets passed in, to set the display text and if the close button should be active. :-)

[jokro]

@NathanaelA
I use Edge with Windows 10 See screendump.
I have now downloaded chrome and then it loads.

Sorry I misunderstood your plugin. I was concluding it from the Demo code. I could and should have looked further in your code. Thx again.

[NathanaelA]

@jokro - Not a problem -- easy to misunderstand... :grinning: Thanks for letting me know. I'll try a copy of edge and figure out why it is having issues with the site...

[NazimMertBilgi]

Angular example;

import { Page } from 'tns-core-modules/ui/page/page';
import { Frame } from 'tns-core-modules/ui/frame/frame';
declare const android: any;

constructor(private readonly _page:Page){}
this._page.on("loaded", (args) => {
if (this._page.android) {
const listener = new android.view.ViewTreeObserver.OnGlobalLayoutListener({
onGlobalLayout: () => {
try {
// Grab the Current Screen Height
const rect = new android.graphics.Rect();
this._page.android.getWindowVisibleDisplayFrame(rect);
const screenHeight = this._page.android.getRootView().getHeight();
const missingSize = screenHeight - rect.bottom;

      if (missingSize > (screenHeight * 0.15)) {
        this.ngZone.run(() => {
          this.listViewStackLayoutHeight = "75%";
          this.sendMessageStackLayoutHeight = "25%";
        });
      } else {
        this.ngZone.run(() => {
          this.listViewStackLayoutHeight = "85%";
          this.sendMessageStackLayoutHeight = "15%";
        })
      }
    }
    catch{ }

  }
});

this._page.android.getViewTreeObserver().addOnGlobalLayoutListener(listener);

}
});