Detect Android soft navigation bar height in Ionic 2

Issue

In my Ionic 2 application, I have a grid component with items, that scrolls vertically.

The problem is that in Android devices with soft navigation bar (included in the screen) The scrolling stops before the entire content has revealed (see the bottom of the screen).

Example screenshot of an Android Nexus 5 (with soft bottom navigation bar):

Example screenshot of an iPhone 7 (without soft bottom navigation bar):

My question is: How can I detect the soft navigation bar's height (if existent) so that I can add it to the grid's bottom padding?

Solution

Answer:

We can use the global screen object, in order to get the dimensions of the entire screen, and the normal platform.height() to get the dimensions if the window (without the soft navigation bar's height).

Sample method:

/**
   * On some Android devices there is a soft navigation bar,
   * which overlaps with the screen.
   * For that reason, we need to compute an extra space for
   * the drawer so that the items in the last
   * row are not shown "behind" the navigation bar
   * @returns {number} the difference in pixels.
   */
  getMarginBottomPropertyForDrawer() {
    const difference = screen.height - this.platform.height();
    return difference;
  }

Answered By - Paul Isaris