Modal

Custom wrapper around the React Native Modal (opens in a new tab). It provides default styles for background overlay and a content container.

Import

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

Usage

EDITABLE EXAMPLE

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

  return (
    <Box>
      <Button
        onPress={() => {
          onOpen();
        }}
      >
        Show Modal
      </Button>

      <Modal visible={isOpen} height="50%" width="90%">
        <Button
          h={35}
          w={35}
          position="absolute"
          top={50}
          right={15}
          px={0}
          borderRadius="full"
          colorScheme="gray"
          onPress={() => {
            onClose();
          }}
        >
          <Icon color="white" name="close" />
        </Button>
      </Modal>
    </Box>
  );
}
render(<TestModal />)

Props

Extends every Box and Modal from React Native props and some custom props.

`visible`

Boolean to indicate if the modal is opened or not.

Type	Required	Default
boolean	Yes

`width`

Width of the content container. Accepts DimensionValue (number, string, or percentage).

Type	Required	Default
DimensionValue	No

`height`

Height of the content container. Accepts DimensionValue (number, string, or percentage).

Type	Required	Default
DimensionValue	No

`backgroundColor`

Background color of the content container.

Type	Required	Default
string	No

`backgroundViewStyle`

Style object applied to the full-screen background overlay (default: semi-transparent black).

Type	Required	Default
ViewStyle	No

`contentViewStyle`

Style object applied to the modal content container.

Type	Required	Default
ViewStyle	No

Spinner DraggableModal