Modal

A Modal is a window on top of the primary content to draw the user's attention to important information or actions. It provides a focused and interruptive way to interact with the application.
Installation
API Reference
This is an illustration of Modal component.
function App() {
const [showModal, setShowModal] = useState(false)
console.log(showModal)
const ref = React.useRef(null)
return (
<Center className="h-[300px]">
<Button onPress={() => setShowModal(true)} ref={ref}>
<ButtonText>Show Modal</ButtonText>
</Button>
<Modal
isOpen={showModal}
onClose={() => {
setShowModal(false)
}}
finalFocusRef={ref}
>
<ModalBackdrop />
<ModalContent>
<ModalHeader>
<Heading size="lg">Engage with Modals</Heading>
<ModalCloseButton>
<Icon
as={CloseIcon}
size="md"
className="stroke-background-400 group-[:hover]/modal-close-button:stroke-background-700 group-[:active]/modal-close-button:stroke-background-900 group-[:focus-visible]/modal-close-button:stroke-background-900"
/>
</ModalCloseButton>
</ModalHeader>
<ModalBody>
<Text>
Elevate user interactions with our versatile modals. Seamlessly
integrate notifications, forms, and media displays. Make an impact
effortlessly.
</Text>
</ModalBody>
<ModalFooter>
<Button
variant="outline"
size="sm"
action="secondary"
className="mr-3"
onPress={() => {
setShowModal(false)
}}
>
<ButtonText>Cancel</ButtonText>
</Button>
<Button
size="sm"
action="positive"
onPress={() => {
setShowModal(false)
}}
>
<ButtonText>Explore</ButtonText>
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Center>
)
}

Installation

Run the following command:

npx gluestack-ui add modal

API Reference

To use this component in your project, include the following import statement in your file.
import { Modal } from "@/components/ui/modal"
export default () => (
<Modal>
<ModalBackdrop />
<ModalContent>
<ModalHeader>
<ModalCloseButton></ModalCloseButton>
</ModalHeader>
<ModalBody />
<ModalFooter />
</ModalContent>
</Modal>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
Contains all View related layout style props and actions. It inherits all the properties of React Native's View component.
Prop
Type
Default
Description
isOpen
boolean
-
If true, the modal will open. Useful for controllable state behavior.
onClose
() => any
-
Callback invoked when the modal is closed.
useRNModal
boolean
false
If true, renders react-native native modal.
defaultIsOpen
boolean
-
Specifies the default open state of the Modal
initialFocusRef
React.RefObject<any>
-
The ref of element to receive focus when the modal opens.
finalFocusRef
React.RefOb