Modal | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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 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 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
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
isOpen
If true, the modal will open. Useful for controllable state behavior.
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: ThemeComponentSizeType<"Modal">
initialFocusRef
The ref of element to receive focus when the modal opens.
Type: RefObject<any>
finalFocusRef
The ref of element to receive focus when the modal closes.
Type: RefObject<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
animationPreset
Sets the animation type.
Type: "slide" | "fade"
Default: "fade"
_backdropFade
Props applied on Overlay Animation.
Type: Partial<IFadeProps>
_fade
Props applied on Child Fade Animation.
Type: Partial<IFadeProps>
_slide
Props applied on Child Slide Animation.
Type: Partial<ISlideProps>
_overlay
Props to be passed to the Overlay used inside of Modal.
Type: IOverlayProps
useRNModal
Type: boolean
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