TextView at the bottom of the screen pushes action bar up when keyboards open.

[horeyes]

Please, provide the details below:

I'm trying to implement a view that has a Text View at the bottom of the screen.

Did you verify this is a real problem by searching the NativeScript Forum?

Yes, but didn't find anything that solves my problem.

Tell us about the problem

Whenever I launch the app or the app refreshes after a local build. When I open the keyboard it pushes everything up including the action bar. However, if I leave the app running in the background and come back to it or run it through playground the issue won't happen.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: (the version of nativescript-telerik-ui/-pro in the package.json) Version: 3.10
• CLI: (run tns --version to fetch it) Version: 5.2.0
• Cross-platform modules: (the version of tns-core-modules in the package.json) Version: 5.1.0
• Runtime(s): (the "tns-android" and "tns-ios" properties in the package.json) Version: 5.1.0

  Please tell us how to recreate the issue in as much detail as possible.

Steps to recreate Issue: 1) Start the app 2) Tap on the TextVIew and look at the ActionBar as the keyboards open up. 2) Notice that the ActionBar gets pushed up.

Steps to avoid the issue: 1) Start the app 2) Momentarily leave the app open in the background 3) Open the app once again 4) Notice that now the ActionBar doesn't get pushed as soon as the keyboard opens.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Sample App Attached below:

textview.zip

[tsonevn]

Hi @horeyes, To prevent the ActionBar from moving up, when the TextView is on focus, you can set the setSoftInputMode to adjustResize. For example: homr.component.ts

import { Component, OnInit } from "@angular/core";
import { Page } from "tns-core-modules/ui/page";
import * as app from "application"
declare var android:any;
@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    private messageTxt: string = ""; 
    constructor(private _page: Page) {
        _page.on("loaded", (args) => {
            if (this._page.android) {
                var window = app.android.startActivity.getWindow();
                window.setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
            }
       });
    }

    ngOnInit(): void {
        // Init your component properties here.
    }
}

[horeyes]

Hello,

I'm having a follow-up issue. I'm trying to do chat view and now every time that I have a long list the keyboard will overlap over the list instead of moving the list accordingly above the keyboard.

List with Keyboard closed:

List with Keyboard open:

I've tried finding a way to listen when the keyboard is open to scroll the view next. But the onFocus event only triggers once. I have also tried using nativescript keyboard showing plugin, but I haven't found a way to trigger the scroll method when the keyboard showing condition is true or vice versa.

Also, I noticed that if you removed the suggested code above the list will get pushed, but then you lose the ability to scroll until the elements that get beyond the screen.

List without suggested code with Keyboard open: Can't scroll beyond up after 5.

Here's an example from Discord to showcase the expected behavior:

Thanks in advanced.

[nativoplus]

@tsonevn I do not think the issue was resolved with the recommendation above.

[tsonevn]

Hi @horeyes @nativoplus, Can you send me a sample project, which demonstrates your scenario and the issue, you are facing?

[horeyes]

Hello,

Attached you will find an example app: textview (2).zip

[tsonevn]

Hi @horeyes, Thank you for the provided sample project. I tested it on my side, however, I was unable to recreate the issue with the TextView and the ActionBar. For your convenience, I am attaching a GIF. Are there any specific steps that should be followed for reproducing the issue.

[horeyes]

Hello,

With the gif, you provided you can also see the issue I'm referring to. Notice that before you open the keyboard the last number on the list is 19 once the keyboard is opened the last number is 15 without typing once you start typing then the last number you see is 14, 13, 12, etc. In order to see the last number in the list, you have to scroll down.

The proper behaviour would be like the gif from discord. Opening the keyboard should automatically push the list above the keyboard in order to create a nice smooth transition for the user. Then as the text view gets larger the list keeps being pushed on top of it instead of the keyboard being rendered over.

[ibnYusrat]

Hello,

With the gif, you provided you can also see the issue I'm referring to. Notice that before you open the keyboard the last number on the list is 19 once the keyboard is opened the last number is 15 without typing once you start typing then the last number you see is 14, 13, 12, etc. In order to see the last number in the list, you have to scroll down.

The proper behaviour would be like the gif from discord. Opening the keyboard should automatically push the list above the keyboard in order to create a nice smooth transition for the user. Then as the text view gets larger the list keeps being pushed on top of it instead of the keyboard being rendered over.

Were you able to find a solution to your problem? I'm in kind of exactly the same issue..

[horeyes]

No, I haven't been able to find a solution to this date. :(

[horeyes]

Hello, With the gif, you provided you can also see the issue I'm referring to. Notice that before you open the keyboard the last number on the list is 19 once the keyboard is opened the last number is 15 without typing once you start typing then the last number you see is 14, 13, 12, etc. In order to see the last number in the list, you have to scroll down. The proper behaviour would be like the gif from discord. Opening the keyboard should automatically push the list above the keyboard in order to create a nice smooth transition for the user. Then as the text view gets larger the list keeps being pushed on top of it instead of the keyboard being rendered over.

Were you able to find a solution to your problem? I'm in kind of exactly the same issue..

Hello ibnYusrat,

Where you able to find a solution?

Since no one hasn't answered for a while I opened another issue and referenced this original issue over there so that hopefully someone from the NS team can help us figure it out or mark it as a bug.

Please follow that issue and maybe post a comment. That might help us get an answer on the matter.

[houssammehdi]

Any solution for this?