feat: scrollable draggable modal (#116)

Author: heloise-gllm

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(<TestModal />)`} noInline />
 
 Extends every `Box` props and `BottomSheetModalProps` from `@gorhom/bottom-sheet`
 
+
 ### `isOpen`
 <PropsTable
   description="Boolean to indicate if the modal is opened or not."
@@ -71,3 +71,10 @@ Extends every `Box` props and `BottomSheetModalProps` from `@gorhom/bottom-sheet
   description="Method called when the modal is closed by the user."
   prop={{ type: "() => void", required: false }}
 />
+
+### `scrollViewProps`
+
+<PropsTable
+description="Props forwarded to the internal BottomSheetScrollView (e.g. contentContainerStyle, keyboardShouldPersistTaps, showsVerticalScrollIndicator, ...)."
+prop={{ type: "BottomSheetScrollViewProps", required: false }}
+/>

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}
     >
-      <ficus.BottomSheetView {...rest}>
-        <Box h={h ?? '100%'}>
-          <SafeAreaView style={safeAreaViewStyle}>
-            {children as ReactNode}
-          </SafeAreaView>
-        </Box>
-      </ficus.BottomSheetView>
+      <BottomSheetScrollView {...scrollViewProps}>
+        <ficus.BottomSheetView {...rest}>
+          <Box h={h ?? '100%'}>
+            <SafeAreaView style={safeAreaViewStyle}>
+              {children as ReactNode}
+            </SafeAreaView>
+          </Box>
+        </ficus.BottomSheetView>
+      </BottomSheetScrollView>
     </ficus.BottomSheetModal>
   );
 });