Version: 3.0.0-next.40

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 sm, md, lg, full that maps to 60%, 75%, 90%, 100%, or a string or a numerical width of the Modal.

intialFocusRef and finalFocusRef Example#

Modal with avoidKeyboard#

Modal Placement#


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#

Name Type Description Default
isOpen boolean If true, the modal will open. Useful for controllable state behaviour -
onClose any Callback invoked when the modal is closed -
defaultIsOpen boolean If true, the modal will be opened by default -
size string | number The size of the modal -
initialFocusRef any The ref of element to receive focus when the modal opens. -
finalFocusRef any The ref of element to receive focus when the modal closes. -
avoidKeyboard boolean If true and the keyboard is opened, the modal will move up equvivalent to the keyboard height. false
closeOnOverlayClick boolean If true, the modal will close when the overlay is clicked true
isKeyboardDismissable boolean If true, the modal will close when Escape key is pressed true
overlayVisible boolean If true, a backdrop element is visible true

Modal implements Box

Children components#

  • Modal.HeaderModal.Footer and Modal.Body composes the Box component.
  • Modal.CloseButton composes the Button.