Version: 3.2.1

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#

Multiple Modals#

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#

Custom Backdrop Modal#


Development 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 ResponsiveValue<number | "px" | "container" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | ... 28 more ... | (string & {})> The size of the modal -
initialFocusRef RefObject<any> The ref of element to receive focus when the modal opens. -
finalFocusRef RefObject<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
backdropVisible boolean If true, a backdrop element is visible true
_backdrop any Props applied on Overlay. -
animationPreset "fade" | "slide" Sets the animation type fade

Modal implements Box

Children components#

  • Modal.Header,¬†Modal.Footer¬†and¬†Modal.Body¬†composes the¬†Box¬†component.
  • Modal.CloseButton¬†composes the¬†Button.

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of modal
We can easily extend the modal component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Modal: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.