Modal

Modal presents content in a focused overlay, blocking interaction with the underlying page. Use for confirmations, forms, or important decisions.

Preview

Light Dark OLED

Global

Confirm Action×

Are you sure you want to continue?

CancelConfirm

---

Basic Usage

Light Dark OLED

Global

Modal Title×

Modal content goes here. This can be any React component.

<Modal
  visible={isOpen}
  onClose={() => setIsOpen(false)}
  title="Modal Title"
>
  <Text>Modal content goes here.</Text>
</Modal>

---

Sizes

Light Dark OLED

Global

sm

Small Modal

Compact content

md

Medium Modal

Standard content width

lg

Large Modal

More space for complex content

<Modal size="sm" visible={isOpen} onClose={handleClose} title="Small">...</Modal>
<Modal size="md" visible={isOpen} onClose={handleClose} title="Medium">...</Modal>
<Modal size="lg" visible={isOpen} onClose={handleClose} title="Large">...</Modal>

---

With Footer

Light Dark OLED

Global

Save Reading×

Do you want to save this reading to your journal?

DiscardSave

<Modal
  visible={isOpen}
  onClose={handleClose}
  title="Save Reading"
  footer={
    <View style={styles.footer}>
      <Button variant="secondary" onPress={handleDiscard}>Discard</Button>
      <Button onPress={handleSave}>Save</Button>
    </View>
  }
>
  <Text>Do you want to save this reading?</Text>
</Modal>

---

Confirm Modal

Pre-built confirmation dialog.

Light Dark OLED

Global

Delete Reading?

This action cannot be undone.

CancelDelete

<ConfirmModal
  visible={showConfirm}
  onClose={() => setShowConfirm(false)}
  onConfirm={handleDelete}
  title="Delete Reading?"
  message="This action cannot be undone."
  confirmText="Delete"
  destructive
/>

---

API Reference

Modal Props

Prop	Type	Default	Description
visible	boolean	Required	Whether visible
onClose	() => void	Required	Close handler
title	string	-	Modal title
size	'sm' | 'md' | 'lg' | 'full'	'md'	Modal size
closeOnBackdrop	boolean	true	Close on backdrop press
showCloseButton	boolean	true	Show close button
children	ReactNode	Required	Modal content
footer	ReactNode	-	Footer content
style	ViewStyle	-	Custom styles

ConfirmModal Props

Prop	Type	Default	Description
visible	boolean	Required	Whether visible
onClose	() => void	Required	Close handler
onConfirm	() => void	Required	Confirm handler
title	string	Required	Dialog title
message	string	Required	Dialog message
cancelText	string	'Cancel'	Cancel button text
confirmText	string	'Confirm'	Confirm button text
destructive	boolean	false	Destructive action