Back to Skills
expo-component-patterns
Advanced React Native component patterns with TypeScript including compound components, headless components, HOCs, polymorphic pressables, animated patterns, and platform-adaptive components
exporeact-nativetypescriptpatternscomponentsarchitecture
Version1.0.0
Authoragent-skills
CategoryMobile
Tags6
Expo Component Patterns
A comprehensive guide to advanced React Native component patterns using TypeScript, Expo SDK 52+, and React Native 0.76+. Each pattern includes production-ready code examples with full type safety.
When to Apply
Reference these patterns when:
- >Building reusable React Native component libraries
- >Creating compound components (bottom sheets, action menus)
- >Implementing headless/renderless patterns for native
- >Building platform-adaptive components
- >Working with Reanimated animated components
- >Implementing imperative handles for scroll/focus
Pattern Categories
| Priority | Category | Complexity | Prefix |
|---|---|---|---|
| 1 | Compound Components | MEDIUM | compound- |
| 2 | Headless/Renderless | LOW-MEDIUM | headless- |
| 3 | Higher-Order Components | MEDIUM | hoc- |
| 4 | Polymorphic Components | HIGH | polymorphic- |
| 5 | Controlled/Uncontrolled | MEDIUM | controlled- |
| 6 | Ref & Imperative Handle | MEDIUM | ref- |
| 7 | Slot Pattern | LOW | slot- |
| 8 | Provider Pattern | MEDIUM | provider- |
| 9 | Animated Patterns | HIGH | animated- |
| 10 | Platform-Adaptive | MEDIUM | platform- |
Quick Reference
1. Compound Components (MEDIUM)
- >
compound-bottom-sheet- Bottom sheet with compound API using @gorhom/bottom-sheet - >
compound-action-menu- Context-driven action menu with shared state - >
compound-form-group- Form group with shared validation context
2. Headless/Renderless (LOW-MEDIUM)
- >
headless-list- Headless list controller for pagination, refresh, empty state - >
headless-swipeable- Swipeable row with render callback
3. Higher-Order Components (MEDIUM)
- >
hoc-auth-gate- Authentication gate wrapping screens - >
hoc-keyboard-aware- KeyboardAvoidingView + scroll behavior wrapper
4. Polymorphic Components (HIGH)
- >
polymorphic-pressable- Pressable that renders as TouchableOpacity or Link - >
polymorphic-text- Text with variant-based typography
5. Controlled/Uncontrolled (MEDIUM)
- >
controlled-input- Native TextInput with dual-mode state - >
controlled-toggle- Switch with controllable state
6. Ref & Imperative Handle (MEDIUM)
- >
ref-imperative-scroll- ScrollView with imperative scrollTo - >
ref-native-handle- Custom input with focus/blur handle
7. Slot Pattern (LOW)
- >
slot-card-native- Card with native slots (header, media, footer) - >
slot-screen-layout- Screen layout with header, content, footer, FAB slots
8. Provider Pattern (MEDIUM)
- >
provider-theme- Theme provider with system preference detection - >
provider-toast- Toast notification provider with queue
9. Animated Patterns (HIGH)
- >
animated-shared-element- Shared element transitions with Reanimated - >
animated-layout-transition- Layout animations with entering/exiting
10. Platform-Adaptive (MEDIUM)
- >
platform-adaptive-component- iOS/Android adaptive rendering - >
platform-responsive-grid- Responsive grid using useWindowDimensions
How to Use
Read individual guide files for detailed pattern explanations and code:
guides/compound-bottom-sheet.md
guides/animated-shared-element.md
Full Compiled Document
For the complete guide with all patterns expanded: AGENTS.md