Ionic 2/3 WhatsApp like messenger functionality

Question

I'm trying to implement a WhatsApp like messenger functionality with Ionic 3 using JavaScript, and ran into troubles with the keyboard. When I click on the input text area, the keyboard will move the whole App by the amount the keyboard opens. If I use the following code to disable scroll functionality, then my input text area field gets hidden behind the keyboard.

What I want is to disable the Scroll but have the input text area move up together with the Keyboard. Does anyone know how to cleverly solve this problem? Many thanks!!

{
        platforms : {
          ios : {
            scrollAssist: false,  
            autoFocusAssist: false 
          }
        }
      }

Answer 1

If i understood you correctly look at keyboard plugin it has method disableScroll(disable)

Answer 2

The first thing to do is to use the ionic-plugin-keyboard to stop the native browser from pushing/scrolling the content pane up and allow the keyboard to slide over and cover existing content:

constructor(private keyboard: Keyboard) {
  this.platform.ready().then(() => {
    // ...

    this.keyboard.disableScroll(false); // <- like this

    // ...
}

Note: Keyboard.disableScroll() ios and windows supported only.

Yes, that solves part of the problem. The other part with the fact that my input text box now gets hidden behind the opening keyboard.

Just like you can see in this OS answer, I've found that the following configuration seems to work better (keeping in mind that there're some issues related to the keyboard still open):

@NgModule({
    declarations: [
        MyApp,
        //...
    ],
    imports: [
        //...
        IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false
        })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // ...
    ]
})
export class AppModule { }

The key is the scrollPadding: false and thescrollAssist: true: By keeping scrollAssist: true we avoid the input to be hidden by the keyboard if it's near the bottom of the page, and by setting scrollPadding: false we also avoid some weird bugs related to an empty white space after hiding the keyboard.