Layout & Presentation
Control layout structure and how flows appear on screen.
Layout & Presentation
Layout components control how child components are arranged within a screen, and presentation styles determine how the entire screen appears on the user's device. Together, they give you full control over the structure and appearance of every in-app experience.
Container
The Container is the fundamental layout component. It groups child components together and arranges them using flexbox properties. Every screen has an implicit root container, and you can nest additional containers to create complex layouts.
Properties
| Property | Type | Description |
|---|---|---|
| Direction | select | Column (vertical, default) or Row (horizontal). |
| Justify Content | select | Main-axis distribution: start, center, end, space-between, space-around, space-evenly. |
| Align Items | select | Cross-axis alignment: start, center, end, stretch, baseline. |
| Gap | number | Spacing between child components in pixels. |
| Padding | spacing | Internal spacing (top, right, bottom, left). |
| Margin | spacing | External spacing. |
| Width | size | Container width. Pixel value, percentage, or "auto". |
| Height | size | Container height. |
| Background Color | color | Container fill color. |
| Border Radius | number | Corner rounding. |
| Border Width | number | Border stroke width. |
| Border Color | color | Border stroke color. |
| Overflow | select | How overflowing content is handled: visible, hidden, scroll. |
| Flex Wrap | select | Whether children wrap to the next line: nowrap, wrap. |
Common layout patterns
Header with pinned footer:
Use a column container for the full screen. Place content at the top, add a spacer with fillSpace enabled, then place buttons at the bottom. The spacer expands to push the buttons to the bottom edge.
Horizontal button row:
Wrap two or more buttons in a row container with gap spacing. Set each button to equal width for a balanced layout, or let them size to their content.
Centered content block:
Set a container's justifyContent to "center" and alignItems to "center" to perfectly center its children both vertically and horizontally.
Stack
The Stack component is a simplified container optimized for common stacking patterns. It arranges children in a single direction with consistent spacing.
Properties
| Property | Type | Description |
|---|---|---|
| Direction | select | Vertical or horizontal. Default: vertical. |
| Gap | number | Spacing between children. |
| Align Items | select | Cross-axis alignment. |
| Padding | spacing | Internal spacing. |
| Width | size | Stack width. |
Stack is a convenience wrapper around Container with fewer configuration options, making it faster to set up for simple vertical or horizontal layouts.
Presentation Styles
Presentation style determines how a screen is displayed on the user's device. Each screen in a flow can have its own presentation style.
Fullscreen
The default presentation style. The screen takes over the entire device display, covering your app's UI completely. Fullscreen is appropriate for:
- Onboarding flows that require full attention
- Feature announcements with rich media
- Surveys and feedback forms
- Permission request pre-explanations
Bottom Sheet
The screen slides up from the bottom of the device as a sheet overlay. Your app's content remains visible behind the sheet, dimmed by a configurable overlay. Bottom sheets are appropriate for:
- Quick prompts that do not need full-screen real estate
- Contextual actions related to what the user was doing
- Non-blocking announcements
- Lightweight surveys (NPS, thumbs up/down)
Bottom sheet configuration
| Property | Default | Description |
|---|---|---|
| Initial Height | medium (50%) | How tall the sheet appears: small (30%), medium (50%), large (75%), full (95%). |
| Corner Radius | 0 | Rounding of the top-left and top-right corners. |
| Show Handle | true | Display a drag indicator at the top of the sheet. |
| Handle Color | #9CA3AF | Color of the drag indicator. |
| Background Color | #FFFFFF | Sheet background fill. |
| Show Overlay | true | Dim the content behind the sheet. |
| Overlay Color | #000000 | Scrim/overlay color. |
| Overlay Opacity | 0.32 | Scrim transparency (0 = invisible, 1 = opaque). |
| Draggable | true | Allow the user to drag the sheet up and down. |
| Dismiss on Overlay Tap | true | Close the sheet when the user taps outside it. |
| Dismiss on Swipe Down | true | Close the sheet when the user swipes it down. |
| Animation Duration | 300ms | How long the slide-up/slide-down animation takes. |
Bottom sheet configuration is per-screen. You can mix presentation styles within a single flow — for example, start with a fullscreen onboarding screen, then show a bottom sheet survey at the end.