Merge pull request #26610 from ZhenjaHorbach/fix/distance-request-pre…

…view-title-for-sbe-users Ensure multiple waypoints are visible on smaller screens
Expensify · Sep 3, 2023 · 91ff78d · 91ff78d
2 parents 4d85564 + 5161f84
commit 91ff78d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useState, useRef} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
@@ -82,12 +82,14 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
 
     const reportID = lodashGet(report, 'reportID', '');
     const waypoints = useMemo(() => lodashGet(transaction, 'comment.waypoints', {}), [transaction]);
+    const previousWaypoints = usePrevious(waypoints);
     const numberOfWaypoints = _.size(waypoints);
+    const numberOfPreviousWaypoints = _.size(previousWaypoints);
+    const scrollViewRef = useRef(null);
 
     const lastWaypointIndex = numberOfWaypoints - 1;
     const isLoadingRoute = lodashGet(transaction, 'comment.isLoading', false);
     const hasRouteError = lodashHas(transaction, 'errorFields.route');
-    const previousWaypoints = usePrevious(waypoints);
     const haveWaypointsChanged = !_.isEqual(previousWaypoints, waypoints);
     const doesRouteExist = lodashHas(transaction, 'routes.route0.geometry.coordinates');
     const shouldFetchRoute = (!doesRouteExist || haveWaypointsChanged) && !isLoadingRoute && TransactionUtils.validateWaypoints(waypoints);
@@ -167,9 +169,15 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                 onLayout={(event = {}) => setScrollContainerHeight(lodashGet(event, 'nativeEvent.layout.height', 0))}
             >
                 <ScrollView
-                    onContentSizeChange={(width, height) => setScrollContentHeight(height)}
+                    onContentSizeChange={(width, height) => {
+                        if (scrollContentHeight < height && numberOfWaypoints > numberOfPreviousWaypoints) {
+                            scrollViewRef.current.scrollToEnd({animated: true});
+                        }
+                        setScrollContentHeight(height);
+                    }}
                     onScroll={updateGradientVisibility}
                     scrollEventThrottle={16}
+                    ref={scrollViewRef}
                 >
                     {_.map(waypoints, (waypoint, key) => {
                         // key is of the form waypoint0, waypoint1, ...

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -3862,7 +3862,7 @@ const styles = {
 
     distanceRequestContainer: (maxHeight) => ({
         ...flex.flexShrink2,
-        minHeight: variables.baseMenuItemHeight,
+        minHeight: variables.baseMenuItemHeight * 2,
         maxHeight,
     }),