diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js index 19a3b9ec6926..180613eee49a 100644 --- 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))} > 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 index 8d033a22e16a..7c8c12c4a6c8 100644 --- 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, }),