| name | mobile-development |
| description | Cross-platform and native mobile development with React Native, Flutter, Swift/SwiftUI, Kotlin/Jetpack Compose. Covers mobile UI, offline-first architecture, push notifications, deep linking, biometrics, app store deployment, list performance, animations, and Expo best practices. Use when building mobile apps, choosing native vs cross-platform, optimizing battery/memory/network, deploying to app stores, or working with React Native/Expo. |
| license | MIT |
| metadata | {"sources":["samhvw8-mobile-development v1.0.0","vercel-react-native-skills v1.0.0"]} |
Mobile Development
Production-ready mobile development with modern frameworks, best practices, mobile-first thinking patterns, and React Native/Expo-specific optimization rules.
When to Use
- Building mobile applications (iOS, Android, or cross-platform)
- Implementing mobile-first design and UX patterns
- Optimizing for mobile constraints (battery, memory, network, small screens)
- Making native vs cross-platform technology decisions
- Implementing offline-first architecture and data sync
- Following platform-specific guidelines (iOS HIG, Material Design)
- Optimizing mobile app performance and user experience
- Implementing mobile security and authentication
- Testing mobile applications (unit, integration, E2E)
- Deploying to App Store and Google Play
- 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
Mobile Development Mindset
The 10 Commandments of Mobile Development:
- Performance is Foundation, Not Feature - 70% abandon apps >3s load time
- Every Kilobyte, Every Millisecond Matters - Mobile constraints are real
- Offline-First by Default - Network is unreliable, design for it
- User Context > Developer Environment - Think real-world usage scenarios
- Platform Awareness Without Platform Lock-In - Respect platform conventions
- Iterate, Don't Perfect - Ship, measure, improve cycle is survival
- Security and Accessibility by Design - Not afterthoughts
- Test on Real Devices - Simulators lie about performance
- Architecture Scales with Complexity - Don't over-engineer simple apps
- Continuous Learning is Survival - Mobile landscape evolves rapidly
See: references/mobile-mindset.md for thinking patterns and decision frameworks
Technology Selection Guide
Cross-Platform Frameworks:
- React Native: JavaScript expertise, web code sharing, mature ecosystem (121K stars, 67% familiarity)
- Flutter: Performance-critical apps, complex animations, fastest-growing (170K stars, 46% adoption)
Native Development:
- iOS (Swift/SwiftUI): Maximum iOS performance, latest features, Apple ecosystem integration
- Android (Kotlin/Jetpack Compose): Maximum Android performance, Material Design 3, platform optimization
See: references/mobile-frameworks.md for detailed framework comparisons
Quick Decision Matrix
| Need | Choose |
|---|
| JavaScript team, web code sharing | React Native |
| Performance-critical, complex animations | Flutter |
| Maximum iOS performance, latest features | Swift/SwiftUI native |
| Maximum Android performance, Material 3 | Kotlin/Compose native |
| Rapid prototyping | React Native + Expo |
| Desktop + mobile | Flutter |
| Enterprise with JavaScript skills | React Native |
| Startup with limited resources | Flutter or React Native |
| Gaming or heavy graphics | Native (Swift/Kotlin) or Unity |
Framework Quick Comparison (2024-2025)
| Criterion | React Native | Flutter | Swift/SwiftUI | Kotlin/Compose |
|---|
| Stars | 121K | 170K | N/A | N/A |
| Adoption | 35% | 46% | iOS only | Android only |
| Performance | 80-90% native | 85-95% native | 100% native | 100% native |
| Dev Speed | Fast (hot reload) | Very fast (hot reload) | Fast (Xcode Previews) | Fast (Live Edit) |
| Learning Curve | Easy (JavaScript) | Medium (Dart) | Medium (Swift) | Medium (Kotlin) |
| UI Paradigm | Component-based | Widget-based | Declarative | Declarative |
| Community | Huge (npm) | Growing | Apple ecosystem | Android ecosystem |
| Best For | JS teams, web sharing | Performance, animations | iOS-only apps | Android-only apps |
React Native & Expo Rules by Priority
| Priority | Category | Impact | Prefix |
|---|
| 1 | List Performance | CRITICAL | list-performance- |
| 2 | Animation | HIGH | animation- |
| 3 | Navigation | HIGH | navigation- |
| 4 | UI Patterns | HIGH | ui- |
| 5 | State Management | MEDIUM | react-state- |
| 6 | Rendering | MEDIUM | rendering- |
| 7 | Monorepo | MEDIUM | monorepo- |
| 8 | Configuration | LOW | fonts-, imports- |
1. List Performance (CRITICAL)
list-performance-virtualize - Use FlashList for large listslist-performance-item-memo - Memoize list item componentslist-performance-callbacks - Stabilize callback referenceslist-performance-inline-objects - Avoid inline style objectslist-performance-function-references - Extract functions outside renderlist-performance-images - Optimize images in listslist-performance-item-expensive - Move expensive work outside itemslist-performance-item-types - Use item types for heterogeneous lists
2. Animation (HIGH)
animation-gpu-properties - Animate only transform and opacityanimation-derived-value - Use useDerivedValue for computed animationsanimation-gesture-detector-press - Use Gesture.Tap instead of Pressable
3. Navigation (HIGH)
navigation-native-navigators - Use native stack and native tabs over JS navigators
4. UI Patterns (HIGH)
ui-expo-image - Use expo-image for all imagesui-image-gallery - Use Galeria for image lightboxesui-pressable - Use Pressable over TouchableOpacityui-safe-area-scroll - Handle safe areas in ScrollViewsui-scrollview-content-inset - Use contentInset for headersui-menus - Use native context menusui-native-modals - Use native modals when possibleui-measure-views - Use onLayout, not measure()ui-styling - Use StyleSheet.create or Nativewind
5. State Management (MEDIUM)
react-state-minimize - Minimize state subscriptionsreact-state-dispatcher - Use dispatcher pattern for callbacksreact-state-fallback - Show fallback on first renderreact-compiler-destructure-functions - Destructure for React Compilerreact-compiler-reanimated-shared-values - Handle shared values with compiler
6. Rendering (MEDIUM)
rendering-text-in-text-component - Wrap text in Text componentsrendering-no-falsy-and - Avoid falsy && for conditional rendering
7. Monorepo (MEDIUM)
monorepo-native-deps-in-app - Keep native dependencies in app packagemonorepo-single-dependency-versions - Use single versions across packages
8. Configuration (LOW)
fonts-config-plugin - Use config plugins for custom fontsimports-design-system-folder - Organize design system importsjs-hoist-intl - Hoist Intl object creation
Read individual rule files for detailed explanations and code examples. Each rule file contains incorrect/correct code examples with explanations.
For the complete React Native guide with all rules expanded: AGENTS.md
Key Best Practices (2024-2025)
Performance Targets:
- App launch: <2 seconds (70% abandon if >3s)
- Memory usage: <100MB for typical screens
- Network requests: Batch and cache aggressively
- Battery impact: Respect Doze Mode and background restrictions
- Animation: 60 FPS (16.67ms per frame)
Architecture:
- MVVM for small-medium apps (clean separation, testable)
- MVVM + Clean Architecture for large enterprise apps
- Offline-first with hybrid sync (push + pull)
- State management: Zustand (React Native), Riverpod 3 (Flutter), StateFlow (Android)
Security (OWASP Mobile Top 10):
- OAuth 2.0 + JWT + Biometrics for authentication
- Keychain (iOS) / KeyStore (Android) for sensitive data
- Certificate pinning for network security
- Never hardcode credentials or API keys
- Implement proper session management
Testing Strategy:
- Unit tests: 70%+ coverage for business logic
- Integration tests: Critical user flows
- E2E tests: Detox (React Native), Appium (cross-platform), XCUITest (iOS), Espresso (Android)
- Real device testing mandatory before release
Deployment:
- Fastlane for automation across platforms
- Staged rollouts: Internal - Closed - Open - Production
- Mandatory: iOS 17 SDK (2024), Android 15 API 35 (Aug 2025)
- CI/CD saves 20% development time
Performance Budgets
Recommended Targets:
- App size: <50MB initial download, <200MB total
- Launch time: <2 seconds to interactive
- Screen load: <1 second for cached data
- Network request: <3 seconds for API calls
- Memory: <100MB for typical screens, <200MB peak
- Battery: <5% drain per hour of active use
- Frame rate: 60 FPS (16.67ms per frame)
Implementation Checklist
Project Setup:
- Choose framework - Initialize project - Configure dev environment - Setup version control - Configure CI/CD - Team standards
Architecture:
- Choose pattern (MVVM/Clean) - Setup folders - State management - Navigation - API layer - Error handling - Logging
Core Features:
- Authentication - Data persistence - API integration - Offline sync - Push notifications - Deep linking - Analytics
UI/UX:
- Design system - Platform guidelines - Accessibility - Responsive layouts - Dark mode - Localization - Animations
Performance:
- Image optimization - Lazy loading - Memory profiling - Network optimization - Battery testing - Launch time optimization
Quality:
- Unit tests (70%+) - Integration tests - E2E tests - Accessibility testing - Performance testing - Security audit
Security:
- Secure storage - Authentication flow - Network security - Input validation - Session management - Encryption
Deployment:
- App icons/splash - Screenshots - Store listings - Privacy policy - TestFlight/Internal testing - Staged rollout - Monitoring
Platform-Specific Guidelines
iOS (Human Interface Guidelines):
- Native navigation patterns (tab bar, navigation bar)
- iOS design patterns (pull to refresh, swipe actions)
- San Francisco font, iOS color system
- Haptic feedback, 3D Touch/Haptic Touch
- Respect safe areas and notch
Android (Material Design 3):
- Material navigation (bottom nav, navigation drawer)
- Floating action buttons, material components
- Roboto font, Material You dynamic colors
- Touch feedback (ripple effects)
- Respect system bars and gestures
Common Pitfalls to Avoid
- Testing only on simulators - Real devices show true performance
- Ignoring platform conventions - Users expect platform-specific patterns
- No offline handling - Network failures will happen
- Poor memory management - Leads to crashes and poor UX
- Hardcoded credentials - Security vulnerability
- No accessibility - Excludes 15%+ of users
- Premature optimization - Optimize based on metrics, not assumptions
- Over-engineering - Start simple, scale as needed
- Skipping real device testing - Simulators don't show battery/network issues
- Not respecting battery - Background processing must be justified
Reference Navigation
Core Technologies:
mobile-frameworks.md - React Native, Flutter, Swift, Kotlin, framework comparison matrices, when to use eachmobile-ios.md - Swift 6, SwiftUI, iOS architecture patterns, HIG, App Store requirements, platform capabilitiesmobile-android.md - Kotlin, Jetpack Compose, Material Design 3, Play Store, Android-specific features
Best Practices & Development Mindset:
mobile-best-practices.md - Mobile-first design, performance optimization, offline-first architecture, security, testing, accessibility, deployment, analyticsmobile-debugging.md - Debugging tools, performance profiling, crash analysis, network debugging, platform-specific debuggingmobile-mindset.md - Thinking patterns, decision frameworks, platform-specific thinking, common pitfalls, debugging strategies
Resources
Official Documentation:
Tools & Testing:
Community:
