Hand-written UI is where the first month goes

Most of a first version is screens: lists, cards, forms, a tab bar, a settings page. In React Native each one is a few hundred lines of layout, safe-area padding, scroll insets and platform branches, and none of it is what makes your app different.

Then the two platforms disagree. Apple’s Human Interface Guidelines and Google’s Material 3 are different design languages, so a screen that feels right on an iPhone looks borrowed on a Pixel. Doing both well by hand is two sets of rules to learn.

The fix is to stop typing the layer that is the same in every app, and keep typing the part that is yours.

Step 1: start from a template or pick your tabs

Open the App Builder. Start from one of ten starter apps, or answer a short wizard about your tabs and get an app shell to fill in. You see a whole app on the canvas straight away.

Step 2: drag blocks onto screens

Blocks are named in plain words: a list, a card, a form field, a chart, a button. Drop them on a screen, then edit every word, photo and colour in place. Switch the preview between iOS and Android to see each platform’s own controls.

Step 3: draw the navigation

Draw an arrow from a button, a row or a tab to the screen it opens. Each arrow says what it will build: it opens a screen, pops one up, or switches tab. An arrow the app cannot build is flagged on the canvas while you draw, not at the end. Then click through the whole app in the browser.

Step 4: send it to your coding agent

Press Send app to agent. The App Builder checks every screen in the order people reach it and flags anything unfinished. When it is ready, you paste one line into Claude Code, Cursor, Codex, VS Code or Gemini CLI.

The agent calls emit_app and writes a normal Expo project into your repo: your screens, the components they use, and an app shell (tabs, pushed screens, pop-ups, provider order, scroll insets) that we tested on real devices on both platforms. Then verify_app checks what it wrote, so the agent knows when it is finished instead of guessing.

Step 5: run it on a phone

npx expo run:ios
npx expo run:android

Expo Go cannot run the app, because several components use real native controls, so it needs a development build. On iOS you get Apple’s own controls with Liquid Glass. On Android you get Material 3 Expressive through Jetpack Compose. Native on both, from one codebase.

What you still write

The App Builder covers the UI and the navigation. Your data, sign-in, payments and push notifications are yours to add, usually by asking the same agent. Those integrations pull in native modules we do not ship, which is one reason we ask for a Mac.

What you need

  • You need a Mac with Xcode 26 to build the iOS app. Android needs only the Android SDK.
  • A coding agent, connected once from the Connect your agent page.
  • A subscription to generate code: $15 a seat a month, or $12 billed yearly, at the beta price (usually $25 and $20). Designing is free.

Verified on iOS 26 and on Android 16 with Material 3 Expressive. iOS 27 support is in progress. The compatibility page shows what was verified, and when.

Open the App Builder and start from a template.