Modal | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
Modal
A Modal is an overlay on the primary window or another dialog window. Content behind the modal dialog remains inert and users cannot interact with it.
Show Code
Playground
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.
Copy
import { Modal } from 'native-base';
Examples
Basic
Playground
Multiple Modals
Playground
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.
Playground
intialFocusRef and finalFocusRef Example
Playground
Modal with avoidKeyboard
Playground
Modal Placement
Playground
Custom Backdrop Modal
Playground

Tip: If you want a specifically aligned Modal, pass justifyContent and alignItems to Modal.
Accessibility
Uses React Native ARIA which follows the .
Keyboard Interactions
Key
Description
Tab
Moves 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 + Tab
Moves 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.
Escape
Closes the dialog
Props
Modal
Children components
Modal.Header, Modal.Footer and Modal.Body composes the  component.
Modal.CloseButton composes the .
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of modal.
Info: We can easily extend the modal component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase