Merge pull request #43810 from Krishna2323/krishna2323/issue/42577

fix: Distance - Page is not scrollable after adding multiple stops.

Author: stitesExpensify

src/components/DraggableList/index.android.tsx

@@ -1,23 +1,24 @@
 import React from 'react';
 import {View} from 'react-native';
-import DraggableFlatList from 'react-native-draggable-flatlist';
-import type {FlatList} from 'react-native-gesture-handler';
+import {NestableDraggableFlatList, NestableScrollContainer} from 'react-native-draggable-flatlist';
+import type {ScrollView} from 'react-native-gesture-handler';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {DraggableListProps} from './types';
 
-function DraggableList<T>({renderClone, shouldUsePortal, ListFooterComponent, ...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<FlatList<T>>) {
+function DraggableList<T>({renderClone, shouldUsePortal, ListFooterComponent, ...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<ScrollView>) {
     const styles = useThemeStyles();
     return (
-        <View style={styles.flex1}>
-            <DraggableFlatList
-                ref={ref}
-                containerStyle={ListFooterComponent ? undefined : styles.flex1}
-                contentContainerStyle={ListFooterComponent ? undefined : styles.flexGrow1}
+        <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>}
-        </View>
+        </NestableScrollContainer>
     );
 }