diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx
index 3db23eb636b9..ee73d503f12e 100644
--- a/src/components/AmountTextInput.tsx
+++ b/src/components/AmountTextInput.tsx
@@ -1,3 +1,4 @@
+import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputKeyPressEvent, TextInputSelectionChangeEvent, TextStyle, ViewStyle} from 'react-native';
 import CONST from '@src/CONST';
@@ -59,6 +60,8 @@ function AmountTextInput({
     ref,
     ...rest
 }: AmountTextInputProps) {
+    const navigation = useNavigation();
+
     return (
         <TextInput
             autoGrow
@@ -88,6 +91,7 @@ function AmountTextInput({
             disableKeyboardShortcuts
             shouldUseFullInputHeight
             shouldApplyPaddingToContainer={shouldApplyPaddingToContainer}
+            navigation={navigation}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
         />
diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts
index 2ba74a24ce47..7795345cf6b2 100644
--- a/src/components/TextInput/BaseTextInput/types.ts
+++ b/src/components/TextInput/BaseTextInput/types.ts
@@ -1,4 +1,5 @@
 import type {MarkdownRange, MarkdownStyle} from '@expensify/react-native-live-markdown';
+import type {NavigationProp, NavigationState} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
 import type {GestureResponderEvent, StyleProp, TextInputProps, TextStyle, ViewStyle} from 'react-native';
 import type {MaskedTextInputOwnProps} from 'react-native-advanced-input-mask/lib/typescript/src/types';
@@ -194,6 +195,11 @@ type CustomBaseTextInputProps = ForwardedFSClassProps & {
 
     /** Reference to the outer element */
     ref?: ForwardedRef<BaseTextInputRef>;
+
+    /** When the `disableKeyboard` prop is passed with the value `true`, we need to pass the `navigation` prop from `useNavigation` to ensure that the `disableKeyboard` functionality works correctly when the application is in the background */
+    navigation?: Omit<NavigationProp<ReactNavigation.RootParamList>, 'getState'> & {
+        getState(): NavigationState | undefined;
+    };
 };
 
 type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;
diff --git a/src/components/TextInput/index.native.tsx b/src/components/TextInput/index.native.tsx
index a2740a8eafb7..2515c170068f 100644
--- a/src/components/TextInput/index.native.tsx
+++ b/src/components/TextInput/index.native.tsx
@@ -1,10 +1,11 @@
 import React, {useEffect} from 'react';
 import {AppState, Keyboard} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Log from '@libs/Log';
 import BaseTextInput from './BaseTextInput';
 import type {BaseTextInputProps} from './BaseTextInput/types';
 
-function TextInput({ref, ...props}: BaseTextInputProps) {
+function TextInput({ref, navigation, ...props}: BaseTextInputProps) {
     const styles = useThemeStyles();
 
     useEffect(() => {
@@ -12,8 +13,12 @@ function TextInput({ref, ...props}: BaseTextInputProps) {
             return;
         }
 
+        if (!navigation) {
+            Log.warn('disableKeyboard is enabled, but "navigation" isn\'t passed to the TextInput component!');
+        }
+
         const appStateSubscription = AppState.addEventListener('change', (nextAppState) => {
-            if (!nextAppState.match(/inactive|background/)) {
+            if (!nextAppState.match(/inactive|background/) || (navigation && !navigation.isFocused())) {
                 return;
             }
 
@@ -23,7 +28,7 @@ function TextInput({ref, ...props}: BaseTextInputProps) {
         return () => {
             appStateSubscription.remove();
         };
-    }, [props.disableKeyboard]);
+    }, [props.disableKeyboard, navigation]);
 
     return (
         <BaseTextInput