Skip to content
Docs
Components
Modal

Modal

Component to render a modal imported from react-native-modal

https://github.com/react-native-modal/react-native-modal (opens in a new tab)

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}>
        <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.

visible

Boolean to indicate if the modal is opened or not.

TypeRequiredDefault
booleanYes