Keyboard hides tabs (bottom) on iOS

Ionic Framework ionic-v3
1

Hi all,
I’m using Ionic 3.4.1 and the keyboard hides the tabs (located at the bottom) on iOS when I click on an input.


global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.4.1

System:

    Node       : v6.10.3
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10
2

You are using Ionic Framework 3.4.1 and CLI 3.4.0.
This isn’t what you expect? What do you expect?

3

Sorry, I meant 3.4.1.
On Android, the Tabs are appearing above the keyboard (expected)
iOS hides the tabs when the keyboard pops out

4

Did you find a solution for that?
Im also experiencing this on IOS, not on Android.

5

Apparently this is by design. The normal behavior on iOS is to hide the tabs. Which in my opinion sucks.

6

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: https://ionicframework.com/docs/native/keyboard/

2. Followed pretty much the fix here:

app.component.ts
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(() => {
      document.body.classList.add('keyboard-is-open');
    });

    this.keyboard.onKeyboardHide().subscribe(() => {
      document.body.classList.remove('keyboard-is-open');
    });
});

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

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