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.
1---2name: react-native3description: Convert Stitch HTML designs to React Native components with StyleSheet4---5# Stitch to React Native Components67You 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`.89## Retrieval and networking101. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.112. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON.123. **Check for existing designs**: Before downloading, check if `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` already exist:13 - **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.14 - **If files do not exist**: Proceed to step 4.154. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains.16 - **HTML**: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"`17 - **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"`18 - This script handles the necessary redirects and security handshakes.195. **Visual audit**: Review the downloaded screenshot (`.stitch/designs/{page}.png`) to confirm design intent and layout details.2021## HTML to React Native mapping2223### Element mapping24Map HTML elements to React Native components using these rules:2526| HTML | React Native | Notes |27|------|-------------|-------|28| `<div>` | `View` | Default container |29| `<span>`, `<p>`, `<h1>`-`<h6>` | `Text` | All text must be wrapped in `Text`. Nest `Text` for inline styling. |30| `<img>` | `Image` | Use `source={{ uri }}` for remote images, `require()` for local assets. |31| `<button>`, `<a>` | `Pressable` | Prefer `Pressable` over `TouchableOpacity`. Use `onPress` instead of `onClick`. |32| `<input>` | `TextInput` | Map `placeholder`, `value`, `onChangeText`. |33| `<scroll container>` | `ScrollView` | For short lists only. Use `FlatList` for long or dynamic lists. |34| `<ul>`/`<ol>` with many items | `FlatList` | Requires `data`, `renderItem`, `keyExtractor`. |35| `<section>` with grouped data | `SectionList` | For grouped data with headers. Use tab navigator for tab-based layouts. |36| `<select>` | Third-party picker or custom modal | React Native has no built-in select. |37| `<svg>` | `react-native-svg` | Convert SVG markup to `Svg`, `Path`, `Circle`, etc. |38| Root wrapper | `SafeAreaView` | Wrap top-level screens to avoid notch/status bar overlap. |3940### Style mapping41CSS and Tailwind classes do not work in React Native. Convert all styles to `StyleSheet.create()`:4243**Layout**: Flexbox is the default layout system. `flexDirection` defaults to `'column'` (not `'row'` like web CSS).44- `display: flex` is implicit on every `View`.45- `justify-content` maps to `justifyContent`.46- `align-items` maps to `alignItems`.47- `gap` maps to `gap` (React Native 0.71+). For older versions, use `marginBottom` on children.4849**Dimensions**: Use numbers (not strings). `width: 100` means 100 density-independent pixels.50- Percentage strings are supported: `width: '100%'`.51- For responsive sizing, use `useWindowDimensions()` from `react-native`.52- There is no `vw`/`vh`. Calculate from `Dimensions.get('window')`.5354**Typography**: All text styles must be on `Text` components, never on `View`.55- `font-size` maps to `fontSize` (number, not string).56- `font-weight` maps to `fontWeight` (string: `'400'`, `'700'`, `'bold'`).57- `line-height` maps to `lineHeight` (number).58- `letter-spacing` maps to `letterSpacing`.59- `text-transform` maps to `textTransform`.60- `color` applies to `Text` only.6162**Borders and shadows**:63- `border-radius` maps to `borderRadius`.64- `box-shadow` does not exist. Use `elevation` (Android) and `shadowColor`/`shadowOffset`/`shadowOpacity`/`shadowRadius` (iOS).65- Use `Platform.select()` to apply platform-specific shadow styles.6667**Unsupported CSS properties** (handle manually or skip):68- `hover`, `transition`, `animation` (use `react-native-reanimated` for animations).69- `position: fixed` (use `position: 'absolute'` with manual offset).70- `overflow: auto` (use `ScrollView`).71- `z-index` works but only between sibling views.72- `opacity` works. `visibility: hidden` does not exist; use conditional rendering or `opacity: 0`.7374**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.7576### Platform-specific code77When the design requires different behavior on iOS and Android:7879```typescript80import { Platform } from 'react-native';8182const styles = StyleSheet.create({83 shadow: Platform.select({84 ios: {85 shadowColor: '#000',86 shadowOffset: { width: 0, height: 2 },87 shadowOpacity: 0.1,88 shadowRadius: 4,89 },90 android: {91 elevation: 4,92 },93 }),94});95```9697## Architectural rules9899* **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/`.100* **Logic isolation**: Move event handlers, API calls, and business logic into custom hooks in `src/hooks/`. Components should only handle rendering.101* **Data decoupling**: Move all static text, image URLs, and lists into `src/data/mockData.ts`. Components receive data through props.102* **Type safety**: Every component must export a TypeScript interface named `[ComponentName]Props` with `readonly` property modifiers.103* **No hardcoded styles**: Extract colors, spacing, and font sizes into `src/theme.ts`. Reference them in `StyleSheet.create()`.104* **Navigation**: Use React Navigation for screen transitions. Define screen types with `NativeStackScreenProps` or `BottomTabScreenProps`.105* **Accessibility**: Every interactive element must have `accessibilityLabel` and `accessibilityRole`. Images need `accessibilityLabel`. Use `accessibilityState` for toggles and checkboxes.106* **Safe areas**: Wrap top-level screen components with `SafeAreaView` from `react-native-safe-area-context` (not the one from `react-native`).107* **Project specific**: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React Native components.108109## Execution steps1101111. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation tools.1122. **Theme layer**: Create `src/theme.ts` from the extracted Tailwind config. Define colors, spacing, typography, and shadow presets.1133. **Data layer**: Create `src/data/mockData.ts` based on the design content. Extract all text, image URIs, and list data.1144. **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.1155. **Navigation wiring**: If the design has multiple screens, set up a `NavigationContainer` with a stack or tab navigator in `App.tsx`.1166. **Quality check**:117 * Run `npm run validate <file_path>` for each component.118 * Verify the final output against the `resources/architecture-checklist.md`.119 * Start Metro with `npx react-native start` or `npx expo start` to verify the live result on a simulator/device.120121## Troubleshooting122* **Fetch errors**: Ensure the URL is quoted in the bash command to prevent shell errors.123* **Validation errors**: Review the AST report and fix any missing interfaces or hardcoded styles.124* **Text outside Text component**: React Native crashes if raw strings appear outside `<Text>`. Verify all text nodes are wrapped.125* **Image sizing**: Unlike web `<img>`, React Native `Image` has no intrinsic size. Always specify `width` and `height` in styles or use `aspectRatio`.126* **FlatList vs ScrollView**: If you see a "VirtualizedList inside ScrollView" warning, replace the outer `ScrollView` with a plain `View` or use `FlatList` `ListHeaderComponent`/`ListFooterComponent`.
muhammedadnank