react-native

---

Description: React Native Development Standards Globs: **/.tsx, **/.ts, /screens//, /components//, **/App.tsx

React Native Development Standards

@base.mdc @typescript.mdc

Project Setup

• Use TypeScript for type safety
• Implement ESLint and Prettier for code quality
• Set up proper directory structure for scalability
• Use Expo for simpler projects and React Native CLI for complex requirements
• Configure proper module resolution
• Implement proper environment configuration
• Set up proper testing infrastructure
• Use React Native New Architecture where applicable

Directory Structure

• Organize by feature or domain
• Separate UI components from business logic
• Create reusable hooks for shared logic
• Implement services for API interactions
• Use proper navigation structure
• Create dedicated styles directory
• Organize assets efficiently
• Implement proper type definitions

Component Architecture

• Use functional components with hooks
• Create small, reusable UI components
• Implement proper component composition
• Use proper prop validation with TypeScript
• Create presentational vs container components
• Implement pure components for performance
• Use memo for expensive renders
• Create proper component documentation

Navigation

• Use React Navigation as the primary navigation library
• Implement type-safe navigation
• Create logical navigation hierarchy
• Handle deep linking properly
• Implement proper screen transitions
• Create reusable navigation patterns
• Handle authentication flows in navigation
• Implement proper error boundaries

Styling

• Use StyleSheet.create for styles
• Implement consistent theming
• Create responsive layouts with flexbox
• Use dimension-aware styling
• Implement proper dark mode support
• Create accessibility-friendly styles
• Use style composition for complex UIs
• Implement proper RTL support

State Management

• Use React Context for shared state
• Implement Redux or Zustand for complex state
• Use local state for component-specific state
• Leverage React Query for server state
• Implement proper persistence for offline support
• Create middleware for side effects
• Use proper state normalization
• Implement performance-optimized selectors