diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx
index e857f9afda..4cfee1c9c2 100644
--- a/core/src/components/footer/footer.tsx
+++ b/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,18 +53,28 @@ export class Footer implements ComponentInterface {
   }
 
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the footer
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
+    const resizeMode = await Keyboard.getResizeMode();
 
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    /**
+     * 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
+         * for the webview to resize. Otherwise, the footer
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
 
   disconnectedCallback() {
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
index 7dea85e741..8bf7f811fd 100644
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/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,18 +71,28 @@ export class TabBar implements ComponentInterface {
   }
 
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the tab bar
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
+    const resizeMode = await Keyboard.getResizeMode();
 
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    /**
+     * 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
+         * for the webview to resize. Otherwise, the tab bar
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
 
   disconnectedCallback() {
diff --git a/core/src/utils/keyboard/keyboard-controller.ts b/core/src/utils/keyboard/keyboard-controller.ts
index 2cf0c19d34..776cf116f3 100644
--- a/core/src/utils/keyboard/keyboard-controller.ts
+++ b/core/src/utils/keyboard/keyboard-controller.ts
@@ -1,6 +1,5 @@
 import { doc, win } from '@utils/browser';
-
-import { Keyboard, KeyboardResize } from '../native/keyboard';
+import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
 
 /**
  * The element that resizes when the keyboard opens