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

Stitch to React Native Components

Retrieval and networking

HTML to React Native mapping

Element mapping

Style mapping

Platform-specific code

Architectural rules

Execution steps

Troubleshooting

Score

Proud of your score? Add this badge to your README.

Stitchreact Native FAQ

How do I install the Stitchreact Native skill?

What does the Stitchreact Native skill do?

Is the Stitchreact Native skill free?

Does Stitchreact Native work with Claude Code and OpenClaw?

Recommended skills

Skills by category

Related guides