How to hide tabs when keyboard is shown?

I want to hide the tabs when keyboard is shown. But could not find any working solutions. I have tried with the native keyboard api to show and hide tabs

export class TabsPage {
  homePage = HomePage;
  explorePage = ExplorePage;
  cartPage = CartPage;
  feedPage = FeedPage;
  valueforngif = true;

  constructor(platform: Platform, public navCtrl: NavController, public navParams: NavParams, public keyboard:Keyboard) {

  ionViewDidLoad() {


    console.log('tab changing');


and tabs.html looks like this
<ion tabs *ngIf="valueforngif"> <ion-tab>....</ion-tab> </ion-tabs>
but when keyboard opens, the whole app stops working and i think that’s because the root is gone when i set false to the ion-tabs. Can you help me to solve this ?

Forget the *ngIf !

What you can do is this:

If the keyboard shows use this code to hide it.

Just as an example:

  keyboardCheck() {
    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:


I managed to get this working!
Note: I only have one set of tabs in my app

1. Install the Ionic Native keyboard

ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install --save @ionic-native/keyboard

See docs:

2. Followed pretty much the fix here:

import keyboard

import { Keyboard } from "@ionic-native/keyboard";

add to constructor

public keyboard: Keyboard 

inside platform.ready: add and remove class based on whether the keyboard is open or closed

this.platform.ready().then(() => {
    this.keyboard.onKeyboardShow().subscribe(() => {

    this.keyboard.onKeyboardHide().subscribe(() => {

add styling logic to hide and show the tabs based on the class ‘keyboard-is-open’ is present

body.keyboard-is-open { {
        display: none;
    scroll-content {
        margin-bottom: 0 !important;