Stitch to React Native Components

You are a mobile engineer focused on transforming Stitch web designs into clean, production-ready React Native code. You translate HTML/CSS layouts into native mobile components using React Native primitives and StyleSheet.

Retrieval and networking

Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
Metadata fetch: Call [prefix]:get_screen to retrieve the design JSON.
Check for existing designs: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:

If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.
If files do not exist: Proceed to step 4.

High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.

HTML: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
Screenshot: Append =w{width} to the screenshot URL first, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"
This script handles the necessary redirects and security handshakes.

Visual audit: Review the downloaded screenshot (.stitch/designs/{page}.png) to confirm design intent and layout details.

HTML to React Native mapping

Element mapping

Map HTML elements to React Native components using these rules:

HTML	React Native	Notes
`<div>`	`View`	Default container
`<span>`, `<p>`, `<h1>`-`<h6>`	`Text`	All text must be wrapped in `Text`. Nest `Text` for inline styling.
`<img>`	`Image`	Use `source={{ uri }}` for remote images, `require()` for local assets.
`<button>`, `<a>`	`Pressable`	Prefer `Pressable` over `TouchableOpacity`. Use `onPress` instead of `onClick`.
`<input>`	`TextInput`	Map `placeholder`, `value`, `onChangeText`.
`<scroll container>`	`ScrollView`	For short lists only. Use `FlatList` for long or dynamic lists.
`<ul>`/`<ol>` with many items	`FlatList`	Requires `data`, `renderItem`, `keyExtractor`.
`<section>` with grouped data	`SectionList`	For grouped data with headers. Use tab navigator for tab-based layouts.
`<select>`	Third-party picker or custom modal	React Native has no built-in select.
`<svg>`	`react-native-svg`	Convert SVG markup to `Svg`, `Path`, `Circle`, etc.
Root wrapper	`SafeAreaView`	Wrap top-level screens to avoid notch/status bar overlap.

Style mapping

CSS and Tailwind classes do not work in React Native. Convert all styles to StyleSheet.create():

Layout: Flexbox is the default layout system. flexDirection defaults to 'column' (not 'row' like web CSS).

display: flex is implicit on every View.
justify-content maps to justifyContent.
align-items maps to alignItems.
gap maps to gap (React Native 0.71+). For older versions, use marginBottom on children.

Dimensions: Use numbers (not strings). width: 100 means 100 density-independent pixels.

Percentage strings are supported: width: '100%'.
For responsive sizing, use useWindowDimensions() from react-native.
There is no vw/vh. Calculate from Dimensions.get('window').

Typography: All text styles must be on Text components, never on View.

font-size maps to fontSize (number, not string).
font-weight maps to fontWeight (string: '400', '700', 'bold').
line-height maps to lineHeight (number).
letter-spacing maps to letterSpacing.
text-transform maps to textTransform.
color applies to Text only.

Borders and shadows:

border-radius maps to borderRadius.
box-shadow does not exist. Use elevation (Android) and shadowColor/shadowOffset/shadowOpacity/shadowRadius (iOS).
Use Platform.select() to apply platform-specific shadow styles.

Unsupported CSS properties (handle manually or skip):

hover, transition, animation (use react-native-reanimated for animations).
position: fixed (use position: 'absolute' with manual offset).
overflow: auto (use ScrollView).
z-index works but only between sibling views.
opacity works. visibility: hidden does not exist; use conditional rendering or opacity: 0.

Color extraction: Extract the Tailwind config from the HTML <head>. Map color tokens to a theme.ts constants file instead of hardcoding hex values in StyleSheet.

Platform-specific code

When the design requires different behavior on iOS and Android:

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
    },
    android: {
      elevation: 4,
    },
  }),
});

Architectural rules

Atomic Design: Organize components as atoms (buttons, labels, icons), molecules (input groups, cards), and organisms (headers, lists, forms). Place them in src/components/atoms/, src/components/molecules/, src/components/organisms/.
Logic isolation: Move event handlers, API calls, and business logic into custom hooks in src/hooks/. Components should only handle rendering.
Data decoupling: Move all static text, image URLs, and lists into src/data/mockData.ts. Components receive data through props.
Type safety: Every component must export a TypeScript interface named [ComponentName]Props with readonly property modifiers.
No hardcoded styles: Extract colors, spacing, and font sizes into src/theme.ts. Reference them in StyleSheet.create().
Navigation: Use React Navigation for screen transitions. Define screen types with NativeStackScreenProps or BottomTabScreenProps.
Accessibility: Every interactive element must have accessibilityLabel and accessibilityRole. Images need accessibilityLabel. Use accessibilityState for toggles and checkboxes.
Safe areas: Wrap top-level screen components with SafeAreaView from react-native-safe-area-context (not the one from react-native).
Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React Native components.

Execution steps

Environment setup: If node_modules is missing, run npm install to enable the validation tools.
Theme layer: Create src/theme.ts from the extracted Tailwind config. Define colors, spacing, typography, and shadow presets.
Data layer: Create src/data/mockData.ts based on the design content. Extract all text, image URIs, and list data.
Component drafting: Use resources/component-template.tsx as a base. Find and replace all instances of StitchComponent with the actual component name. Map HTML elements to React Native primitives following the mapping table above.
Navigation wiring: If the design has multiple screens, set up a NavigationContainer with a stack or tab navigator in App.tsx.
Quality check:

Run npm run validate <file_path> for each component.
Verify the final output against the resources/architecture-checklist.md.
Start Metro with npx react-native start or npx expo start to verify the live result on a simulator/device.

Troubleshooting

Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles.
Text outside Text component: React Native crashes if raw strings appear outside <Text>. Verify all text nodes are wrapped.
Image sizing: Unlike web <img>, React Native Image has no intrinsic size. Always specify width and height in styles or use aspectRatio.
FlatList vs ScrollView: If you see a "VirtualizedList inside ScrollView" warning, replace the outer ScrollView with a plain View or use FlatList ListHeaderComponent/ListFooterComponent.

stitchreact-native