From 1434d0a56efff650133a7d0ff7fa83617ab65b88 Mon Sep 17 00:00:00 2001
From: Danut Gavrus <danut.gavrus@gmail.com>
Date: Tue, 5 Sep 2023 16:40:55 +0300
Subject: [PATCH] [26737] Made sure that the sections from the request money
 are scrollable.

---
 src/components/DistanceRequest.js             |  4 +-
 src/pages/iou/MoneyRequestSelectorPage.js     | 64 ++++++++++---------
 src/pages/iou/steps/MoneyRequestAmountForm.js |  6 +-
 3 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index efaf4263956..f3b1dcd94cf 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -163,7 +163,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
     useEffect(updateGradientVisibility, [scrollContainerHeight, scrollContentHeight]);
 
     return (
-        <ScrollView contentContainerStyle={styles.flex1}>
+        <>
             <View
                 style={styles.distanceRequestContainer(scrollContainerMaxHeight)}
                 onLayout={(event = {}) => setScrollContainerHeight(lodashGet(event, 'nativeEvent.layout.height', 0))}
@@ -266,7 +266,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                 isDisabled={_.size(validatedWaypoints) < 2}
                 text={translate('common.next')}
             />
-        </ScrollView>
+        </>
     );
 }
 
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 2a2f3674cdf..3476cffdf14 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -1,5 +1,5 @@
 import {withOnyx} from 'react-native-onyx';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import React from 'react';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
@@ -79,39 +79,41 @@ function MoneyRequestSelectorPage(props) {
                                 title={title[iouType]}
                                 onBackButtonPress={Navigation.dismissModal}
                             />
-                            {iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? (
-                                <OnyxTabNavigator
-                                    id={CONST.TAB.RECEIPT_TAB_ID}
-                                    tabBar={({state, navigation, position}) => (
-                                        <TabSelector
-                                            state={state}
-                                            navigation={navigation}
-                                            onTabPress={resetMoneyRequestInfo}
-                                            position={position}
-                                        />
-                                    )}
-                                >
-                                    <TopTab.Screen
-                                        name={CONST.TAB.MANUAL}
-                                        component={NewRequestAmountPage}
-                                        initialParams={{reportID, iouType}}
-                                    />
-                                    <TopTab.Screen
-                                        name={CONST.TAB.SCAN}
-                                        component={ReceiptSelector}
-                                        initialParams={{reportID, iouType, pageIndex: 1}}
-                                    />
-                                    {shouldDisplayDistanceRequest && (
+                            <ScrollView contentContainerStyle={[styles.flexGrow1]}>
+                                {iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? (
+                                    <OnyxTabNavigator
+                                        id={CONST.TAB.RECEIPT_TAB_ID}
+                                        tabBar={({state, navigation, position}) => (
+                                            <TabSelector
+                                                state={state}
+                                                navigation={navigation}
+                                                onTabPress={resetMoneyRequestInfo}
+                                                position={position}
+                                            />
+                                        )}
+                                    >
                                         <TopTab.Screen
-                                            name={CONST.TAB.DISTANCE}
-                                            component={DistanceRequestPage}
+                                            name={CONST.TAB.MANUAL}
+                                            component={NewRequestAmountPage}
                                             initialParams={{reportID, iouType}}
                                         />
-                                    )}
-                                </OnyxTabNavigator>
-                            ) : (
-                                <NewRequestAmountPage route={props.route} />
-                            )}
+                                        <TopTab.Screen
+                                            name={CONST.TAB.SCAN}
+                                            component={ReceiptSelector}
+                                            initialParams={{reportID, iouType, pageIndex: 1}}
+                                        />
+                                        {shouldDisplayDistanceRequest && (
+                                            <TopTab.Screen
+                                                name={CONST.TAB.DISTANCE}
+                                                component={DistanceRequestPage}
+                                                initialParams={{reportID, iouType}}
+                                            />
+                                        )}
+                                    </OnyxTabNavigator>
+                                ) : (
+                                    <NewRequestAmountPage route={props.route} />
+                                )}
+                            </ScrollView>
                         </View>
                     </DragAndDropProvider>
                 </FullPageNotFoundView>
diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js
index 1ea0b002b23..1d7444397c0 100644
--- a/src/pages/iou/steps/MoneyRequestAmountForm.js
+++ b/src/pages/iou/steps/MoneyRequestAmountForm.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useState, useCallback, useRef} from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import _ from 'underscore';
@@ -200,7 +200,7 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
     const buttonText = isEditing ? translate('common.save') : translate('common.next');
 
     return (
-        <ScrollView contentContainerStyle={styles.flexGrow1}>
+        <>
             <View
                 nativeID={AMOUNT_VIEW_ID}
                 onMouseDown={(event) => onMouseDown(event, [AMOUNT_VIEW_ID])}
@@ -253,7 +253,7 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
                     text={buttonText}
                 />
             </View>
-        </ScrollView>
+        </>
     );
 }