Hiding tabs results in black screen

Ionic Framework ionic-v3
1

Hi,

I’m having an issue whereby when trying to hide tabs on the event of the keyboard opening, the application screen turns black, returning when the keyboard is closed. I have a textarea in the footer (as ion-textarea in the footer hides when the keyboard opens). I’d like the tabs to be hidden whenever the keyboard opens.

I’ve attached 2 screenshots of before/after the textarea is clicked:

IMG_8530
IMG_8530.jpg750×1334 70.4 KB

IMG_8531
IMG_8531.jpg750×1334 75.2 KB

Here’s my HTML for the tabs:

<ion-tabs color="primary" [ngClass]="(showtabs) ? 'show' : 'hidden'">
  <ion-tab [root]="tab1Root"  tabIcon="md-mail" tabBadge="{{getBadgeValue(messageBadgeCount)}}" tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab5Root"  tabIcon="md-planet" tabBadge="{{getBadgeValue(feedBadgeCount)}}" tabBadgeStyle="danger"></ion-tab>
  <ion-tab (ionSelect)="openSendMessage()" tabIcon="burnt-logoquestion"></ion-tab>
  <ion-tab [root]="tab2Root"  tabIcon="md-people" tabBadge="{{getBadgeValue(friendBadgeCount)}}" tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab3Root"  tabIcon="md-settings"></ion-tab>
</ion-tabs>

And my .ts file for the tabs page (i’ve stripped out a couple of helper functions):

import { Component } from '@angular/core';

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { SellPage } from '../sell/sell';
import { SettingsPage } from '../settings/settings';
import { LocalPage } from '../local/local';
import { AnswerPage } from '../answer/answer';
import { FriendsPage } from '../manage-friends/manage-friends';
import { Events, Platform, ModalController } from 'ionic-angular';
import { Keyboard } from 'ionic-native';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = AnswerPage;
  tab2Root: any = FriendsPage;
  tab3Root: any = SettingsPage;
  tab4Root: any = SellPage;
  tab5Root: any = HomePage;
  friendBadgeCount = 0;
  feedBadgeCount = 0;
  messageBadgeCount = 0;
  showtabs = true;
  constructor(public platform: Platform, public events: Events, public modalCtrl: ModalController) {
      
  }

  ionViewDidEnter() {
    Keyboard.onKeyboardShow().subscribe(()=>{this.showtabs=false;})
    Keyboard.onKeyboardHide().subscribe(()=>{this.showtabs=true;})
  }

}

Is there a better approach to having a sticky textarea at the bottom of the page, that still shows when the keyboard is open? I should also point out that I’ve tried *ngIf to hide the tabs too.

This is being tested on iOS 11