REACT-NATIVES
WIRED FOR SPEED
react-natives v2.1.2
Theme
Light
Dark
Get Started
Menu
Components
Feedback & Overlay
Overlay
A full-screen semi-transparent backdrop for overlaying content.
Example
Preview
Code
Props
Overlay Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes to apply to the overlay backdrop.
isVisible
boolean
false
Controls whether the overlay is displayed.
onPress
() => void
—
Callback invoked when the overlay backdrop is pressed.
Usage Guidelines
When to use
Use Overlay as a backdrop behind modals, drawers, or action sheets to focus user attention.
Best practices
•
Use Overlay as a building block for custom modal-like components.
•
Prefer Modal, Drawer, or ActionSheet which include Overlay behavior automatically.
•
Ensure overlay press dismisses the overlaid content for good UX.
Accessibility
Overlay traps focus within the overlaid content. The backdrop is hidden from screen readers to avoid confusion.
Related Components
Modal
A compound overlay dialog component with backdrop, content, header, body, footer, and close button sub-components.
Drawer
A compound slide-in panel component with backdrop, content, header, body, footer, and close button, supporting four placement directions.
ActionSheet
A compound bottom-sheet component that slides up from the bottom of the screen with a drag indicator, selectable items, and backdrop.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.