DraggableModal

Component to render a draggable modal, based on react-native-bottom-sheet (opens in a new tab). It wraps a BottomSheetModal and automatically embeds a BottomSheetScrollView so that your content is scrollable out of the box.

Import

import { DraggableModal } from "react-native-ficus-ui";

Usage

EDITABLE EXAMPLE

const TestModal = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <FicusProvider>
      <Box h={500} bg="gray.50" p="xl">
        <Button
          colorScheme={!isOpen ? 'green' : 'red'}
          onPress={() => {
            if (!isOpen) {
              onOpen();
            } else {
              onClose();
            }
          }}
        >
          {!isOpen ? 'Show Modal' : 'Hide Modal'}
        </Button>

        <DraggableModal
          isOpen={isOpen}
          onClose={onClose}
          snapPoints={['30%', '80%']}
          p="xl"
        >
          <Text fontSize="4xl" fontWeight="bold">
            Settings
          </Text>

          <Text mt="xl">Your settings</Text>
        </DraggableModal>
      </Box>
    </FicusProvider>
  );
}
render(<TestModal />)

Props

Extends every Box props and BottomSheetModalProps from @gorhom/bottom-sheet

`isOpen`

Boolean to indicate if the modal is opened or not.

Type	Required	Default
boolean	No

`onClose`

Method called when the modal is closed by the user.

Type	Required	Default
() => void	No

`isScrollable`

Boolean to indicate if the modal should be scrollable.

Type	Required	Default
boolean	No

`scrollViewProps`

Props forwarded to the internal BottomSheetScrollView (e.g. contentContainerStyle, keyboardShouldPersistTaps, showsVerticalScrollIndicator, ...).

Type	Required	Default
BottomSheetScrollViewProps	No

Modal Checkbox