fix(footer, tab-bar): do not hide when webview resizing disabled

core/src/components/footer/footer.tsx

@@ -3,6 +3,7 @@ import { Component, Element, Host, Prop, State, h } from '@stencil/core';
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
 import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
 import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
+import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
 
 import { getIonMode } from '../../global/ionic-global';
 
@@ -52,6 +53,15 @@ export class Footer implements ComponentInterface {
   }
 
   async connectedCallback() {
+    const resizeMode = await Keyboard.getResizeMode();
+
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
       this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
         /**
          * If the keyboard is hiding, then we need to wait
@@ -65,6 +75,7 @@ export class Footer implements ComponentInterface {
         this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
       });
     }
+  }
 
   disconnectedCallback() {
     if (this.keyboardCtrl) {

core/src/components/tab-bar/tab-bar.tsx

@@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
 import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
+import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
 import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -70,6 +71,15 @@ export class TabBar implements ComponentInterface {
   }
 
   async connectedCallback() {
+    const resizeMode = await Keyboard.getResizeMode();
+
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
       this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
         /**
          * If the keyboard is hiding, then we need to wait
@@ -83,6 +93,7 @@ export class TabBar implements ComponentInterface {
         this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
       });
     }
+  }
 
   disconnectedCallback() {
     if (this.keyboardCtrl) {

core/src/utils/keyboard/keyboard-controller.ts

@@ -1,6 +1,5 @@
 import { doc, win } from '@utils/browser';
-
+import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
-import { Keyboard, KeyboardResize } from '../native/keyboard';
 
 /**
  * The element that resizes when the keyboard opens