DraggableModal

Component to render a draggable modal, based on react-native-bottom-sheet (opens in a new tab). It wraps a BottomSheetModal, if you need to add scroll inside content view you can use scrollables components from https://gorhom.dev/react-native-bottom-sheet/scrollables (opens in a new tab)

⚠️

If BottomSheetScrollView from react-native-bottom-sheet is not working inside DraggableModal component then try to use ScrollView from react-native-gesture-handler

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	false

`onClose`

Method called when the modal is closed by the user.

Type	Required	Default
() => void	No

Modal Checkbox