How to connect a React Native app to Layouts
Connect your React Native repo to Layouts; Layouts reads the component tree and lays every screen onto an infinite canvas. Changes you accept on the canvas come back to your repo as ordinary code changes — typically a pull request.
Step 1 — Sign in
Sign in to Layouts. Free tier covers small projects with no credit card.
Step 2 — Connect the repo
Authorize Layouts to read your React Native codebase. Layouts needs read access only; no secrets, no env vars. Both bare React Native and Expo-managed projects are supported.
Step 3 — Layouts builds the canvas
Layouts inspects your screens, components, and navigation, then lays every screen onto an infinite canvas at real device fidelity. This step is typically one to three minutes for an average app. Read more about how the canvas is built →
Step 4 — Talk to the design agent
Click any screen or element, then describe the change. "Make the home page purple." "Tighten the spacing on the profile card." A variant appears beside the original.
Step 5 — Accept and ship
When a variant is good, accept it. Layouts produces a code change in your repo — typically a pull request — that you review like any other engineering change.
What to do if it fails
If the canvas comes up incomplete, the usual culprits are dynamic imports the analyzer cannot resolve, or screens that require backend data Layouts cannot reach. Both are addressable; contact us with a repo URL and we will get you unblocked.
Frequently asked
What does Layouts need from my React Native repo?
Read access. Layouts inspects components and screens to build the canvas; it does not need secrets or credentials.
Does Layouts work with Expo?
Yes. Both bare React Native and Expo-managed projects work.
Do changes flow back to my repo?
Yes. Accepting a variant produces a code change — typically delivered as a pull request.
Ready in two minutes
Connect your React Native repo and see your app on a canvas.
Connect your app →