Skip to main content
A block is a ready-made pattern built from components: a whole choice screen, a gated continue button, a hero section, a testimonial card. Instead of placing primitives one by one, you pick a block and it drops in fully assembled. Many blocks also wire themselves up for you by creating a backing variable and the conditional values that style or gate the result. Blocks are a starting point. Once a block is inserted it expands into normal components that you can edit, restyle, and delete freely. It does not stay “linked” to the preset.
This page describes the Blocks list in Advanced mode, the full catalog. In Simple mode, Insert shows an Elements tab: the Element Library, a visual two-pane browser limited to certified blocks (the subset verified to render identically across the canvas, iOS, and Expo). The catalog has grown alongside the certified set: it now also includes Title, Subtitle, Normal Text, Rich Text, Image, Lottie, Rating, more input types (Long Text, Phone, Number, Password), Hero, Review, Analysis Loader, six button styles, container blocks (Columns, Rows, Carousel), Comparison Chart, and App Rating Ask. See the Element Library for the certified set, names, and variants.

​
How to add a block

1

Select a screen

Blocks insert into the selected screen, so a screen must be selected. Until then the panel shows “Select a screen to add blocks”.
2

Open Insert > Blocks (or Screens)

In the left sidebar click Insert. Blocks holds everything that drops into the current screen. Screens holds full-screen templates (covered below). A Recently Used group appears in Blocks once you have inserted a few.
3

Pick a block

Click a block. If it has a wizard, a dialog opens so you can fill in labels, options, and a variable name; click Insert Block to finish. Blocks without a wizard insert immediately.
A block inserts as a sibling right after the currently selected component, or into the screen’s Root Stack if nothing inside the screen is selected. Full-screen templates from the Screens tab replace the screen’s contents (you are asked to confirm if the screen already has content).

​
The block catalog

Blocks are organized into the categories below. Wizards let you customize labels and variable names before inserting; where a block “auto-creates” a variable, the wizard’s Variable name field is optional and defaults to a generated name.

​
Selection

For “pick one” or “pick many” questions. Each option’s tap writes to a bound variable, and the selected option is highlighted with a conditional background and border. Continue and skip patterns. A “gated” button stays disabled (and dimmed to 0.5 opacity) until its gate variable has a value.

​
Chrome

Back, close, and progress. These are meant for the persistent zones (navigation bar, footer), not the body of a screen.

​
Content

Display patterns made of text, images, and icons. None create variables.

​
Input

Form fields bound to variables for collecting user input.

​
Social Proof

Trust and credibility patterns. None create variables.

​
Screens (the Screens tab)

Full-screen templates that build out an entire screen at once. These live in the Screens inner tab, not Blocks. Applying one to a screen that already has content asks you to confirm before replacing it.

​
How auto-wiring works

When a block creates a variable, it also creates the conditional values that read it. For example, a Single Choice List option uses a conditional background color: “when choice_x equals option_2, use the selected color, else the default”. A Gated Continue button uses a conditional disabled value: “when the gate variable is empty, disabled is true”. That is why the variable name matters. If you rename the variable a block created without updating the components that read it, the highlighting and gating stop working. Edit the variable name in the wizard before inserting, or rename consistently afterward in the Variables panel.

​
Example: a gated choice screen, the manual way

The Choice Screen template does all of this in one click, but it helps to see the pieces:
  1. Insert a Single Choice List block. It creates a string variable, say choice_a1b2, and a list of options that each set it on tap.
  2. Insert a Gated Continue block below it. In its wizard, set Gate variable to choice_a1b2 (the wizard usually auto-detects it).
  3. Now the Continue button is disabled and dimmed until the user selects an option, then enables and runs goNext.

​
Common mistakes

  • Inserting Gated Continue with no choice variable. The button has nothing to gate on and stays disabled forever. Add a choice block first. The wizard warns “No choice variables detected” when it cannot find one.
  • Renaming an auto-created variable without updating its bindings. The conditional styling and gating still point at the old key. Rename in the wizard, or update every reference in the Variables panel.
  • Expecting a block to stay linked to the preset. It does not. On insert it expands into normal components. Editing it never changes the original block.
  • Putting chrome blocks in a screen. Back, Close, and Progress Bar belong in zones so they persist across screens. Placing them in the screen body works but they will not stay put as the user moves through the flow.
  • Applying a Screen template over real work. Screen templates replace the screen’s contents. Confirm the replace prompt only if you mean to start over.