---

name: react-native-components description: Build modern React Native components using function components and composition. Use when building or refactoring React Native function components and composable UI. metadata: triggers: files: - '/*.tsx' - '/*.jsx' keywords: - component - props - children - composition - presentational - container

React Native Components

Priority: P0 (CRITICAL)

Implementation Guidelines

• Function Components Only: Use hooks. No class components.
• Container/Presentational: Separate logic (hooks, data fetching) from UI (JSX, styling).
• Composition: Use children prop. Prefer composition over prop drilling.
• Props: TypeScript interfaces. Destructure in params.
• File Size: Keep components < 250 lines. Split if larger.
• One Component Per File: Named exports for components.
• Naming: PascalCase for components. use* for hooks.
• Imports: Group - React → External → Internal → Styles.
• Platform Components: Use built-in (View, Text, TouchableOpacity). Avoid DOM (div, span).

Anti-Patterns

• No Classes: Use hooks instead.
• No Nested Components: Define at top level.
• No Inline Styles: Use StyleSheet.create.
• No Index Keys: Use stable IDs.
• No Deep Nesting: Max 3 levels.

References

See references/patterns.md for Container/Presentational split, HOCs, Render Props, Compound Components, and Slot patterns.

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

• data fetching

• Additional task-grounded exact anchors: nested component; top level.