Export

Exporting to React Native

Turn your wireframes into a runnable React Native project with typed components, a navigation stack, and a design token file — in one click.

⚛️ Export7 min read

What gets generated

📱

Screen components

One .tsx file per wireframe page, using StyleSheet.create() and typed props.

🧭

Navigation stack

React Navigation Stack.Navigator wired up with your page-link connections from the canvas.

🎨

Design tokens

tokens.ts with colours, spacing, and font sizes derived from your project palette.

📦

package.json

Correct peer dependencies pre-filled. Run npm install and you're ready to go.

How to export

Open Export panel

In the builder top bar click Export → React Native. A side panel opens listing all pages in the project.

Select pages

Tick the pages you want included. By default all pages are selected. Deselect utility or archived pages you don't need.

Choose options

Pick between Expo (default, easiest setup) or bare React Native CLI. Select TypeScript (recommended) or JavaScript.

Download & run

Click Download .zip. Unzip, then:

npm install && npx expo start

Generated file structure

File tree

my-app/
├── App.tsx               ← Navigator root
├── tokens.ts             ← Design tokens
├── screens/
│   ├── HomeScreen.tsx
│   ├── LoginScreen.tsx
│   └── ProfileScreen.tsx
├── components/
│   └── NavBar.tsx        ← Shared elements
└── package.json

Example generated screen

TypeScript — HomeScreen.tsx

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { tokens } from '../tokens';

type Props = NativeStackScreenProps<RootStack, 'Home'>;

export default function HomeScreen({ navigation }: Props) {
  return (
    <View style={s.root}>
      <Text style={s.hero}>Design faster, ship sooner</Text>
      <TouchableOpacity style={s.cta}
        onPress={() => navigation.navigate('Signup')}>
        <Text style={s.ctaText}>Get started</Text>
      </TouchableOpacity>
    </View>
  );
}

const s = StyleSheet.create({
  root:    { flex:1, backgroundColor: tokens.bg, padding: tokens.space4 },
  hero:    { fontSize: 28, fontWeight:'800', color: tokens.ink },
  cta:     { backgroundColor: tokens.accent, borderRadius: 10, padding: 14 },
  ctaText: { color:'#fff', fontWeight:'700', textAlign:'center' },
});

💡

Tip: The generated code is a scaffold, not production-ready code. Treat it as a head-start — add your state management, real API calls, and business logic on top.

Element mapping

WireFlow canvas elements map to React Native components as follows:

Text / Heading → Text
Button → TouchableOpacity + Text
Input → TextInput
Image placeholder → Image with a grey background
Rectangle / Card → View with border & shadow
Navbar → exported as a shared NavBar component