[HOLD for payment 2024-08-09] [$250] Distance - Page is not scrollable after adding multiple stops

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.75-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4572868
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Click on FAB > Submit expense > Distance tab
2. Add a start waypoint, a finish waypoint, and multiple stops
3. Try to Scroll the page
4. Do step 1 - 3 on mWeb

Expected Result:

Page becomes scrollable to view the whole content after adding multiple waypoints (Same behavior as in mWeb)

Actual Result:

Page is not scrollable to view the whole content after adding multiple waypoints which is a different behavior compared to mWeb.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6490254_1716535967530.Screen_Recording_20240524_102844_New_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014d91998739178ee2
• Upwork Job ID: 1795722148596056064
• Last Price Increase: 2024-06-05
• Automatic offers:
• Krishna2323 | Contributor | 102695130

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[izarutskaya]

We think this issue might be related to the #collect project.

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Distance - Page is not scrollable after adding multiple stops

What is the root cause of that problem?

The footer (map) for android is rendered separately from the DraggableFlatList (not as a footer of the list) and DraggableFlatList and ListFooterComponent is wrapped in a View instead of ScrollView.

App/src/components/DraggableList/index.android.tsx

Lines 11 to 21 in 0cb2dc0

	<View style={styles.flex1}>
	<DraggableFlatList
	ref={ref}
	containerStyle={ListFooterComponent ? undefined : styles.flex1}
	contentContainerStyle={ListFooterComponent ? undefined : styles.flexGrow1}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...viewProps}
	/>
	{React.isValidElement(ListFooterComponent) && <View style={styles.flexGrow1}>{ListFooterComponent}</View>}
	</View>
	);

What changes do you think we should make in order to solve the problem?

We can use NestableScrollContainer & NestableDraggableFlatList.

        <NestableScrollContainer
            ref={ref}
            contentContainerStyle={styles.flexGrow1}
        >
            <NestableDraggableFlatList
                contentContainerStyle={styles.flex1}
                // eslint-disable-next-line react/jsx-props-no-spreading
                {...viewProps}
            />
            {React.isValidElement(ListFooterComponent) && <View style={styles.flexGrow1}>{ListFooterComponent}</View>}
        </NestableScrollContainer>

There will be a console error when we will use NestableDraggableFlatList.tsx and thats because of this code using findNodeHandle(scrollableRef.current); instead of passing scrollableRef.current directly to ontainerRef.current.measureLayout. It is also mentioned here. We can open an issue/PR to update that in react-native-draggable-flatlist.

Result

scroll_issue_distance_page.mp4

Alternatives

What alternative solutions did you explore? (Optional)

1. Remove the view and wrap

            <ScrollView style={styles.flex1}>
                <DraggableList
                    data={waypointsList}
                    keyExtractor={(item) => item}
                    shouldUsePortal
                    onDragEnd={updateWaypoints}
                    ref={scrollViewRef}
                    renderItem={renderItem}
                    ListFooterComponent={
                        <DistanceRequestFooter
                            waypoints={waypoints}
                            navigateToWaypointEditPage={navigateToWaypointEditPage}
                            transaction={transaction}
                        />
                    }
                />
            </ScrollView>

2. This only happens on android, so we can in the android file only, We can't use the ListFooterComponent because it was removed intentionally to solve [HOLD for payment 2024-05-20] CRITICAL: [P2P Distance] [$500] Enable immediate slide scrolling without tap #40211.

App/src/components/DraggableList/index.android.tsx

Lines 11 to 20 in 525ad6f

	<View style={styles.flex1}>
	<DraggableFlatList
	ref={ref}
	containerStyle={ListFooterComponent ? undefined : styles.flex1}
	contentContainerStyle={ListFooterComponent ? undefined : styles.flexGrow1}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...viewProps}
	/>
	{React.isValidElement(ListFooterComponent) && <View style={styles.flexGrow1}>{ListFooterComponent}</View>}
	</View>

To:

        <ScrollView contentContainerStyle={{flexGrow: 1}}>
            <DraggableFlatList
                ref={ref}
                containerStyle={ListFooterComponent ? undefined : styles.flex1}
                contentContainerStyle={ListFooterComponent ? undefined : styles.flexGrow1}
                // eslint-disable-next-line react/jsx-props-no-spreading
                {...viewProps}
            />
            {React.isValidElement(ListFooterComponent) && <View style={styles.flexGrow1}>{ListFooterComponent}</View>}
        </ScrollView>

We can wrap both elements in ScrollView and disable the scroll functionality of DraggableFlatList.

        <ScrollView contentContainerStyle={styles.flexGrow1}>
            <DraggableFlatList
                ref={ref}
                containerStyle={ListFooterComponent ? undefined : styles.flex1}
                contentContainerStyle={ListFooterComponent ? undefined : styles.flexGrow1}
                scrollEnabled={false}
                // eslint-disable-next-line react/jsx-props-no-spreading
                {...viewProps}
            />
            {React.isValidElement(ListFooterComponent) && <View style={styles.flexGrow1}>{ListFooterComponent}</View>}
        </ScrollView>

Result

distance_rate_scroll_issue.mp4

[allgandalf]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Only for Android, Page is not scrollabe when we add multiple stops for distance request.

What is the root cause of that problem?

This is bug is for android specific platform because in the Native file, we have wrapped the DraggableList in a View:

App/src/components/DraggableList/index.android.tsx

Lines 11 to 12 in 525ad6f

	<View style={styles.flex1}>
	<DraggableFlatList

This was because we also display the component ListFooterComponent:

App/src/components/DraggableList/index.android.tsx

Lines 19 to 20 in 525ad6f

	{React.isValidElement(ListFooterComponent) && <View style={styles.flexGrow1}>{ListFooterComponent}</View>}
	</View>

Due to which we are unable to scroll on Android.

What changes do you think we should make in order to solve the problem?

We need to make a function for ListFooterComponent and pass it as a prop ListFooterComponent to DraggableFlatList:

diff --git a/src/components/DraggableList/index.android.tsx b/src/components/DraggableList/index.android.tsx
index 30bf7c927b..70b2557e8b 100644
--- a/src/components/DraggableList/index.android.tsx
+++ b/src/components/DraggableList/index.android.tsx
@@ -7,17 +7,20 @@ import type {DraggableListProps} from './types';
 
 function DraggableList<T>({renderClone, shouldUsePortal, ListFooterComponent, ...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<FlatList<T>>) {
     const styles = useThemeStyles();
+
+    const FooterComponent = () => {
+        return <View style={styles.flexGrow1}>{React.isValidElement(ListFooterComponent) && ListFooterComponent}</View>;
+    };
+
     return (
-        <View style={styles.flex1}>
-            <DraggableFlatList
-                ref={ref}
-                containerStyle={ListFooterComponent ? undefined : styles.flex1}
-                contentContainerStyle={ListFooterComponent ? undefined : styles.flexGrow1}
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...viewProps}
-            />
-            {React.isValidElement(ListFooterComponent) && <View style={styles.flexGrow1}>{ListFooterComponent}</View>}
-        </View>
+        <DraggableFlatList
+            ref={ref}
+            containerStyle={ListFooterComponent ? undefined : styles.flex1}
+            contentContainerStyle={ListFooterComponent ? undefined : styles.flexGrow1}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...viewProps}
+            ListFooterComponent={FooterComponent}
+        />
     );
 }
 

Result Video

Details

Screen.Recording.2024-05-25.at.2.45.49.PM.mov

[Krishna2323]

Proposal updated

• Added alternative option 2

[melvin-bot]

@stephanieelliott Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014d91998739178ee2