From 765cd32d2771b56c24457249782661ab3e9a4d6e Mon Sep 17 00:00:00 2001 From: dmkt9 Date: Fri, 28 Nov 2025 21:35:38 +0700 Subject: [PATCH 1/3] Fix - Empty space instead of keyboard if backgrounding app while creating expense --- src/components/AmountTextInput.tsx | 4 ++++ src/components/TextInput/BaseTextInput/types.ts | 5 +++++ src/components/TextInput/index.native.tsx | 11 ++++++++--- 3 files changed, 17 insertions(+), 3 deletions(-) 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 ( diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 2ba74a24ce47..c731c1419741 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,10 @@ type CustomBaseTextInputProps = ForwardedFSClassProps & { /** Reference to the outer element */ ref?: ForwardedRef; + + navigation?: Omit, '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 ( Date: Fri, 5 Dec 2025 15:13:18 +0700 Subject: [PATCH 2/3] Fix - Empty space instead of keyboard if backgrounding app while creating expense --- src/components/TextInput/BaseTextInput/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index c731c1419741..9ea98da54031 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -196,6 +196,7 @@ type CustomBaseTextInputProps = ForwardedFSClassProps & { /** Reference to the outer element */ ref?: ForwardedRef; + /** 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 backgrounded */ navigation?: Omit, 'getState'> & { getState(): NavigationState | undefined; }; From eaec67c78da6560edf2b51fb5fee1b157b971a95 Mon Sep 17 00:00:00 2001 From: dmkt9 Date: Fri, 5 Dec 2025 15:25:21 +0700 Subject: [PATCH 3/3] Fix - Empty space instead of keyboard if backgrounding app while creating expense --- src/components/TextInput/BaseTextInput/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 9ea98da54031..7795345cf6b2 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -196,7 +196,7 @@ type CustomBaseTextInputProps = ForwardedFSClassProps & { /** Reference to the outer element */ ref?: ForwardedRef; - /** 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 backgrounded */ + /** 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, 'getState'> & { getState(): NavigationState | undefined; };