Mobile Development Patterns

Mobile Development Patterns

Master AI-assisted mobile app development with React Native and Flutter using proven patterns and workflows.

Mobile Development Revolution

AI coding assistants have transformed mobile development from a complex, platform-specific challenge into a streamlined cross-platform experience. Learn patterns that leverage AI to build production-ready mobile apps faster than ever before.

React Native Development Patterns

Project Setup and Architecture

AI-Optimized React Native Setup

The Pattern: Use AI to generate a well-structured React Native project with proper navigation, state management, and styling setup from the start.

# In Cursor or Claude Code
"Create a React Native project structure with:
- React Navigation for routing
- Redux Toolkit for state management
- Styled Components for styling
- TypeScript configuration
- Proper folder structure (screens, components, utils, services)
- ESLint and Prettier setup"

Why It Works: Starting with a solid foundation prevents technical debt and ensures AI suggestions follow consistent patterns throughout development.

Component Development Workflow

Cursor Approach

// Use Cursor's Agent mode with context
"@screens @components Create a reusable Card component that:
- Supports dark/light theme
- Has press animations using Reanimated
- Accepts title, description, and image props
- Follows our design system tokens
- Includes proper TypeScript types"

Claude Code Approach

# Use Claude Code with project context
claude --add-dir src/components src/theme

"Build a Card component following our existing Button pattern
but with image support and Reanimated press effects"

Navigation Implementation

Type-Safe Navigation Pattern

// Ask AI to generate type-safe navigation
"Create a type-safe navigation structure for:
- Auth Stack (Login, Register, ForgotPassword)
- Main Tab Navigator (Home, Profile, Settings)
- Modal Stack (EditProfile, Notifications)
Using React Navigation v6 with TypeScript"

// AI will generate:
export type RootStackParamList = {
  Auth: NavigatorScreenParams<AuthStackParamList>;
  Main: NavigatorScreenParams<MainTabParamList>;
  Modal: NavigatorScreenParams<ModalStackParamList>;
};

export type AuthStackParamList = {
  Login: undefined;
  Register: undefined;
  ForgotPassword: { email?: string };
};
// ... complete type definitions and navigation setup

State Management Patterns

1. Define State Structure

   "Create Redux slices for:
   - User authentication (login, logout, token management)
   - App settings (theme, language, notifications)
   - Data cache with RTK Query
   Following Redux Toolkit best practices"

2. Generate API Integration

   "@api Create RTK Query API slices for our backend endpoints:
   - /auth/* endpoints
   - /user/* endpoints
   - /posts/* endpoints with pagination
   Include proper error handling and loading states"

3. Connect to Components

   "Update HomeScreen to:
   - Fetch posts using the postsApi
   - Show loading skeleton
   - Handle pull-to-refresh
   - Display error states
   - Implement infinite scroll"

Platform-Specific Code

Handling Platform Differences

// Pattern for platform-specific implementations
"Create a PlatformService that handles:
- Biometric authentication (Touch ID/Face ID on iOS, Fingerprint on Android)
- Push notifications setup
- Deep linking configuration
- File system access
With proper platform checks and fallbacks"

// AI generates clean abstractions:
export const BiometricService = {
  isAvailable: async () => {
    if (Platform.OS === 'ios') {
      return await TouchID.isSupported();
    } else {
      return await FingerprintScanner.isSensorAvailable();
    }
  },
  // ... rest of implementation
};

Flutter Development Patterns

Project Architecture with AI

Clean Architecture Setup

// Request comprehensive architecture
"Set up a Flutter project with clean architecture:
- Presentation layer (pages, widgets, controllers)
- Domain layer (entities, use cases, repositories)
- Data layer (models, data sources, repositories impl)
- Core module (errors, utils, constants)
- Dependency injection with get_it
- State management with Riverpod"

Result: AI generates a scalable, testable architecture that separates concerns properly.

Widget Development Patterns

Stateless Widgets

// Generate reusable widgets
"Create a CustomButton widget that:
- Supports primary, secondary, and danger variants
- Has loading state with CircularProgressIndicator
- Handles disabled state
- Uses our theme colors
- Has proper splash effects"

Stateful Widgets

// Complex stateful widgets
"Build an AnimatedCounter widget that:
- Animates number changes smoothly
- Supports currency formatting
- Has customizable animation duration
- Uses AnimationController properly
- Disposes resources correctly"

State Management with Riverpod

Riverpod Pattern

// Modern state management approach
"Create a Riverpod-based authentication flow:
1. AuthState with user, token, and loading states
2. AuthNotifier extending StateNotifier
3. Providers for login, logout, and token refresh
4. Auto-refresh token before expiry
5. Persist auth state with shared_preferences"

// AI generates complete implementation:
@freezed
class AuthState with _$AuthState {
  const factory AuthState({
    User? user,
    String? token,
    @Default(false) bool isLoading,
    String? error,
  }) = _AuthState;
}

class AuthNotifier extends StateNotifier<AuthState> {
  // Complete implementation with all methods
}

Navigation 2.0 Pattern

1. Define Route Structure

   "Implement Navigator 2.0 with go_router:
   - Splash → Auth flow → Main app
   - Nested navigation in tabs
   - Deep linking support
   - Route guards for authentication
   - Proper back button handling"

2. Generate Route Guards

   "Create route guards that:
   - Check authentication state
   - Redirect to login if needed
   - Preserve deep link after login
   - Handle role-based access"

3. Add Transition Animations

   "Add custom page transitions:
   - Slide for push navigation
   - Fade for tab switches
   - Scale for modals
   - Custom hero animations"

Cross-Platform Patterns

Shared Business Logic

Code Sharing Strategy

// For React Native with shared web code
"Create a shared utils package that works in both React Native and React web:
- Date formatting utilities
- Validation functions
- API client wrapper
- Common types and interfaces
- Business logic helpers
Ensure no platform-specific imports"

// For Flutter with platform channels
"Create a PlatformService that:
- Communicates with native iOS/Android code
- Handles method channels properly
- Has mock implementation for testing
- Includes error handling
- Documents all platform methods"

Design System Implementation

React Native

// Comprehensive design system
"Create a design system with:
- Theme provider supporting dark/light modes
- Typography scale (heading1-6, body, caption)
- Color tokens (primary, secondary, semantic colors)
- Spacing scale (xs, sm, md, lg, xl)
- Common components (Button, Input, Card, Modal)
- Animation presets
Following Material Design 3 guidelines"

Flutter

// Flutter design system
"Build a design system using Material 3:
- Custom ThemeData with color schemes
- TextTheme with custom fonts
- Reusable widget library
- Responsive breakpoints
- Platform-adaptive components
- Accessibility support"

Performance Optimization Patterns

React Native Performance

Performance Monitoring

// Implement performance tracking
"Add performance monitoring to our app:
1. Set up Flipper integration
2. Add custom performance markers
3. Track JS thread usage
4. Monitor memory usage
5. Identify and fix re-render issues
6. Optimize FlatList with proper props"

// AI provides specific implementations:
const PerformanceMonitor = {
  mark: (name: string) => {
    if (__DEV__) {
      Performance.mark(name);
    }
  },
  measure: (name: string, startMark: string, endMark: string) => {
    if (__DEV__) {
      Performance.measure(name, startMark, endMark);
    }
  }
};

Flutter Performance

Flutter Optimization

// Performance best practices
"Optimize our Flutter app performance:
1. Implement const constructors everywhere possible
2. Use ListView.builder for long lists
3. Add RepaintBoundary to expensive widgets
4. Implement image caching strategy
5. Minimize setState calls
6. Use keys properly for widget trees"

// AI generates optimized code:
class OptimizedListView extends StatelessWidget {
  const OptimizedListView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemExtent: 80.0, // Fixed height for performance
      cacheExtent: 200.0, // Prebuild optimization
      itemBuilder: (context, index) {
        return RepaintBoundary(
          child: const ListItem(index: index),
        );
      },
    );
  }
}

Testing Patterns

Automated Test Generation

React Native Testing

// Generate comprehensive tests
"@components/Button Generate tests for Button component:
- Render tests for all variants
- onPress handler tests
- Disabled state tests
- Loading state tests
- Accessibility tests
- Snapshot tests"

Flutter Testing

// Flutter widget tests
"@lib/widgets/custom_button Generate widget tests:
- Golden tests for all states
- Tap interaction tests
- Animation tests
- Theme adaptation tests
- Accessibility tests"

Deployment Patterns

CI/CD Setup

Automated Deployment

# Request CI/CD configuration
"Create GitHub Actions workflow for:
- React Native iOS and Android builds
- Automated testing on PR
- Code signing for iOS
- APK/AAB generation for Android
- Deployment to TestFlight and Play Store
- Version bumping
- Release notes generation"

AI generates complete workflow files with proper secrets handling and optimization.

Common Pitfalls and Solutions

Navigation State Loss

Problem: State lost during navigation Solution: “Implement navigation state persistence using react-navigation persistence or Flutter’s RestorationMixin”

Memory Leaks

Problem: Subscriptions not cleaned up Solution: “Add cleanup patterns to all useEffect hooks and dispose methods in StatefulWidgets”

Slow List Performance

Problem: FlatList/ListView lag Solution: “Optimize with getItemLayout, keyExtractor, and removeClippedSubviews”

Platform Inconsistencies

Problem: Different behavior on iOS/Android Solution: “Create platform-specific components with consistent APIs”

Next Steps

Advanced Mobile Patterns

Ready to dive deeper? Explore:

• Deep Linking: Universal links and app links
• Push Notifications: FCM and APNs integration
• Offline Support: Data persistence and sync
• Biometric Auth: Secure authentication flows
• In-App Purchases: Monetization strategies

Ask your AI assistant to guide you through implementing these advanced features with production-ready patterns.

Mobile-First AI Development

The key to successful mobile development with AI is providing clear context about platform constraints, user experience requirements, and performance considerations. Always specify your target platforms and minimum OS versions when requesting code generation.