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
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: ResponsiveValue<number | "full" | "sm" | "6" | "2xs" | "2" | "8" | "xs" | "3" | "12" | "md" | "4" | "16" | "xl" | "5" | "24" | "32" | "7" | "0.5" | "lg" | "1" | "2xl" | "2.5" | "1.5" | "10" | "20" | "64" | ... 27 more ... | (string & {})>
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: InterfaceBoxProps<IFadeProps> & { in?: boolean; entryDuration?: number; exitDuration?: number; delay?: number; }
_fade
Props applied on Child Fade Animation.
Type: InterfaceBoxProps<IFadeProps> & { in?: boolean; entryDuration?: number; exitDuration?: number; delay?: number; }
_slide
Props applied on Child Slide Animation.
Type: InterfaceBoxProps<ISlideProps> & { in?: boolean; duration?: number; delay?: number; placement?: "bottom" | "top" | "right" | "left"; overlay?: boolean; }
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