Component (RN)
React Native Component Status
Status
Component checklist
Published
Figma (RN)
Figma Component Status
In Build
Code (Web)
HTML/CSS Code
N/A
Figma (Web)
Figma Component Status
N/A
Key points
Drawers are currently only available on the React Native platform
- Drawers slide in from the edge of the screen to display content and actions related to the main screen
- Drawers have two orientation behaviours based on viewport size
- On smaller viewports, drawers slide up from the bottom and resize to fit content
- On larger viewports, drawers slide in from the right with configurable widths
- Small 25% of the viewport
- Medium 50% of the viewport
- Large 75% of the viewport
- Full-width 100% of the viewport
- The remaining part of the viewport is covered with an overlay to focus attention on the drawer
- Drawers can be dismissed by closing the drawer, pressing Escape, or tapping the overlay