fix: scroll draggable modal with isScrollable prop

Author: heloise-gllm

apps/docs/pages/docs/Components/draggable-modal.en-US.mdx

@@ -72,6 +72,13 @@ Extends every `Box` props and `BottomSheetModalProps` from `@gorhom/bottom-sheet
   prop={{ type: "() => void", required: false }}
 />
 
+### `isScrollable`
+
+<PropsTable
+description="Boolean to indicate if the modal should be scrollable."
+prop={{ type: "boolean", required: false }}
+/>
+
 ### `scrollViewProps`
 
 <PropsTable

packages/react-native-ficus-ui/src/components/draggable-modal/index.tsx

@@ -18,6 +18,7 @@ import { mergeRefs } from '../utils/merge-refs';
 interface DraggableModalOptions {
   isOpen?: boolean;
   onClose?: () => void;
+  isScrollable?: boolean;
   scrollViewProps?: BottomSheetScrollViewProps;
 }
 
@@ -35,7 +36,15 @@ export const DraggableModal = forwardRef<
   const { colorMode } = useColorMode();
 
   const bottomSheetModalRef = mergeRefs(_ref, ref);
-  const { children, isOpen, onClose, h, scrollViewProps, ...rest } = props;
+  const {
+    children,
+    isOpen,
+    onClose,
+    h,
+    isScrollable,
+    scrollViewProps,
+    ...rest
+  } = props;
 
   useEffect(() => {
     if (isOpen) {
@@ -95,15 +104,23 @@ export const DraggableModal = forwardRef<
       backgroundStyle={bottomSheetBackgroundStyleObject as ViewStyle}
       handleIndicatorStyle={handleStyleObject}
     >
-      <BottomSheetScrollView {...scrollViewProps}>
+      {isScrollable ? (
+        <BottomSheetScrollView {...scrollViewProps}>
+          <Box h={h ?? '100%'}>
+            <SafeAreaView style={safeAreaViewStyle}>
+              {children as ReactNode}
+            </SafeAreaView>
+          </Box>
+        </BottomSheetScrollView>
+      ) : (
         <ficus.BottomSheetView {...rest}>
           <Box h={h ?? '100%'}>
             <SafeAreaView style={safeAreaViewStyle}>
               {children as ReactNode}
             </SafeAreaView>
           </Box>
         </ficus.BottomSheetView>
-      </BottomSheetScrollView>
+      )}
     </ficus.BottomSheetModal>
   );
 });