How to hide tabs when keyboard is shown?

Ionic Native
2

Forget the *ngIf !

What you can do is this:

If the keyboard shows use this code to hide it.

Just as an example:

  keyboardCheck() {
    if(this.keyboard.isOpen()){
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
      Object.keys(tabs).map((key) => {
        tabs[key].style.display = 'none';
        });
      }
   }else if(this.keyboard.isClosed()){
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
      Object.keys(tabs).map((key) => {
        tabs[key].style.display = 'flex';
        });
      }
   }

Note: You can also just use else instead of else if!

If you wanna know more about the open/closed keyboard command I suggest you read this doc:

https://ionicframework.com/docs/api/platform/Keyboard/#isOpen

2 Likes