Ionic: Keyboard overlaps a focused text input on iOS 11

I was having similar problems in a similar project setup where the keyboard in iOS overlapped the footer bar in ionic. I was able to solve it by removing the [email protected] and adding [email protected] https://github.com/ionic-team/cordova-plugin-ionic-keyboard

Apparently I didn't notice that ionic-plugin-keyboard was deprecated as I was upgrading my project from Ionic 1 to 2, I'm guessing you may have been in a similar position.

To make things happen, first, you need to get the height of three elements like the example code below. For example,

@ViewChild(Content) content: Content;

ionViewDidLoad() {
  if (this.platform.is('ios'))
    this.addKeyboardListeners();

  this.scrollContentElement = this.content.getScrollElement();
  this.footerElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('ion-footer')[0];
  this.inputElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('textarea')[0];
}

Then, add a keyboard listener for ios platform.

addKeyboardListeners() {
  this.keyboardHideSub = this.keyboard.onKeyboardHide().subscribe(() => {
    let marginBottom = this.textareaHeight - this.initialTextAreaHeight + 44;
    this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom + 'px');
    this.renderer.setElementStyle(this.footerElement, 'marginBottom', '0px')
  });

  this.keybaordShowSub = this.keyboard.onKeyboardShow().subscribe((e) => {
    let newHeight = (e['keyboardHeight']) + this.textareaHeight - this.initialTextAreaHeight;
    let marginBottom = newHeight + 44 + 'px';
    this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom);
    this.renderer.setElementStyle(this.footerElement, 'marginBottom', e['keyboardHeight'] + 'px');
    this.updateScroll(250);
  });
}

Lastly, it is important to unsubscribe the keyboard listeners whenever you leave the page. Make it as a method and call it from wherever you need to.

removeKeyboardListeners() {
  this.keyboardHideSub.unsubscribe();
  this.keybaordShowSub.unsubscribe();
}