domains / families / software-engineering / react-native

react-native

combined

Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. React Native and Expo patterns for building performant mobile apps. Covers list performance, animations with Reanimated, navigation, UI patterns, state management, platform-specific code, and Expo workflows. Use when building or reviewing React Native code. Triggers: 'react native', 'expo', 'mobile app', 'react native performance', 'flatlist', 'reanimated', 'expo router', 'mobile development', 'ios app', 'android app'.

When to use

• Building React Native or Expo apps
• Optimizing list and scroll performance
• Implementing animations with Reanimated
• Working with images and media
• Configuring native modules or fonts
• Structuring monorepo projects with native dependencies

When not to use

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Skill page

Conflict

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.