Design with the visual editor

Compose a screen

The component library holds 62 built-in types across layout, content, forms, navigation, feedback and media. Search for what you need and drop it on the page or inside a container. Containers lay out their children with the same flexible rules React Native uses, so placement follows the parent.

Layers shows the structure of the page. Drag a layer before, inside or after another, or move it with the keyboard.

1. Click a component to select it. Shift, Ctrl or Cmd-click adds to or removes from the selection; drag across empty canvas to select several.
2. Drag a component or a layer and follow the insertion guide to its new place.
3. For a keyboard move, focus a layer, press Space, choose the destination with the arrow keys and press Enter. Escape cancels.

Get the details right

Double-click any text, button label or badge to edit it in place; keyboard users can focus it and press F2. Enter saves, Shift+Enter adds a line and Escape cancels.

Drag a selected component's side or corner handles to set its size, or focus a handle and use the arrow keys (Shift moves ten pixels). A reset control in the Inspector returns a property to its default. A finished resize or a change across a selection is one undo step.

Themes and fonts

Set your app's colours and fonts in the Themes panel, then link components to them in the Inspector. Change a theme colour and every linked detail follows, including your custom components. Explicit colours stay independent.

Font controls offer a library of 18 bundled families with live previews, plus your theme's font and inherited fonts.

Reuse a design as a custom component

Turn a layer or a group of sibling layers into a custom component to reuse the design. Its structure and appearance update every linked copy together, while placement, size, visibility and locking can stay local to each copy. Detach a copy when it needs its own content or structure.

Custom components written in code are registered from the code workspace and appear in the library like any other component.

Shared designs do not yet have variants or per-copy text overrides.

Try it on different sizes

Switch device presets, orientation or zoom to inspect your layout. These are editor choices and do not change the app. Choose Preview for working controls and navigation.

A layout that looks right in the browser is a good sign, not proof of how a phone renders it. Test on a device too.