Export: React Native

The React Native export packages a page as an Expo project — the starting point for a native iOS and Android app built from your design. This page covers what the generated project contains, how components map to React Native primitives, and where codegen ends and your device work begins.

What you get

Choosing Export → Expo / React Native (.zip) from the designer's top bar builds a zipped Expo project named after your page:

your-app/
  App.tsx           # your sections as an RN ScrollView
  package.json      # expo ~51, react-native 0.74
  app.json          # Expo config: name, slug, platforms
  babel.config.js   # babel-preset-expo
  tsconfig.json     # extends expo/tsconfig.base
  README.md

App.tsx wraps your content in a ScrollView, with each section rendered inside a padded View. It is a standard Expo TypeScript project you can open, run, and extend.

FormNode to RN primitive mapping

React Native has no HTML or DOM, so the export translates your page rather than copying markup. Rich text is flattened to plain text (formatting tags are stripped and sanitized away), and each component maps to a native primitive:

Your component	React Native output
Typography, Text, Alert, Chip, Link, HTML	`<Text>` with plain text
Button	`<Pressable>` wrapping a `<Text>` label
Stack	`<View>` with column layout
Row	`<View>` with row layout
Image	`<Image>` with a `uri` source (defaults to 120×120)
Divider	thin `<View>`
Spacer	fixed-height `<View>`
Anything else (containers)	`<View>` holding its children

Styles are mapped to React Native's style subset: pixel strings become plain numbers, and CSS properties with no RN equivalent — boxShadow, position, cursor, transition, textDecoration, gradient backgrounds, and similar — are dropped so the output stays valid.

NOTE

Because this is a translation, not a pixel-perfect copy, treat the export as a head start. The generated App.tsx is meant to be opened and refined — layouts that leaned on web-only CSS will need a native touch-up.

Codegen is tested; booting is a device step

There are two distinct stages, and it helps to keep them separate:

Code generation — turning your page into RN source — is covered by unit tests. The mapping (rich-text flattening, component-to-primitive translation, CSS-to-RN conversion, and the assembled project files) is verified in the test suite, so the code the export produces is exercised on every change.
End-to-end boot — installing dependencies and actually running the app on a simulator or a physical device — is a step you do on your machine. It depends on your local toolchain (Node, Expo, Xcode or Android Studio) and is not part of the export.

To boot the generated project:

bash

npm install
npx expo start

Then press i for the iOS simulator, a for Android, or w for web.

WARNING

As with the other exports, an exported app is a display starting point. FlowRunner's form submissions, flow runs, and stored data live on the platform — a standalone Expo app has no FlowRunner backend behind it unless you wire one up.

Export: React Native ​

What you get ​

FormNode to RN primitive mapping ​

Codegen is tested; booting is a device step ​

See also ​

Export: React Native

What you get

FormNode to RN primitive mapping

Codegen is tested; booting is a device step

See also