Hiding tabs results in black screen


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:

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>

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';

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


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