React Native

Design to React Native code

Design the screen on the One Redesign canvas, then export it. Every style in the generated React Native carries the exact `left`, `top`, `width`, and `height` you drew, so what renders on device is what is on your canvas. The same screen also exports to HTML/CSS, SwiftUI, and Flutter.

Try it with React Native See all four platforms

What does the React Native output look like?

React Native

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function SignIn() {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>{"Sign in"}</Text>
      <View style={styles.continueBtn} />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F6F4EE',
  },
  title: {
    position: 'absolute',
    left: 24,
    top: 96,
    width: 180,
    height: 22,
    color: '#17171A',
    fontFamily: 'Inter',
    fontSize: 14,
    lineHeight: 18,
    textAlign: 'left',
    fontWeight: '600',
  },
  continueBtn: {
    position: 'absolute',
    left: 24,
    top: 130,
    width: 180,
    height: 28,
    borderRadius: 6,
    backgroundColor: '#2A50D8',
  },
});

This is the actual export, unedited.

Why does it match the design exactly?

Pixel-exact placement
every shape's style carries the canvas's literal `left/top/width/height`, so the exported screen is positioned exactly as drawn, not re-flowed into a guessed layout.
Multiline fields grow and push
a multiline `TextInput` grows its height as you type (measured live via `onContentSizeChange`) and pushes every element below it down by that exact delta, matching the canvas.
Angle-accurate gradients
gradient fills export as `expo-linear-gradient` with start/end points computed from the same angle as the canvas, not a fixed diagonal approximation.

Is the React Native output responsive?

No. A screen is authored at one device size and exports at those coordinates, which is exactly what keeps it exact. Need a tablet layout? Author it as a second screen.

Do I own the exported React Native code?

Yes. It is a React Native component. Import it, render it, ship it. Nothing of ours runs at runtime.

See all four platforms

Try it with React Native

The demo opens on the React Native tab. Edit the canvas and watch the code change.