Skip to main content

Modal

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

Import

import { Modal } from "@dhua5922/react-native-kit";

Examples

Live Editor
function Example() {
  const [open, setIsOpen] = useState(false);

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>Open Modal</Button>

      <Modal visible={open} onRequestClose={() => setIsOpen(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Header</Modal.Title>
        </Modal.Header>

        <Modal.Body>Body</Modal.Body>

        <Modal.Footer>Footer</Modal.Footer>
      </Modal>
    </>
  );
}
Result
Loading...

Props

note

Include all props from Modal

NameTypeDefaultDescription
visiblebooleanShow modal when true; otherwise, hide modal.
onRequestClose() => voidCallback fired when closing the modal.