From 4bcd7d8d6b5793cb6dbc46a388f0beea1567cd61 Mon Sep 17 00:00:00 2001
From: GCyganek <gabrielcyganek@gmail.com>
Date: Fri, 10 Apr 2026 18:30:33 +0200
Subject: [PATCH 1/2] Fix Page scrolls to the top after switching to landscape
 mode & entering number

---
 src/components/NumberWithSymbolForm.tsx       | 61 +++++++++++++++++++
 .../implementation/index.native.tsx           |  5 +-
 .../TextInput/BaseTextInput/types.ts          |  3 +
 src/components/TextInputWithSymbol/types.ts   |  1 +
 src/styles/index.ts                           |  4 ++
 5 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/src/components/NumberWithSymbolForm.tsx b/src/components/NumberWithSymbolForm.tsx
index 92e0ff380c3c..77213f81aa61 100644
--- a/src/components/NumberWithSymbolForm.tsx
+++ b/src/components/NumberWithSymbolForm.tsx
@@ -3,6 +3,7 @@ import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {KeyboardTypeOptions, NativeSyntheticEvent} from 'react-native';
 import {View} from 'react-native';
+import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import {useMouseActions} from '@hooks/useMouseContext';
@@ -176,6 +177,7 @@ function NumberWithSymbolForm({
     ...props
 }: NumberWithSymbolFormProps) {
     const icons = useMemoizedLazyExpensifyIcons(['DownArrow', 'PlusMinus']);
+    const isInLandscapeMode = useIsInLandscapeMode();
 
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -546,9 +548,68 @@ function NumberWithSymbolForm({
             onFocus={props.onFocus}
             accessibilityLabel={props.accessibilityLabel}
             keyboardType={props.keyboardType}
+            shouldAllowFocusInLandscapeMode
         />
     );
 
+    if (isInLandscapeMode) {
+        return (
+            <>
+                <ScrollView
+                    contentContainerStyle={[styles.flexGrow1, styles.flexRow]}
+                    style={[styles.flexGrow0]}
+                >
+                    <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.numberWithSymbolFormInputContainerLandscape]}>
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>
+                        <View style={[styles.flexRow, styles.justifyContentCenter, styles.gap2]}>
+                            {isSymbolPressable && (
+                                <Button
+                                    shouldShowRightIcon
+                                    small
+                                    iconRight={icons.DownArrow}
+                                    onPress={onSymbolButtonPress}
+                                    style={styles.minWidth18}
+                                    isContentCentered
+                                    text={currency}
+                                    accessibilityLabel={`${translate('common.selectCurrency')}, ${currency}`}
+                                />
+                            )}
+                            {allowFlippingAmount && (
+                                <Button
+                                    shouldShowRightIcon
+                                    small
+                                    iconRight={icons.PlusMinus}
+                                    onPress={toggleNegative}
+                                    style={styles.minWidth18}
+                                    isContentCentered
+                                    text={translate('iou.flip')}
+                                    accessibilityLabel={translate('iou.flip')}
+                                />
+                            )}
+                        </View>
+                    </View>
+
+                    {shouldShowBigNumberPad ? (
+                        <View
+                            style={[styles.flex1]}
+                            id={NUM_PAD_CONTAINER_VIEW_ID}
+                        >
+                            {shouldShowBigNumberPad ? (
+                                <BigNumberPad
+                                    id={NUM_PAD_VIEW_ID}
+                                    numberPressed={updateValueNumberPad}
+                                    longPressHandlerStateChanged={updateLongPressHandlerState}
+                                />
+                            ) : null}
+                        </View>
+                    ) : null}
+                </ScrollView>
+
+                {!!footer && <View style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper, styles.pt0]}>{footer}</View>}
+            </>
+        );
+    }
+
     return (
         <ScrollView
             contentContainerStyle={styles.flexGrow1}
diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
index 9d278ad425d3..d223776e6ca5 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
@@ -84,6 +84,7 @@ function BaseTextInput({
     ref,
     sentryLabel,
     rightHandSideComponent,
+    shouldAllowFocusInLandscapeMode = false,
     ...props
 }: BaseTextInputProps) {
     const InputComponent = InputComponentMap.get(type) ?? RNTextInput;
@@ -374,7 +375,7 @@ function BaseTextInput({
                             )}
                             <InputComponent
                                 ref={(element: BaseTextInputRef | null): void => {
-                                    const baseTextInputRef = isInLandscapeMode ? getLandscapeTextInputRefProxy(element) : element;
+                                    const baseTextInputRef = isInLandscapeMode && !shouldAllowFocusInLandscapeMode ? getLandscapeTextInputRefProxy(element) : element;
 
                                     if (typeof ref === 'function') {
                                         ref(baseTextInputRef);
@@ -388,7 +389,7 @@ function BaseTextInput({
                                 }}
                                 // eslint-disable-next-line
                                 {...inputProps}
-                                autoFocus={isInLandscapeMode ? false : inputProps.autoFocus}
+                                autoFocus={isInLandscapeMode && !shouldAllowFocusInLandscapeMode ? false : inputProps.autoFocus}
                                 accessibilityLabel={inputProps.accessibilityLabel ?? accessibilityLabel}
                                 accessibilityValue={accessibilityValue}
                                 accessibilityHint={errorText || inputProps.accessibilityHint}
diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts
index 427394a728e5..bf3e11a4c4c4 100644
--- a/src/components/TextInput/BaseTextInput/types.ts
+++ b/src/components/TextInput/BaseTextInput/types.ts
@@ -208,6 +208,9 @@ type CustomBaseTextInputProps = ForwardedFSClassProps &
         navigation?: Omit<NavigationProp<ReactNavigation.RootParamList>, 'getState'> & {
             getState(): NavigationState | undefined;
         };
+
+        /** Whether the input should be allowed to be focused in landscape mode */
+        shouldAllowFocusInLandscapeMode?: boolean;
     };
 
 type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;
diff --git a/src/components/TextInputWithSymbol/types.ts b/src/components/TextInputWithSymbol/types.ts
index e8ad3957f558..6f5dc80cb359 100644
--- a/src/components/TextInputWithSymbol/types.ts
+++ b/src/components/TextInputWithSymbol/types.ts
@@ -110,6 +110,7 @@ type BaseTextInputWithSymbolProps = {
     | 'disabled'
     | 'ref'
     | 'accessibilityLabel'
+    | 'shouldAllowFocusInLandscapeMode'
 >;
 
 type TextInputWithSymbolProps = Omit<BaseTextInputWithSymbolProps, 'onSelectionChange'> & {
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 92b007e95afd..35438aefd161 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2807,6 +2807,10 @@ const staticStyles = (theme: ThemeColors) =>
             paddingHorizontal: 20,
         },
 
+        numberWithSymbolFormInputContainerLandscape: {
+            width: 400,
+        },
+
         avatarSectionWrapper: {
             width: '100%',
             alignItems: 'center',

From cb22214ca06f236024036f4605a3315a933b3647 Mon Sep 17 00:00:00 2001
From: GCyganek <gabrielcyganek@gmail.com>
Date: Mon, 13 Apr 2026 10:00:59 +0200
Subject: [PATCH 2/2] Restore input errro in landscape mode and make number
 buttons smaller

---
 src/components/BigNumberPad.tsx         | 11 ++++++-----
 src/components/NumberWithSymbolForm.tsx | 11 +++++++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx
index 262f07f44f6b..efce3c12ae2a 100644
--- a/src/components/BigNumberPad.tsx
+++ b/src/components/BigNumberPad.tsx
@@ -34,7 +34,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
 
     const styles = useThemeStyles();
     const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
-    const {isExtraSmallScreenHeight} = useResponsiveLayout();
+    const {isExtraSmallScreenHeight, isInLandscapeMode} = useResponsiveLayout();
     const numberPressedRef = useRef(numberPressed);
 
     useEffect(() => {
@@ -64,10 +64,10 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
             style={[styles.flexColumn, styles.w100]}
             id={id}
         >
-            {padNumbers.map((row) => (
+            {padNumbers.map((row, index) => (
                 <View
                     key={`NumberPadRow-${row[0]}`}
-                    style={[styles.flexRow, styles.mt3]}
+                    style={[styles.flexRow, index === 0 && isInLandscapeMode ? undefined : styles.mt3]}
                 >
                     {row.map((column, columnIndex) => {
                         // Adding margin between buttons except first column to
@@ -77,8 +77,9 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
                         return (
                             <Button
                                 key={column}
-                                medium={isExtraSmallScreenHeight}
-                                large={!isExtraSmallScreenHeight}
+                                small={isInLandscapeMode}
+                                medium={isExtraSmallScreenHeight && !isInLandscapeMode}
+                                large={!isExtraSmallScreenHeight && !isInLandscapeMode}
                                 shouldEnableHapticFeedback
                                 style={[styles.flex1, marginLeft]}
                                 text={column === '<' ? undefined : toLocaleDigit(column)}
diff --git a/src/components/NumberWithSymbolForm.tsx b/src/components/NumberWithSymbolForm.tsx
index 77213f81aa61..ea98e9f9f042 100644
--- a/src/components/NumberWithSymbolForm.tsx
+++ b/src/components/NumberWithSymbolForm.tsx
@@ -557,7 +557,7 @@ function NumberWithSymbolForm({
             <>
                 <ScrollView
                     contentContainerStyle={[styles.flexGrow1, styles.flexRow]}
-                    style={[styles.flexGrow0]}
+                    style={[styles.flex1, styles.ph5]}
                 >
                     <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.numberWithSymbolFormInputContainerLandscape]}>
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>
@@ -587,11 +587,18 @@ function NumberWithSymbolForm({
                                 />
                             )}
                         </View>
+                        {!!errorText && (
+                            <FormHelpMessage
+                                style={[styles.ph5, styles.w100]}
+                                isError
+                                message={errorText}
+                            />
+                        )}
                     </View>
 
                     {shouldShowBigNumberPad ? (
                         <View
-                            style={[styles.flex1]}
+                            style={[styles.flex1, styles.justifyContentCenter]}
                             id={NUM_PAD_CONTAINER_VIEW_ID}
                         >
                             {shouldShowBigNumberPad ? (