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 isOpen={isOpen}>
        <Flex bg="white">
          <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>
        </Flex>
      </Modal>
    </Box>
  );
}
render(<TestModal />)

Props

Extends every Box and Modal from React Native props.

isOpen

Boolean to indicate if the modal is opened or not.

TypeRequiredDefault
booleanYes