diff --git a/apps/docs/pages/docs/Components/draggable-modal.en-US.mdx b/apps/docs/pages/docs/Components/draggable-modal.en-US.mdx
index 1caca82..8989dee 100644
--- a/apps/docs/pages/docs/Components/draggable-modal.en-US.mdx
+++ b/apps/docs/pages/docs/Components/draggable-modal.en-US.mdx
@@ -7,9 +7,8 @@ import PropsTable from "@components/docs/props-table";
# DraggableModal
-Component to render a draggable modal, based on `react-native-bottom-sheet`
-
-https://github.com/gorhom/react-native-bottom-sheet
+Component to render a draggable modal, based on [`react-native-bottom-sheet`](https://github.com/gorhom/react-native-bottom-sheet).
+It wraps a `BottomSheetModal` and automatically embeds a `BottomSheetScrollView` so that your content is scrollable out of the box.
## Import
@@ -60,6 +59,7 @@ render()`} noInline />
Extends every `Box` props and `BottomSheetModalProps` from `@gorhom/bottom-sheet`
+
### `isOpen`
void", required: false }}
/>
+
+### `scrollViewProps`
+
+
diff --git a/packages/react-native-ficus-ui/src/components/draggable-modal/index.tsx b/packages/react-native-ficus-ui/src/components/draggable-modal/index.tsx
index 697a7e3..01d74f8 100644
--- a/packages/react-native-ficus-ui/src/components/draggable-modal/index.tsx
+++ b/packages/react-native-ficus-ui/src/components/draggable-modal/index.tsx
@@ -1,6 +1,7 @@
import { ReactNode, useEffect, useRef } from 'react';
-import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import { BottomSheetScrollViewProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
import { SafeAreaView, ViewStyle } from 'react-native';
import { useColorMode } from '../../hooks';
@@ -17,6 +18,7 @@ import { mergeRefs } from '../utils/merge-refs';
interface DraggableModalOptions {
isOpen?: boolean;
onClose?: () => void;
+ scrollViewProps?: BottomSheetScrollViewProps;
}
export interface DraggableModalProps
@@ -33,7 +35,7 @@ export const DraggableModal = forwardRef<
const { colorMode } = useColorMode();
const bottomSheetModalRef = mergeRefs(_ref, ref);
- const { children, isOpen, onClose, h, ...rest } = props;
+ const { children, isOpen, onClose, h, scrollViewProps, ...rest } = props;
useEffect(() => {
if (isOpen) {
@@ -93,13 +95,15 @@ export const DraggableModal = forwardRef<
backgroundStyle={bottomSheetBackgroundStyleObject as ViewStyle}
handleIndicatorStyle={handleStyleObject}
>
-
-
-
- {children as ReactNode}
-
-
-
+
+
+
+
+ {children as ReactNode}
+
+
+
+
);
});