Components

Arrange children vertically. Use it for forms, cards and screen sections.

Arrange children horizontally. Use it for toolbars, settings rows and compact summaries.

Create a general-purpose container. Use it for backgrounds, overlays, progress tracks and positioned content.

Consume free space in a stack. Use it to separate a title from trailing actions.

Separate adjacent sections with a thin native view. Use it between settings rows or list items.

Lay out content inside the usable screen area. Use it for screens that draw behind a notch, status bar or home indicator.

Group siblings without creating another native view. Use it when a component returns several adjacent elements.

Display text with native font rendering. Use it for labels, paragraphs and reactive values.

Display a bundled, remote or local-file image. Use it for avatars, covers and photos returned by the picker or camera.

Show a platform symbol without bundling a raster icon. Use it for common actions and status indicators.

Place content over a native blurred backdrop. Use it for a floating toolbar or a caption over artwork.

Render vector shapes in one drawing surface. Use it for diagrams, custom icons and small charts.

Draw a custom outline from SVG-style path commands. Use it for icons and irregular shapes.

Draw a rectangle or rounded rectangle. Use it for chart bars and diagram blocks.

Draw a circle. Use it for dots, badges and circular chart markers.

Draw an ellipse. Use it for oval markers and illustrations.

Draw a straight line. Use it for chart axes, connectors and ticks.

Connect a series of points without closing the shape. Use it for line charts and open outlines.

Connect points and close the outline. Use it for arrows, badges and filled regions.

Apply shared paint or transforms to several drawing shapes. Use it to move or style a diagram section together.

Play video in a native surface. Use it for trailers, lessons and media feeds.

Embed a live camera preview and capture photos or video. Use it for a scanner or a custom capture screen.

Embed a web page in a native view. Use it for hosted help, web content or a service that only offers a web interface.

Run an action with the platform button. Use it for submit, retry and confirmation actions.

Make custom content respond to presses. Use it for cards, icon buttons and actions with a custom appearance.

Collect editable text. Use it for search, account details and forms.

Choose an on/off setting. Use it for preferences that take effect immediately.

Select a number along a range. Use it for volume, brightness and continuous adjustments.

Choose a date, time or both with a native picker. Use it for deadlines, appointments and reminders.

Choose one item from a native menu. Use it for longer option lists that should not occupy the whole screen.

Choose one of a few visible options. Use it for a time range, filter or display mode.

Scroll a page whose children can all stay mounted. Use it for an article, form or a small set of sections.

Render a large collection with native scrolling and recycled cells. Use it for feeds, catalogs, grids and chat histories.

Swipe between pages with a native pager. Use it for onboarding, image galleries and full-screen sections.

Define one page inside Pager. Use it to keep each onboarding step or gallery item sized to the viewport.

Present contextual content over the current screen. Use it for filters, a queue or a lightweight editor.

Attach a native action menu to content. Use it for secondary actions on a row, photo or card.

Own the app navigation tree. With component routes you write it in app.tsx; with file routes the compiler generates it from app/.

Register a screen in a Router. Use it in an app with component routes, rather than file routes.

Create a native tab bar with an independent stack for each tab. Use it for the main destinations of an app.

Configure one destination in a native tab bar. Use it for a section such as Library or Settings.

Navigate from pressable content. Use it for a row or label whose action opens a screen.

Mount content while a condition is truthy. Use it for expanded details, signed-in content and optional panels.

Render the first matching state. Use it for mutually exclusive loading, empty and ready views.

Describe one branch of a Switch. Use it to associate a condition with a specific view.

Render a short collection while preserving item identity. Use it for tags, checklist rows and small menus.

Replace failing child content with a recovery UI. Use it around independently recoverable sections.

Wait for initial resources in a subtree before revealing it. Use it when several related pieces of a screen should appear together.

Show that work is in progress when its duration is unknown. Use it next to a loading label or as a Loading fallback.

Set system bar appearance while a view is active. Use it for a dark gallery or a screen that draws behind system UI.

Match the native launch screen with an animated view. Use it to transition the launch artwork into your first screen.

Render an individual part of the configured splash artwork. Use it for custom launch transitions with separate logo and brand motion.