[$250] Native: keep custom amount numpad fixed when currency search shows system keyboard

[mountiny]

Problem

On iOS/Android, on the money request amount step, opening the currency picker and focusing search shows the native keyboard. Keyboard-avoiding layout on the amount screen shifts the custom numpad above the keyboard; when the picker closes, the numpad jumps back.

Expected

The custom numpad stays in its normal bottom position (the system keyboard may overlay it during search). No visible jump when opening or closing the currency picker.

Repro

1. Start money request → amount step.
2. Open currency picker → focus search (native keyboard).
3. See numpad move up; dismiss picker and see it snap back.

Implementation hints

• src/pages/iou/request/step/IOURequestStepAmount.tsx
• src/pages/iou/request/step/StepScreenWrapper.tsx (shouldEnableKeyboardAvoidingView)
• src/pages/iou/MoneyRequestAmountForm.tsx / BigNumberPad

Also check other screens that combine MoneyRequestAmountForm + currency modal. Validate on small devices after any change.

Issue Owner

Current Issue Owner: @aimane-chnaif

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022048705268686200789
• Upwork Job ID: 2048705268686200789
• Last Price Increase: 2026-04-27
• Automatic offers:
• aimane-chnaif | Reviewer | 111264413

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)

[wildan-m]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On native (iOS/Android), starting a money request and going to the amount step, then opening the currency picker and focusing its search field causes the system keyboard to appear. Because the amount screen has keyboard avoidance enabled, the custom BigNumberPad (numpad) shifts upward to sit above the system keyboard. When the picker is dismissed, the keyboard hides and the numpad snaps back to its original position. The expected behavior is for the numpad to stay anchored at the bottom of the amount screen the entire time — the system keyboard from the currency search may overlay it, but no visible jump should occur on open or close.

What is the root cause of that problem?

IOURequestStepAmount wraps its content in StepScreenWrapper, and StepScreenWrapper enables a KeyboardAvoidingView by default (the shouldEnableKeyboardAvoidingView prop defaults to true):

App/src/pages/iou/request/step/StepScreenWrapper.tsx

Lines 40 to 70 in 79fffbd

	/** Flag to indicate if the keyboard avoiding view should be enabled */
	shouldEnableKeyboardAvoidingView?: boolean;
	};
	function StepScreenWrapper({
	testID,
	headerTitle,
	onBackButtonPress,
	onEntryTransitionEnd,
	children,
	shouldShowWrapper,
	shouldShowNotFoundPage,
	includeSafeAreaPaddingBottom,
	shouldShowOfflineIndicator = true,
	shouldEnableKeyboardAvoidingView = true,
	}: StepScreenWrapperProps) {
	const styles = useThemeStyles();
	if (!shouldShowWrapper) {
	return <FullPageNotFoundView shouldShow={shouldShowNotFoundPage}>{children as ReactNode}</FullPageNotFoundView>;
	}
	return (
	<ScreenWrapper
	includeSafeAreaPaddingBottom={includeSafeAreaPaddingBottom}
	onEntryTransitionEnd={onEntryTransitionEnd}
	testID={testID}
	shouldEnableMaxHeight={canUseTouchScreen()}
	shouldShowOfflineIndicator={shouldShowOfflineIndicator}
	shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}
	>

The amount step renders the currency picker as a RIGHT_DOCKED Modal inside this wrapper:

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Lines 464 to 500 in 79fffbd

	return (
	<StepScreenWrapper
	headerTitle={translate('iou.amount')}
	onBackButtonPress={navigateBack}
	testID="IOURequestStepAmount"
	shouldShowWrapper={!!backTo || isEditing}
	includeSafeAreaPaddingBottom
	shouldShowNotFoundPage={shouldShowNotFoundPage}
	>
	<IOURequestStepCurrencyModal
	isPickerVisible={isCurrencyPickerVisible}
	hidePickerModal={hideCurrencyPicker}
	headerText={translate('common.selectCurrency')}
	value={selectedCurrency}
	onInputChange={updateSelectedCurrency}
	/>
	<MoneyRequestAmountForm
	isEditing={!!backTo || isEditing}
	currency={selectedCurrency}
	amount={transactionAmount}
	skipConfirmation={shouldSkipConfirmation ?? false}
	iouType={iouType}
	policyID={policy?.id}
	ref={(e: BaseTextInputRef | null) => {
	textInput.current = e;
	}}
	shouldKeepUserInput={transaction?.shouldShowOriginalAmount}
	onCurrencyButtonPress={showCurrencyPicker}
	onSubmitButtonPress={saveAmountAndCurrency}
	allowFlippingAmount={!isSplitBill && allowNegative}
	selectedTab={iouRequestType as SelectedTabRequest}
	chatReportID={reportID}
	isP2P={isParticipantP2P(getMoneyRequestParticipantsFromReport(chatReportForP2PCheck, currentUserPersonalDetails.accountID).at(0))}
	isCurrencyPressable={!isUnreportedDistanceExpense}
	/>
	</StepScreenWrapper>
	);

React Native's KeyboardAvoidingView listens to OS-level keyboardWillShow / keyboardDidShow events. Those events are global — they fire regardless of which view in the tree contains the input that triggered the keyboard. So when the user focuses the search field inside the currency picker modal, the parent KeyboardAvoidingView on the amount screen still reacts and moves its content (which includes the BigNumberPad) upward by the keyboard height. The amount screen itself is hidden behind the picker modal, but as soon as the picker is dismissed, the previous frame is revealed and the numpad is visibly above its normal position; then the keyboard hides, the avoidance is reversed, and the numpad snaps back down. The combined effect is the "jumping numpad" the issue describes.

The amount screen has no input that requires keyboard avoidance on touch devices in the first place — MoneyRequestAmountForm uses BigNumberPad (the custom numpad) when canUseTouchScreen is true, so the system keyboard is never expected to be shown for the amount field on native:

App/src/pages/iou/MoneyRequestAmountForm.tsx

Lines 269 to 300 in 79fffbd

	return (
	<ScrollView contentContainerStyle={styles.flexGrow1}>
	<MoneyRequestAmountInput
	amount={amount}
	autoGrowExtraSpace={variables.w80}
	hideCurrencySymbol={hideCurrencySymbol}
	currency={currency}
	shouldUseDynamicFontSize
	isCurrencyPressable={isCurrencyPressable}
	onCurrencyButtonPress={onCurrencyButtonPress}
	onFormatAmount={onFormatAmount}
	onAmountChange={() => {
	if (!formError) {
	return;
	}
	setFormError('');
	}}
	shouldShowBigNumberPad={canUseTouchScreen}
	ref={(newRef) => {
	if (typeof ref === 'function') {
	ref(newRef);
	} else if (ref && 'current' in ref) {
	// eslint-disable-next-line no-param-reassign
	ref.current = newRef;
	}
	textInput.current = newRef;
	}}
	moneyRequestAmountInputRef={moneyRequestAmountInputRef}
	shouldKeepUserInput={shouldKeepUserInput}
	inputStyle={styles.iouAmountTextInput}
	containerStyle={styles.iouAmountTextInputContainer}
	touchableInputWrapperStyle={styles.heightUndefined}

So the parent KeyboardAvoidingView is doing nothing useful for the amount input itself; it only ends up reacting to the unrelated keyboard from the currency search field, which is the bug.

What changes do you think we should make in order to solve the problem?

In IOURequestStepAmount.tsx, pass shouldEnableKeyboardAvoidingView={!isCurrencyPickerVisible} to the StepScreenWrapper. While the currency picker is visible, the parent's KeyboardAvoidingView is disabled, so the system keyboard from the search field no longer pushes the numpad above its normal bottom position. When the picker is dismissed, isCurrencyPickerVisible flips back to false, the avoiding view re-enables, and the layout is unchanged because there is no keyboard up at that point.

The state we need is already declared in this file:

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Line 86 in 79fffbd

const [isCurrencyPickerVisible, setIsCurrencyPickerVisible] = useState(false);

so the change is a single new prop on the existing StepScreenWrapper element — no new state, no new effects, no other files touched.

Compare: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/88913-amount-numpad-jump-currency-picker?expand=1

This is safe for the other callers of StepScreenWrapper because we are only narrowing the prop on one specific screen; every other consumer keeps the default of true. Of the other screens that combine MoneyRequestAmountForm with StepScreenWrapper:

• IOURequestStepTaxAmountPage and IOURequestStepTimeRate both pass isCurrencyPressable={false}, so the currency picker cannot be opened from those screens and they are not affected by this bug.
• SearchEditMultipleAmountPage uses ScreenWrapper directly (not StepScreenWrapper) and also sets isCurrencyPressable={false}, so it is unaffected as well.

Therefore the single-screen change is sufficient.

What alternative solutions did you explore? (Optional)

I considered disabling the keyboard avoidance unconditionally on IOURequestStepAmount (since the amount input on touch devices uses BigNumberPad and never raises the system keyboard). That would also fix the reported jump, but it is a wider behavioral change than necessary and would also affect web/desktop layouts where canUseTouchScreen is false and MoneyRequestAmountInput falls back to a regular text input — in that environment the parent KeyboardAvoidingView may still serve a purpose. Gating the prop on isCurrencyPickerVisible keeps the existing default behavior in every state except the one where the bug manifests, which is the smallest correct change.

I also considered handling this inside IOURequestStepCurrencyModal (for example, dismissing the keyboard in onModalHide, or wrapping the modal's ScreenWrapper differently). The issue is not the modal's own keyboard avoidance — it is the parent screen's avoidance reacting to the modal's keyboard event. Adjusting the modal would not stop the parent from receiving the global keyboard show/hide events, so it would not address the root cause.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022048705268686200789

[MelvinBot]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On iOS/Android, the money request amount screen uses a custom BigNumberPad instead of the system keyboard. When the user opens the currency picker and focuses its search field, the system keyboard appears. The parent KeyboardAvoidingView reacts to this global keyboard event and pushes the numpad upward. When the picker is dismissed, the numpad snaps back down, causing a visible jump.

What is the root cause of that problem?

StepScreenWrapper defaults shouldEnableKeyboardAvoidingView to true. IOURequestStepAmount does not override this prop. On mobile, the amount input uses BigNumberPad (not a system text input), so the KeyboardAvoidingView serves no purpose for the amount field itself. However, when the currency picker modal opens and the user focuses its search field, React Native's KeyboardAvoidingView still reacts to the global keyboardWillShow event and shifts the underlying content — including the numpad — upward.

What changes do you think we should make in order to solve the problem?

Pass shouldEnableKeyboardAvoidingView={!isCurrencyPickerVisible} to StepScreenWrapper in IOURequestStepAmount.tsx. The isCurrencyPickerVisible state already exists. This disables the KeyboardAvoidingView only while the currency picker is open, preventing the numpad from reacting to the modal's keyboard. No new state, no new effects, one prop addition.

Other screens using MoneyRequestAmountForm are unaffected — both IOURequestStepTaxAmountPage and IOURequestStepTimeRate set isCurrencyPressable={false}, so the currency picker cannot be opened from those screens.

What alternative solutions did you explore? (Optional)

Disabling shouldEnableKeyboardAvoidingView unconditionally on the amount screen would also fix the jump but would break web/desktop where MoneyRequestAmountForm falls back to a regular text input that does need keyboard avoidance. Gating on isCurrencyPickerVisible is the minimal correct change.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[wildan-m]

Proposal updated — added compare branch with implementation.

[15antonian]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.