diff --git a/patches/react-native-draggable-flatlist+4.0.1+001+listfooter-constraint.patch b/patches/react-native-draggable-flatlist+4.0.1+001+listfooter-constraint.patch
new file mode 100644
index 000000000000..3925c00cc187
--- /dev/null
+++ b/patches/react-native-draggable-flatlist+4.0.1+001+listfooter-constraint.patch
@@ -0,0 +1,110 @@
+diff --git a/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx b/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx
+index 2f59c7a..a324da2 100644
+--- a/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx
++++ b/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx
+@@ -51,7 +51,7 @@ const AnimatedFlatList = (Animated.createAnimatedComponent(
+   FlatList
+ ) as unknown) as <T>(props: RNGHFlatListProps<T>) => React.ReactElement;
+ 
+-function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
++function DraggableFlatListInner<T>({ListFooterComponent, ...props}: DraggableFlatListProps<T>) {
+   const {
+     cellDataRef,
+     containerRef,
+@@ -65,6 +65,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
+     activeCellSize,
+     activeIndexAnim,
+     containerSize,
++    footerSize,
+     scrollOffset,
+     scrollViewSize,
+     spacerIndexAnim,
+@@ -162,6 +163,14 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
+     props.onContainerLayout?.({ layout, containerRef });
+   };
+ 
++  // make size of footer available for use in drag contraints
++  const onFooterLayout = ({
++    nativeEvent: { layout },
++  }: LayoutChangeEvent) => {
++    footerSize.value = props.horizontal ? layout.width : layout.height
++  };
++
++
+   const onListContentSizeChange = (w: number, h: number) => {
+     scrollViewSize.value = props.horizontal ? w : h;
+     props.onContentSizeChange?.(w, h);
+@@ -357,6 +366,16 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
+     props.onViewableItemsChanged?.(info);
+   });
+ 
++  // Wrap the provided ListFooterComponent to add an onLayout
++  const wrappedListFooterComponent = ListFooterComponent ?
++    <Animated.View 
++      style={props.ListFooterComponentStyle}
++      onLayout={onFooterLayout}
++      >
++        {ListFooterComponent}
++    </Animated.View>
++  : undefined
++
+   return (
+     <DraggableFlatListProvider
+       activeKey={activeKey}
+@@ -388,6 +407,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
+             scrollEventThrottle={16}
+             simultaneousHandlers={props.simultaneousHandlers}
+             removeClippedSubviews={false}
++            ListFooterComponent={wrappedListFooterComponent}
+           />
+           {!!props.onScrollOffsetChange && (
+             <ScrollOffsetListener
+diff --git a/node_modules/react-native-draggable-flatlist/src/context/animatedValueContext.tsx b/node_modules/react-native-draggable-flatlist/src/context/animatedValueContext.tsx
+index 6ff1ed5..611adda 100644
+--- a/node_modules/react-native-draggable-flatlist/src/context/animatedValueContext.tsx
++++ b/node_modules/react-native-draggable-flatlist/src/context/animatedValueContext.tsx
+@@ -60,6 +60,7 @@ function useSetupAnimatedValues<T>() {
+   const activeCellSize = useSharedValue(0); // Height or width of acctive cell
+   const activeCellOffset = useSharedValue(0); // Distance between active cell and edge of container
+ 
++  const footerSize = useSharedValue(0);
+   const scrollOffset = useSharedValue(0);
+   const scrollInit = useSharedValue(0);
+ 
+@@ -118,7 +119,7 @@ function useSetupAnimatedValues<T>() {
+ 
+     const maxTranslateNegative = -activeCellOffset.value;
+     const maxTranslatePositive =
+-      scrollViewSize.value - (activeCellOffset.value + activeCellSize.value);
++      scrollViewSize.value - (activeCellOffset.value + activeCellSize.value + footerSize.value);
+ 
+     // Only constrain the touch position while the finger is on the screen. This allows the active cell
+     // to snap above/below the fold once let go, if the drag ends at the top/bottom of the screen.
+@@ -174,6 +175,7 @@ function useSetupAnimatedValues<T>() {
+       placeholderOffset,
+       resetTouchedCell,
+       scrollOffset,
++      footerSize,
+       scrollViewSize,
+       spacerIndexAnim,
+       touchPositionDiff,
+@@ -197,6 +199,7 @@ function useSetupAnimatedValues<T>() {
+       placeholderOffset,
+       resetTouchedCell,
+       scrollOffset,
++      footerSize,
+       scrollViewSize,
+       spacerIndexAnim,
+       touchPositionDiff,
+diff --git a/node_modules/react-native-draggable-flatlist/src/types.ts b/node_modules/react-native-draggable-flatlist/src/types.ts
+index d6755c8..564e3ff 100644
+--- a/node_modules/react-native-draggable-flatlist/src/types.ts
++++ b/node_modules/react-native-draggable-flatlist/src/types.ts
+@@ -52,6 +52,7 @@ export type DraggableFlatListProps<T> = Modify<
+       layout: LayoutChangeEvent["nativeEvent"]["layout"];
+       containerRef: React.RefObject<Animated.View>;
+     }) => void;
++    ListFooterComponent?: React.ReactElement;
+   } & Partial<DefaultProps>
+ >;
+ 
diff --git a/src/components/DraggableList/index.android.tsx b/src/components/DraggableList/index.android.tsx
deleted file mode 100644
index f33a69cd6321..000000000000
--- a/src/components/DraggableList/index.android.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-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>({ListFooterComponent, ...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<ScrollView>) {
-    const styles = useThemeStyles();
-    return (
-        <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>
-    );
-}
-
-DraggableList.displayName = 'DraggableList';
-
-export default React.forwardRef(DraggableList);
diff --git a/src/components/DraggableList/index.ios.tsx b/src/components/DraggableList/index.native.tsx
similarity index 100%
rename from src/components/DraggableList/index.ios.tsx
rename to src/components/DraggableList/index.native.tsx