Merge pull request #24097 from s77rt/no-nested-screenwrappers

[CP Staging] MoneyRequest: use ScreenWrapper only if editing
Expensify · Aug 3, 2023 · 0aaed18 · 0aaed18
2 parents 4bcb2d6 + 08bbe41
commit 0aaed18
Showing 1 changed file with 70 additions and 60 deletions.
diff --git a/src/pages/iou/steps/MoneyRequestAmount.js b/src/pages/iou/steps/MoneyRequestAmount.js
@@ -419,69 +419,79 @@ function MoneyRequestAmount(props) {
     const formattedAmount = replaceAllDigits(amount, toLocaleDigit);
     const buttonText = isEditing.current ? translate('common.save') : translate('common.next');
 
-    return (
-        <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType.current)}>
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                onEntryTransitionEnd={focusTextInput}
+    const content = (
+        <>
+            <View
+                nativeID={amountViewID}
+                onMouseDown={(event) => onMouseDown(event, [amountViewID])}
+                style={[styles.flex1, styles.flexRow, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}
+            >
+                <TextInputWithCurrencySymbol
+                    formattedAmount={formattedAmount}
+                    onChangeAmount={updateAmount}
+                    onCurrencyButtonPress={navigateToCurrencySelectionPage}
+                    placeholder={numberFormat(0)}
+                    ref={(el) => (textInput.current = el)}
+                    selectedCurrencyCode={selectedCurrencyCode}
+                    selection={selection}
+                    onSelectionChange={(e) => {
+                        if (!shouldUpdateSelection) {
+                            return;
+                        }
+                        setSelection(e.nativeEvent.selection);
+                    }}
+                />
+            </View>
+            <View
+                onMouseDown={(event) => onMouseDown(event, [numPadContainerViewID, numPadViewID])}
+                style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper]}
+                nativeID={numPadContainerViewID}
             >
-                {({safeAreaPaddingBottomStyle}) => (
+                {DeviceCapabilities.canUseTouchScreen() ? (
+                    <BigNumberPad
+                        nativeID={numPadViewID}
+                        numberPressed={updateAmountNumberPad}
+                        longPressHandlerStateChanged={updateLongPressHandlerState}
+                    />
+                ) : (
+                    <View />
+                )}
+
+                <Button
+                    success
+                    style={[styles.w100, styles.mt5]}
+                    onPress={navigateToNextPage}
+                    pressOnEnter
+                    isDisabled={!amount.length || parseFloat(amount) < 0.01}
+                    text={buttonText}
+                />
+            </View>
+        </>
+    );
+
+    // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage).
+    // The rest of the cases this component is rendered through <MoneyRequestSelectorPage /> which has it's own ScreenWrapper
+    if (!isEditing.current) {
+        return content;
+    }
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            onEntryTransitionEnd={focusTextInput}
+        >
+            {({safeAreaPaddingBottomStyle}) => (
+                <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType.current)}>
                     <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
-                        {isEditing.current && (
-                            <HeaderWithBackButton
-                                title={titleForStep}
-                                onBackButtonPress={navigateBack}
-                            />
-                        )}
-                        <View
-                            nativeID={amountViewID}
-                            onMouseDown={(event) => onMouseDown(event, [amountViewID])}
-                            style={[styles.flex1, styles.flexRow, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}
-                        >
-                            <TextInputWithCurrencySymbol
-                                formattedAmount={formattedAmount}
-                                onChangeAmount={updateAmount}
-                                onCurrencyButtonPress={navigateToCurrencySelectionPage}
-                                placeholder={numberFormat(0)}
-                                ref={(el) => (textInput.current = el)}
-                                selectedCurrencyCode={selectedCurrencyCode}
-                                selection={selection}
-                                onSelectionChange={(e) => {
-                                    if (!shouldUpdateSelection) {
-                                        return;
-                                    }
-                                    setSelection(e.nativeEvent.selection);
-                                }}
-                            />
-                        </View>
-                        <View
-                            onMouseDown={(event) => onMouseDown(event, [numPadContainerViewID, numPadViewID])}
-                            style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper]}
-                            nativeID={numPadContainerViewID}
-                        >
-                            {DeviceCapabilities.canUseTouchScreen() ? (
-                                <BigNumberPad
-                                    nativeID={numPadViewID}
-                                    numberPressed={updateAmountNumberPad}
-                                    longPressHandlerStateChanged={updateLongPressHandlerState}
-                                />
-                            ) : (
-                                <View />
-                            )}
-
-                            <Button
-                                success
-                                style={[styles.w100, styles.mt5]}
-                                onPress={navigateToNextPage}
-                                pressOnEnter
-                                isDisabled={!amount.length || parseFloat(amount) < 0.01}
-                                text={buttonText}
-                            />
-                        </View>
+                        <HeaderWithBackButton
+                            title={titleForStep}
+                            onBackButtonPress={navigateBack}
+                        />
+                        {content}
                     </View>
-                )}
-            </ScreenWrapper>
-        </FullPageNotFoundView>
+                </FullPageNotFoundView>
+            )}
+        </ScreenWrapper>
     );
 }