mobile-development

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:

1. Performance is Foundation, Not Feature - 70% abandon apps >3s load time
2. Every Kilobyte, Every Millisecond Matters - Mobile constraints are real
3. Offline-First by Default - Network is unreliable, design for it
4. User Context > Developer Environment - Think real-world usage scenarios
5. Platform Awareness Without Platform Lock-In - Respect platform conventions
6. Iterate, Don't Perfect - Ship, measure, improve cycle is survival
7. Security and Accessibility by Design - Not afterthoughts
8. Test on Real Devices - Simulators lie about performance
9. Architecture Scales with Complexity - Don't over-engineer simple apps
10. 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 lists
• list-performance-item-memo - Memoize list item components
• list-performance-callbacks - Stabilize callback references
• list-performance-inline-objects - Avoid inline style objects
• list-performance-function-references - Extract functions outside render
• list-performance-images - Optimize images in lists
• list-performance-item-expensive - Move expensive work outside items
• list-performance-item-types - Use item types for heterogeneous lists

2. Animation (HIGH)

• animation-gpu-properties - Animate only transform and opacity
• animation-derived-value - Use useDerivedValue for computed animations
• animation-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 images
• ui-image-gallery - Use Galeria for image lightboxes
• ui-pressable - Use Pressable over TouchableOpacity
• ui-safe-area-scroll - Handle safe areas in ScrollViews
• ui-scrollview-content-inset - Use contentInset for headers
• ui-menus - Use native context menus
• ui-native-modals - Use native modals when possible
• ui-measure-views - Use onLayout, not measure()
• ui-styling - Use StyleSheet.create or Nativewind

5. State Management (MEDIUM)

• react-state-minimize - Minimize state subscriptions
• react-state-dispatcher - Use dispatcher pattern for callbacks
• react-state-fallback - Show fallback on first render
• react-compiler-destructure-functions - Destructure for React Compiler
• react-compiler-reanimated-shared-values - Handle shared values with compiler

6. Rendering (MEDIUM)

• rendering-text-in-text-component - Wrap text in Text components
• rendering-no-falsy-and - Avoid falsy && for conditional rendering

7. Monorepo (MEDIUM)

• monorepo-native-deps-in-app - Keep native dependencies in app package
• monorepo-single-dependency-versions - Use single versions across packages

8. Configuration (LOW)

• fonts-config-plugin - Use config plugins for custom fonts
• imports-design-system-folder - Organize design system imports
• js-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

1. Testing only on simulators - Real devices show true performance
2. Ignoring platform conventions - Users expect platform-specific patterns
3. No offline handling - Network failures will happen
4. Poor memory management - Leads to crashes and poor UX
5. Hardcoded credentials - Security vulnerability
6. No accessibility - Excludes 15%+ of users
7. Premature optimization - Optimize based on metrics, not assumptions
8. Over-engineering - Start simple, scale as needed
9. Skipping real device testing - Simulators don't show battery/network issues
10. 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 each
• mobile-ios.md - Swift 6, SwiftUI, iOS architecture patterns, HIG, App Store requirements, platform capabilities
• mobile-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, analytics
• mobile-debugging.md - Debugging tools, performance profiling, crash analysis, network debugging, platform-specific debugging
• mobile-mindset.md - Thinking patterns, decision frameworks, platform-specific thinking, common pitfalls, debugging strategies

Resources

Official Documentation:

• React Native: https://reactnative.dev/
• Flutter: https://flutter.dev/
• iOS HIG: https://developer.apple.com/design/human-interface-guidelines/
• Material Design: https://m3.material.io/
• OWASP Mobile: https://owasp.org/www-project-mobile-top-10/

Tools & Testing:

• Detox E2E: https://wix.github.io/Detox/
• Appium: https://appium.io/
• Fastlane: https://fastlane.tools/
• Firebase: https://firebase.google.com/

Community:

• React Native Directory: https://reactnative.directory/
• Pub.dev (Flutter packages): https://pub.dev/
• Awesome React Native: https://github.com/jondot/awesome-react-native
• Awesome Flutter: https://github.com/Solido/awesome-flutter