Toolbar appeared on bottom for android phones with physical navigation bar

[gogoout]

If the demo apps cannot help and there is no issue for your problem, tell us about it

First of all, thanks for the great plugin. I have a test on this plugin, and find it works like a charm on the simulator and phones with the virtual navigation bar. But when it runs on the phone with the physical navigation bar, there are 2 problems:

• The toolbar is showed on the bottom when keyboard is hide
• The toolbar is showed above keyboard with a gap when keyboard is showed

Which platform(s) does your issue occur on?

Android (phones with physical navigation bar)

Is there any code involved?

I've debugged with the real device and found out that the problem is caused by the code here

• The first problem is caused by this:

// at this point, topmost().currentPage is null, so do it like this:
    let page: any = parent;
    while (!page && !page.frame) {
      page = page.parent;
    }

    const {y} = parent.getLocationOnScreen();
    const newHeight = parent.getMeasuredHeight();

    // this is the bottom navbar - which may be hidden by the user.. so figure out its actual height
    this.isNavbarVisible = page.getMeasuredHeight() < Toolbar.getUsableScreenSizeY();
    this.navbarHeight = Toolbar.getNavbarHeight();

I find that the page.getMeasuredHeight() is returning the exact height as the newHeight which clearly is wrong.
Further more, I tried using parent.page.getMeasuredHeight() to compare with Toolbar.getUsableScreenSizeY() which is still not working(maybe because getUsableScreenSizeY is taking status bar into account).

Anyway, so I change the way to find out if there is a virtual navigation bar. You can see the complete code below.

---

• The second problem is caused by this:

private showToolbar(parent): void {
    const animateToY = this.startPositionY - this.lastKeyboardHeight - (this.showWhenKeyboardHidden === true ? 0 : (this.lastHeight / screen.mainScreen.scale)) - (this.isNavbarVisible ? 0 : this.navbarHeight);

I guess the problem here is that there is actually no need to minus the this.navbarHeight anymore. Since the only thing changed should just be the lastKeyboardHeight, right?

---

You can see the complete changes here, hope this can be helpful.

PS: I'm also using the getViewForId in android since I've encountered that problem appeared in iOS.

[EddyVerbruggen]

Hey @gogoout, thanks for bringing this up!

I own an Samsung S8 with a virtual (bottom) navigation bar and was able to reproduce the issue when the virual nav bar is hidden: the toolbar sticks to the bottom, at the position where the nav bar would have been otherwise.

Unfortunately, your code didn't fix it for me, but I found another way to fix it. Hopefully it works for you as well. Version 1.0.2 just shipped to npm.

[gogoout]

Hi @EddyVerbruggen ,
Thanks for the fix.
I've had a test on the newest code, I can confirm that the first problem is fixed.

The toolbar is showed on the bottom when keyboard is hide

---

However, the second one is still there.

The toolbar is showed above keyboard with a gap when keyboard is showed

I guess the problem is still that the following code doesn't work for me (I'm testing on a ng program)

// at this point, topmost().currentPage is null, so do it like this:
    let page: any = parent;
    while (!page && !page.frame) {
      page = page.parent;
    }

    const {y} = parent.getLocationOnScreen();
    const newHeight = parent.getMeasuredHeight();

    // this is the bottom navbar - which may be hidden by the user.. so figure out its actual height
    this.isNavbarVisible = page.getMeasuredHeight() < Toolbar.getUsableScreenSizeY();
    this.navbarHeight = Toolbar.getNavbarHeight();

Here is some screenshot of the debugging which you can see the states.
The app is running on a Galaxy s5 which should have returned isNavbarVisible as False

Hope this may help.

[steinerjakob]

@EddyVerbruggen I'm facing the same problem as @gogoout with my Huawei P10 with disabled navbar.
But after some searching, I found this solution, which detects the correct navbar height.