domains / software-engineering / react-native-development / react-native

react-native

Skill card

combined

The copies cover two distinct, non-overlapping procedures. The vercel-labs and sickn33 copies are identical best-practice guides for general React Native/Expo development (performance, animations, UI patterns). The google-labs-code copy is a specific workflow for converting Stitch HTML designs into React Native components, involving MCP tool calls, file downloads, and theme extraction. The jezweb copy is a third variation of the best-practice guide with different specific patterns (e.g., FlatList checklist, Expo Router structure). Because the Stitch conversion workflow is a unique procedure not present in the others, and the best-practice guides have different specific details, no single copy is the authentic source for all.

Repositories

Other copies

Combined skill

---
name: react-native
description: React Native and Expo best practices and Stitch design conversion workflow.
---

# React Native Skills

## General Best Practices

Reference these guidelines when building or optimizing React Native/Expo apps.

### 1. List Performance (CRITICAL)
- Use FlashList or FlatList for large lists.
- Memoize list item components.
- Stabilize callback references.
- Avoid inline style objects.
- Use `keyExtractor` and `getItemLayout` for FlatList.

### 2. Animation (HIGH)
- Animate only transform and opacity.
- Use `react-native-reanimated` for complex animations.
- Use `Gesture.Tap` instead of Pressable for gestures.

### 3. Navigation (HIGH)
- Use native stack and native tabs.
- Use Expo Router for file-based routing in new projects.

### 4. UI Patterns (HIGH)
- Use `expo-image` for all images.
- Use `Pressable` over `TouchableOpacity`.
- Handle safe areas with `SafeAreaView` or `useSafeAreaInsets`.
- Use `StyleSheet.create` or Nativewind.

## Stitch Design Conversion Workflow

Use this workflow when converting Stitch HTML designs to React Native components.

### Phase 1: Retrieval
1. Run `list_tools` to find the Stitch MCP prefix.
2. Call `[prefix]:get_screen` for every screen.
3. Check for existing `.stitch/designs/` files. Ask user to refresh or reuse.
4. Use `scripts/fetch-stitch.sh` to download HTML and PNG screenshots.
5. Visually audit the downloaded screenshots.
6. Save project metadata to `.stitch/metadata.json`.

### Phase 2: Theme Extraction
1. Extract `tailwind.config` tokens from the HTML `<head>`.
2. Create or update `src/theme.ts` with these tokens.
3. Verify theme matches the design.

### Phase 3: Component Mapping
1. Map HTML elements to React Native components (e.g., `<div>` to `View`, `<span>` to `Text`).
2. Convert CSS/Tailwind styles to `StyleSheet.create()`.
3. Ensure all text is wrapped in `Text` components.