Design to React Native

What you get

One component file. Every element carries a style with literal left, top, width, and height, so the screen renders at the coordinates you drew.

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

export default function Reminders() {
  const [ih3, setIh3] = React.useState(96);

  return (
    <ScrollView style={styles.screen} contentContainerStyle={{ minHeight: 844 + (Math.max(0, ih3 - 96)) }} showsVerticalScrollIndicator={false}>
      <Text style={styles.title}>{"Reminders"}</Text>
      <View style={styles.card} />
      <TextInput style={[styles.note, { height: ih3 }]} placeholder={"Add a note..."} placeholderTextColor="#9ca3af" multiline scrollEnabled={false} onContentSizeChange={(e) => setIh3(Math.max(96, e.nativeEvent.contentSize.height + 2))} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  title: {
    position: 'absolute',
    left: 24,
    top: 64,
    width: 200,
    height: 28,
    color: '#17171A',
    fontFamily: 'Inter',
    fontSize: 22,
    lineHeight: 29,
    textAlign: 'left',
    fontWeight: '700',
  },
  card: {
    position: 'absolute',
    left: 24,
    top: 112,
    width: 220,
    height: 96,
    borderRadius: 16,
    backgroundColor: '#2A50D8',
  },
  note: {
    position: 'absolute',
    left: 24,
    top: 232,
    width: 280,
    minHeight: 96,
    backgroundColor: '#ffffff',
    color: '#17171A',
    fontFamily: 'Inter',
    fontSize: 16,
    paddingHorizontal: 12,
    paddingVertical: 10,
    textAlignVertical: 'top',
    overflow: 'hidden',
    textAlign: 'left',
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#E4E1D8',
  },
});

Which devices offer it

React Native is offered for phone and tablet presets, iOS and Android, and for generic artboards. It is not offered for macOS, Windows, or watchOS screens, because covering those needs the platform forks rather than React Native proper, and offering a target we cannot fully build for would be a lie in a dropdown.

What it handles

Placement. Absolute, from your canvas coordinates. No flex containers are emitted, deliberately. See the fidelity guide for why.

Multiline inputs that grow. A multiline TextInput measures its own content through onContentSizeChange and grows as the user types. Every element below it moves down by the same amount, which is what the canvas shows you.

Gradients. Gradient fills export as expo-linear-gradient, with start and end points computed from the angle you set, rather than snapped to a fixed diagonal.

Scrolling. The screen wraps in a ScrollView when the canvas is taller than the device, and also whenever the design contains a multiline field, even if everything currently fits. The field can grow past the bottom of the device at runtime, so the scroll container has to exist before it is needed.

What it does not handle

• No responsive layout. One screen, one device size.
• No horizontal scrolling. Only the HTML target does that today.
• Desktop and watch targets are not offered, as above.

Working with the output

The export is a component. Import it, render it, and it is yours: there is no runtime library of ours in it and no dependency on us.

Two external dependencies are possible, both only if your design uses the feature. expo-linear-gradient, if a shape has a gradient fill. And React Navigation, if a button navigates to another screen: the export calls navigation.navigate() and expects each screen registered in a Stack.Navigator. Neither is ours, and neither appears unless you use the feature that needs it, but React Navigation is the one worth knowing about before you export a multi-screen flow.

Generated variable names come from the layer names you set on the canvas, camelCased, so naming your shapes well in the inspector pays off directly in readability of the export. A shape left with its default name becomes shape1, shape2, and so on.

Two things you may notice in the output. React.useState appears only when the design contains a multiline field, to hold that field's grown height; without one, the component is a plain function with no hooks. And rectangles carry borderRadius: 0 even when you set no radius, which is harmless boilerplate rather than an implied rounded corner.