Version: 3.0.0-next.36

Modal

A Modal is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is inert, meaning that users cannot interact with it.

Import#

NativeBase exports Modal Compound component:

  • Modal: The wrapper that provides context for its children.
  • Modal.Content: The container for the modal dialog's content.
  • Modal.Header: The header that labels the modal dialog.
  • Modal.Footer: The footer that houses the modal actions.
  • Modal.Body: The wrapper that houses the modal's main content.
  • Modal.CloseButton: The button that closes the modal.
import { Modal } from 'native-base';

Examples#

Basic#

Modal Sizes#

You can pass size prop to NativeBase Modal , it can take xs , sm, md, lg, xl, full that maps to 40%, 48%, 60%, 75%, 90% and 100% respectively , or a string or a numerical width of the Modal.

intialFocusRef and finalFocusRef Example#

Modal with avoidKeyboard#


Tip

If you want a specifically aligned Modal, pass justifyContent and alignItems to Modal.

Accessibility#

Uses React Native ARIA @react-native-aria/focus which follows the Dialog Modal WAI-ARIA design pattern.

Keyboard Interactions#

KeyDescription
TabMoves focus to the next tabbable element inside the dialog. If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog.
Shift + TabMoves focus to the previous tabbable element inside the dialog. If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog.
EscapeCloses the dialog

Props#

Modal#

NameTypeDescriptionDefault
isOpenbooleanIf true, the modal will open.-
onClosefunctionCallback invoked to close the modal.-
motionPresetfade, none, slideThe default animation or transition to apply to the modal.-
initialFocusRefReact.refThe least destructive action to get focus when dialog is open.-
finalFocusRefReact.refThe least destructive action to get focus when dialog is closed. (ios only)-
sizexs, sm,md,lg,xl,full, number, stringThe content of the modal.-
closeOnOverlayClickbooleanIf true, the modal will close when the overlay is clicked.-
idstringThe top-level id to use for the modal and it's sub-components.-
avoidKeyboardbooleanIf true, Modal will avoid keyboard to overlap.-
closeOnOverlayClickbooleanIf true, clicking on overlay will close the modal.-
overlayVisiblebooleanTo set the visibility the overlay.-
overlayColorstringTo set the color of overlay.-
isKeyboardDismissablebooleanIf false, modal cannot be closed using Escape key on web.true
accessibilityLabelstringTo set label for the modal, this will be announced by screenreader-

Children components#

  • Modal.Header,¬†Modal.Footer¬†and¬†Modal.Body¬†composes the¬†Box¬†component.
  • Modal.CloseButton¬†composes the¬†CloseButton.