forward refs in the DraggableList

src/components/DistanceRequest.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useState, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
@@ -88,7 +88,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
     const previousWaypoints = usePrevious(waypoints);
     const numberOfWaypoints = _.size(waypoints);
     const numberOfPreviousWaypoints = _.size(previousWaypoints);
-    // const scrollViewRef = useRef(null);
+    const scrollViewRef = useRef(null);
 
     const lastWaypointIndex = numberOfWaypoints - 1;
     const isLoadingRoute = lodashGet(transaction, 'comment.isLoading', false);
@@ -177,8 +177,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                     shouldUsePortal
                     onContentSizeChange={(width, height) => {
                         if (scrollContentHeight < height && numberOfWaypoints > numberOfPreviousWaypoints) {
-                            // TODO: Fix refs
-                            // scrollViewRef.current.scrollToEnd({animated: true});
+                            scrollViewRef.current.scrollToEnd({animated: true});
                         }
                         setScrollContentHeight(height);
                     }}
@@ -191,7 +190,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                     }}
                     onScroll={updateGradientVisibility}
                     // scrollEventThrottle={16}
-                    // ref={scrollViewRef}
+                    ref={scrollViewRef}
                     renderItem={({item, drag, getIndex}) => {
                         // key is of the form waypoint0, waypoint1, ...
                         const index = getIndex();

src/components/DraggableList/index.native.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import DraggableFlatList from 'react-native-draggable-flatlist';
-import type {DraggableListProps} from './types';
+import {FlatList} from 'react-native-gesture-handler';
+import type {DraggableListProps, DraggableListType} from './types';
 
-function DraggableList<T>({renderClone, shouldUsePortal, ...viewProps}: DraggableListProps<T>) {
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <DraggableFlatList {...viewProps} />;
+function DraggableList<T>({renderClone, shouldUsePortal, ...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<FlatList<T>>) {
+    return (
+        <DraggableFlatList
+            ref={ref}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...viewProps}
+        />
+    );
 }
 
 DraggableList.displayName = 'DraggableList';
 
-export default DraggableList;
+export default React.forwardRef(DraggableList) as DraggableListType;

src/components/DraggableList/index.tsx

@@ -2,7 +2,7 @@ import React, {useCallback} from 'react';
 import {DragDropContext, Droppable, Draggable, type OnDragEndResponder, type OnDragUpdateResponder} from 'react-beautiful-dnd';
 import {ScrollView} from 'react-native';
 import useDraggableInPortal from './useDraggableInPortal';
-import type {DraggableListProps} from './types';
+import type {DraggableListProps, DraggableListType} from './types';
 
 type ReorderParams<T> = {
     list: T[];
@@ -22,17 +22,20 @@ const reorder = <T,>({list, startIndex, endIndex}: ReorderParams<T>): T[] => {
     return result;
 };
 
-function DraggableList<T>({
-    data = [],
-    renderItem,
-    keyExtractor,
-    onDragEnd: onDragEndCallback,
-    onDragBegin,
-    onPlaceholderIndexChange,
-    renderClone,
-    shouldUsePortal = false,
-    onContentSizeChange,
-}: DraggableListProps<T>) {
+function DraggableList<T>(
+    {
+        data = [],
+        renderItem,
+        keyExtractor,
+        onDragEnd: onDragEndCallback,
+        onDragBegin,
+        onPlaceholderIndexChange,
+        renderClone,
+        shouldUsePortal = false,
+        onContentSizeChange,
+    }: DraggableListProps<T>,
+    ref: React.ForwardedRef<ScrollView>,
+) {
     /**
      * Function to be called when the user finishes dragging an item
      * It will reorder the list and call the callback function
@@ -86,7 +89,10 @@ function DraggableList<T>({
             >
                 {(droppableProvided) => (
                     // We use ScrollView to match the native behavior of FlatList
-                    <ScrollView onContentSizeChange={onContentSizeChange}>
+                    <ScrollView
+                        onContentSizeChange={onContentSizeChange}
+                        ref={ref}
+                    >
                         {/* We can't use the react-native View here, because it doesn't support all props */}
                         <div
                             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -131,4 +137,4 @@ function DraggableList<T>({
 
 DraggableList.displayName = 'DraggableList';
 
-export default DraggableList;
+export default React.forwardRef(DraggableList) as DraggableListType;

src/components/DraggableList/types.ts

@@ -1,6 +1,11 @@
 import type {DraggableChildrenFn} from 'react-beautiful-dnd';
+import {FlatList} from 'react-native-gesture-handler';
 import type {RenderItemParams as OriginalRenderItemParams} from 'react-native-draggable-flatlist';
 
+type RefType<T> = Pick<FlatList<T>, 'scrollToEnd'>;
+
+type DraggableListType = <T>(props: DraggableListProps<T> & {ref?: React.ForwardedRef<RefType<T>>}) => JSX.Element;
+
 type DataType<T> = {
     data: T[];
 };
@@ -20,4 +25,4 @@ type DraggableListProps<T> = {
 
 type RenderItemParams<T> = OriginalRenderItemParams<T>;
 
-export type {DraggableListProps, RenderItemParams};
+export type {DraggableListProps, RenderItemParams, RefType, DraggableListType};