Modal | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
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 a 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
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

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
isOpen
If true, the modal will open. Useful for controllable state behaviour
Type: boolean
onClose
Callback invoked when the modal is closed
Type: any
defaultIsOpen
If true, the modal will be opened by default
Type: boolean
size
The size of the modal
Type: string | number
initialFocusRef
The ref of element to receive focus when the modal opens.
Type: any
finalFocusRef
The ref of element to receive focus when the modal closes.
Type: any
avoidKeyboard
If true and the keyboard is opened, the modal will move up equvivalent to the keyboard height.
Type: boolean
Default: false
closeOnOverlayClick
If true, the modal will close when the overlay is clicked
Type: boolean
Default: true
isKeyboardDismissable
If true, the modal will close when Escape key is pressed
Type: boolean
Default: true
overlayVisible
If true, a backdrop element is visible
Type: boolean
Default: true
backdropVisible
If true, a backdrop element is visible
Type: boolean
Default: true
_backdrop
Props applied on Overlay.
Type: any
Children components
Modal.HeaderModal.Footer and Modal.Body composes the  component.
Modal.CloseButton composes the .
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the modal.
Info: We can easily extend the modal component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase