Flutter vs React Native vs Kotlin Multiplatform: The 2026 Architect's Guide

// Flutter: Widget Architecture Example
import 'package:flutter/material.dart';

// ✅ Stateless Widget (Immutable)
class ProductCard extends StatelessWidget {
  final String title;
  final double price;
  final VoidCallback onTap;

  const ProductCard({
    Key? key,
    required this.title,
    required this.price,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              const SizedBox(height: 8),
              Text(
                '$price.toStringAsFixed(2)',
                style: Theme.of(context).textTheme.titleLarge?.copyWith(
                  color: Colors.green,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// ✅ Stateful Widget with State Management
class ProductList extends StatefulWidget {
  @override
  _ProductListState createState() => _ProductListState();
}

class _ProductListState extends State<ProductList> {
  final List<Product> _products = [];
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _loadProducts();
  }

  Future<void> _loadProducts() async {
    setState(() => _isLoading = true);
    try {
      final products = await ProductService.fetchProducts();
      setState(() {
        _products = products;
        _isLoading = false;
      });
    } catch (e) {
      setState(() => _isLoading = false);
      // Handle error
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }

    return ListView.builder(
      itemCount: _products.length,
      itemBuilder: (context, index) {
        return ProductCard(
          title: _products[index].title,
          price: _products[index].price,
          onTap: () => _navigateToDetail(_products[index]),
        );
      },
    );
  }

  void _navigateToDetail(Product product) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => ProductDetailPage(product: product),
      ),
    );
  }
}

// ✅ Platform Channel Example (Native Integration)
import 'package:flutter/services.dart';

class NativeBridge {
  static const platform = MethodChannel('com.example/native');

  static Future<String> getDeviceInfo() async {
    try {
      final String result = await platform.invokeMethod('getDeviceInfo');
      return result;
    } on PlatformException catch (e) {
      return "Error: ${e.message}";
    }
  }
}

// React Native: Component Architecture Example
import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  ActivityIndicator,
  StyleSheet,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';

// ✅ Functional Component with Hooks
interface Product {
  id: string;
  title: string;
  price: number;
}

interface ProductCardProps {
  product: Product;
  onPress: (product: Product) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ product, onPress }) => {
  return (
    <TouchableOpacity
      style={styles.card}
      onPress={() => onPress(product)}
      activeOpacity={0.7}
    >
      <Text style={styles.title}>{product.title}</Text>
      <Text style={styles.price}>
        ${product.price.toFixed(2)}
      </Text>
    </TouchableOpacity>
  );
};

// ✅ State Management with Hooks
const ProductList: React.FC = () => {
  const navigation = useNavigation();
  const [products, setProducts] = useState<Product[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    loadProducts();
  }, []);

  const loadProducts = async () => {
    setIsLoading(true);
    setError(null);
    try {
      const response = await fetch('https://api.example.com/products');
      const data = await response.json();
      setProducts(data);
    } catch (err) {
      setError('Failed to load products');
    } finally {
      setIsLoading(false);
    }
  };

  const handleProductPress = (product: Product) => {
    navigation.navigate('ProductDetail', { productId: product.id });
  };

  if (isLoading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" color="#007AFF" />
      </View>
    );
  }

  if (error) {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>{error}</Text>
      </View>
    );
  }

  return (
    <FlatList
      data={products}
      renderItem={({ item }) => (
        <ProductCard product={item} onPress={handleProductPress} />
      )}
      keyExtractor={(item) => item.id}
      contentContainerStyle={styles.list}
    />
  );
};

// ✅ Native Module Integration (New Architecture)
import { NativeModules } from 'react-native';

const { NativeDeviceInfo } = NativeModules;

interface DeviceInfo {
  deviceId: string;
  model: string;
  systemVersion: string;
}

const getDeviceInfo = async (): Promise<DeviceInfo> => {
  try {
    // New Architecture: Synchronous call via JSI
    if (NativeDeviceInfo?.getDeviceInfoSync) {
      return NativeDeviceInfo.getDeviceInfoSync();
    }
    // Fallback: Async bridge call
    return await NativeDeviceInfo.getDeviceInfo();
  } catch (error) {
    throw new Error('Failed to get device info');
  }
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    padding: 16,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  price: {
    fontSize: 20,
    color: '#34C759',
    fontWeight: 'bold',
  },
  list: {
    paddingVertical: 8,
  },
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  error: {
    color: '#FF3B30',
    fontSize: 16,
  },
});

export default ProductList;

// Kotlin Multiplatform: Shared Business Logic
// commonMain/src/commonMain/kotlin/Product.kt

// ✅ Shared Data Models
data class Product(
    val id: String,
    val title: String,
    val price: Double,
    val description: String
)

// ✅ Shared Repository Interface
interface ProductRepository {
    suspend fun getProducts(): Result<List<Product>>
    suspend fun getProductById(id: String): Result<Product>
    suspend fun createProduct(product: Product): Result<Product>
}

// ✅ Shared Use Cases (Business Logic)
class GetProductsUseCase(
    private val repository: ProductRepository
) {
    suspend operator fun invoke(): Result<List<Product>> {
        return repository.getProducts()
    }
}

class GetProductByIdUseCase(
    private val repository: ProductRepository
) {
    suspend operator fun invoke(id: String): Result<Product> {
        if (id.isBlank()) {
            return Result.failure(IllegalArgumentException("Product ID cannot be blank"))
        }
        return repository.getProductById(id)
    }
}

// ✅ Shared ViewModel (State Management)
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow

class ProductListViewModel(
    private val getProductsUseCase: GetProductsUseCase
) {
    private val _uiState = MutableStateFlow<ProductListUiState>(ProductListUiState.Loading)
    val uiState: StateFlow<ProductListUiState> = _uiState.asStateFlow()

    suspend fun loadProducts() {
        _uiState.value = ProductListUiState.Loading
        getProductsUseCase().fold(
            onSuccess = { products ->
                _uiState.value = ProductListUiState.Success(products)
            },
            onFailure = { error ->
                _uiState.value = ProductListUiState.Error(error.message ?: "Unknown error")
            }
        )
    }
}

sealed class ProductListUiState {
    object Loading : ProductListUiState()
    data class Success(val products: List<Product>) : ProductListUiState()
    data class Error(val message: String) : ProductListUiState()
}

// ✅ Platform-Specific Implementations
// androidMain/src/androidMain/kotlin/ProductRepositoryImpl.kt
actual class ProductRepositoryImpl : ProductRepository {
    private val apiService = ApiService() // Android-specific HTTP client
    
    actual override suspend fun getProducts(): Result<List<Product>> {
        return try {
            val products = apiService.fetchProducts()
            Result.success(products)
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
    
    actual override suspend fun getProductById(id: String): Result<Product> {
        return try {
            val product = apiService.fetchProductById(id)
            Result.success(product)
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
    
    actual override suspend fun createProduct(product: Product): Result<Product> {
        return try {
            val created = apiService.createProduct(product)
            Result.success(created)
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
}

// iOS Implementation
// iosMain/src/iosMain/kotlin/ProductRepositoryImpl.kt
actual class ProductRepositoryImpl : ProductRepository {
    private val apiService = ApiService() // iOS-specific HTTP client (Ktor, etc.)
    
    actual override suspend fun getProducts(): Result<List<Product>> {
        // Same interface, different implementation
        return try {
            val products = apiService.fetchProducts()
            Result.success(products)
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
    
    // ... same pattern for other methods
}

// ✅ Expect/Actual Pattern for Platform APIs
// commonMain
expect class Platform() {
    val name: String
    val version: String
}

// androidMain
actual class Platform {
    actual val name: String = "Android"
    actual val version: String = android.os.Build.VERSION.SDK_INT.toString()
}

// iosMain
actual class Platform {
    actual val name: String = "iOS"
    actual val version: String = UIDevice.currentDevice.systemVersion
}

// Performance Comparison: List Rendering with 10,000 Items

// ✅ Flutter: Optimized List Rendering
import 'package:flutter/material.dart';

class OptimizedProductList extends StatelessWidget {
  final List<Product> products;

  const OptimizedProductList({Key? key, required this.products}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      // Key optimization: Only builds visible items
      itemCount: products.length,
      itemExtent: 80.0, // Fixed height for better performance
      cacheExtent: 200.0, // Cache items outside viewport
      itemBuilder: (context, index) {
        final product = products[index];
        return ProductListItem(
          key: ValueKey(product.id), // Stable keys for efficient diffing
          product: product,
        );
      },
    );
  }
}

// ✅ React Native: Optimized FlatList
import React, { useMemo, useCallback } from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

interface ProductListProps {
  products: Product[];
}

const OptimizedProductList: React.FC<ProductListProps> = ({ products }) => {
  // Memoize expensive computations
  const sortedProducts = useMemo(() => {
    return [...products].sort((a, b) => a.price - b.price);
  }, [products]);

  // Memoize render function
  const renderItem = useCallback(({ item }: { item: Product }) => {
    return <ProductListItem product={item} />;
  }, []);

  // Stable key extractor
  const keyExtractor = useCallback((item: Product) => item.id, []);

  // Optimize initial render
  const getItemLayout = useCallback(
    (data: any, index: number) => ({
      length: 80,
      offset: 80 * index,
      index,
    }),
    []
  );

  return (
    <FlatList
      data={sortedProducts}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      getItemLayout={getItemLayout}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={10}
      removeClippedSubviews={true}
      updateCellsBatchingPeriod={50}
    />
  );
};

// ✅ Kotlin Multiplatform: Native Performance
// Android (Jetpack Compose)
@Composable
fun OptimizedProductList(
    products: List<Product>,
    viewModel: ProductListViewModel
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(horizontal = 16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(
            items = products,
            key = { it.id } // Stable keys
        ) { product ->
            ProductListItem(
                product = product,
                onClick = { viewModel.onProductClick(product.id) }
            )
        }
    }
}

// iOS (SwiftUI)
struct OptimizedProductList: View {
    let products: [Product]
    @ObservedObject var viewModel: ProductListViewModel
    
    var body: some View {
        List(products, id: \.id) { product in
            ProductListItem(
                product: product,
                onTap: { viewModel.onProductClick(product.id) }
            )
        }
        .listStyle(.plain)
    }
}

// Performance Metrics (Approximate):
// - Flutter: ~16ms per frame (60fps), smooth scrolling
// - React Native: ~20-30ms per frame (with optimizations), occasional jank
// - Kotlin Multiplatform: ~16ms per frame (native performance), butter smooth

// Kotlin Multiplatform: Maximum Code Sharing Strategy
// ✅ Shared Business Logic (90-95% of code)

// commonMain/kotlin/domain/Product.kt
data class Product(
    val id: String,
    val title: String,
    val price: Double
)

// commonMain/kotlin/data/ProductRepository.kt
interface ProductRepository {
    suspend fun getProducts(): Result<List<Product>>
}

class ProductRepositoryImpl(
    private val api: ProductApi
) : ProductRepository {
    override suspend fun getProducts(): Result<List<Product>> {
        return try {
            val products = api.fetchProducts()
            Result.success(products)
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
}

// commonMain/kotlin/presentation/ProductListViewModel.kt
class ProductListViewModel(
    private val repository: ProductRepository
) {
    private val _state = MutableStateFlow<ProductListState>(ProductListState.Loading)
    val state: StateFlow<ProductListState> = _state.asStateFlow()

    suspend fun loadProducts() {
        _state.value = ProductListState.Loading
        repository.getProducts().fold(
            onSuccess = { products ->
                _state.value = ProductListState.Success(products)
            },
            onFailure = { error ->
                _state.value = ProductListState.Error(error.message)
            }
        )
    }
}

// ✅ Platform-Specific UI (5-10% of code)
// androidMain/kotlin/ui/ProductListScreen.kt
@Composable
fun ProductListScreen(viewModel: ProductListViewModel) {
    val state by viewModel.state.collectAsState()
    
    when (state) {
        is ProductListState.Loading -> LoadingIndicator()
        is ProductListState.Success -> {
            LazyColumn {
                items(state.products) { product ->
                    ProductCard(product = product)
                }
            }
        }
        is ProductListState.Error -> ErrorMessage(state.message)
    }
}

// iosMain/kotlin/ui/ProductListScreen.kt
struct ProductListScreen: View {
    @ObservedObject var viewModel: ProductListViewModel
    
    var body: some View {
        switch viewModel.state {
        case .loading:
            ProgressView()
        case .success(let products):
            List(products) { product in
                ProductCard(product: product)
            }
        case .error(let message):
            Text(message)
        }
    }
}

// Code Sharing: ~90-95% (business logic)
// Platform-specific: ~5-10% (UI only)

// Package Ecosystem Comparison

// ✅ Flutter: pub.dev (Rich Ecosystem)
// pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  # State Management
  provider: ^6.1.1
  riverpod: ^2.4.9
  bloc: ^8.1.3
  
  # Networking
  dio: ^5.4.0
  http: ^1.1.2
  
  # Local Storage
  shared_preferences: ^2.2.2
  sqflite: ^2.3.0
  
  # UI Components
  flutter_svg: ^2.0.9
  cached_network_image: ^3.3.1
  
  # Navigation
  go_router: ^12.1.3
  
  # Testing
  flutter_test:
    sdk: flutter
  mockito: ^5.4.4

// ✅ React Native: npm (Massive Ecosystem)
// package.json
{
  "dependencies": {
    // State Management
    "@reduxjs/toolkit": "^2.0.1",
    "zustand": "^4.4.7",
    "jotai": "^2.6.0",
    
    // Navigation
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    
    // Networking
    "axios": "^1.6.2",
    "@tanstack/react-query": "^5.17.0",
    
    // UI Components
    "react-native-paper": "^5.11.3",
    "react-native-elements": "^3.4.3",
    
    // Forms
    "react-hook-form": "^7.49.2",
    "zod": "^3.22.4",
    
    // Testing
    "@testing-library/react-native": "^12.4.2",
    "jest": "^29.7.0"
  }
}

// ✅ Kotlin Multiplatform: Gradle (Growing Ecosystem)
// build.gradle.kts (commonMain)
dependencies {
    // Coroutines
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
    
    // Serialization
    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0")
    
    // Networking
    implementation("io.ktor:ktor-client-core:2.3.5")
    implementation("io.ktor:ktor-client-content-negotiation:2.3.5")
    implementation("io.ktor:ktor-serialization-kotlinx-json:2.3.5")
    
    // Dependency Injection
    implementation("org.koin:koin-core:3.5.0")
    
    // State Management
    implementation("com.arkivanov.mvikotlin:mvikotlin:4.0.0")
    
    // Testing
    testImplementation("org.jetbrains.kotlinx:kotlinx-coroutines-test:1.7.3")
    testImplementation("io.mockk:mockk:1.13.8")
}

// Ecosystem Maturity (2026):
// - React Native: ⭐⭐⭐⭐⭐ (Most mature, largest ecosystem)
// - Flutter: ⭐⭐⭐⭐⭐ (Very mature, excellent Google support)
// - Kotlin Multiplatform: ⭐⭐⭐⭐ (Growing rapidly, JetBrains backing)

// ✅ Flutter: Riverpod (Modern State Management)
import 'package:flutter_riverpod/flutter_riverpod.dart';

// Provider Definition
final productRepositoryProvider = Provider<ProductRepository>((ref) {
  return ProductRepositoryImpl();
});

final productListProvider = FutureProvider<List<Product>>((ref) async {
  final repository = ref.watch(productRepositoryProvider);
  return repository.getProducts();
});

// Usage in Widget
class ProductListWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final productsAsync = ref.watch(productListProvider);
    
    return productsAsync.when(
      data: (products) => ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) => ProductCard(product: products[index]),
      ),
      loading: () => CircularProgressIndicator(),
      error: (error, stack) => Text('Error: $error'),
    );
  }
}

// ✅ React Native: Zustand + React Query (Modern Stack)
import { create } from 'zustand';
import { useQuery } from '@tanstack/react-query';

// Zustand Store
interface ProductStore {
  selectedProduct: Product | null;
  setSelectedProduct: (product: Product | null) => void;
}

const useProductStore = create<ProductStore>((set) => ({
  selectedProduct: null,
  setSelectedProduct: (product) => set({ selectedProduct: product }),
}));

// React Query for Server State
const useProducts = () => {
  return useQuery({
    queryKey: ['products'],
    queryFn: async () => {
      const response = await fetch('/api/products');
      return response.json();
    },
  });
};

// Component Usage
const ProductList: React.FC = () => {
  const { data: products, isLoading, error } = useProducts();
  const setSelectedProduct = useProductStore((state) => state.setSelectedProduct);
  
  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error loading products</Text>;
  
  return (
    <FlatList
      data={products}
      renderItem={({ item }) => (
        <ProductCard
          product={item}
          onPress={() => setSelectedProduct(item)}
        />
      )}
    />
  );
};

// ✅ Kotlin Multiplatform: MVI + StateFlow
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow

// MVI Pattern
sealed class ProductListIntent {
    object LoadProducts : ProductListIntent()
    data class SelectProduct(val id: String) : ProductListIntent()
}

sealed class ProductListState {
    object Loading : ProductListState()
    data class Success(val products: List<Product>) : ProductListState()
    data class Error(val message: String) : ProductListState()
}

class ProductListViewModel : ViewModel() {
    private val _state = MutableStateFlow<ProductListState>(ProductListState.Loading)
    val state: StateFlow<ProductListState> = _state.asStateFlow()
    
    private val repository: ProductRepository = ProductRepositoryImpl()
    
    fun handleIntent(intent: ProductListIntent) {
        when (intent) {
            is ProductListIntent.LoadProducts -> loadProducts()
            is ProductListIntent.SelectProduct -> selectProduct(intent.id)
        }
    }
    
    private fun loadProducts() {
        viewModelScope.launch {
            _state.value = ProductListState.Loading
            repository.getProducts().fold(
                onSuccess = { products ->
                    _state.value = ProductListState.Success(products)
                },
                onFailure = { error ->
                    _state.value = ProductListState.Error(error.message ?: "Unknown error")
                }
            )
        }
    }
    
    private fun selectProduct(id: String) {
        // Handle product selection
    }
}

// Usage in Compose (Android)
@Composable
fun ProductListScreen(viewModel: ProductListViewModel) {
    val state by viewModel.state.collectAsState()
    
    LaunchedEffect(Unit) {
        viewModel.handleIntent(ProductListIntent.LoadProducts)
    }
    
    when (state) {
        is ProductListState.Loading -> CircularProgressIndicator()
        is ProductListState.Success -> {
            LazyColumn {
                items(state.products) { product ->
                    ProductCard(
                        product = product,
                        onClick = {
                            viewModel.handleIntent(
                                ProductListIntent.SelectProduct(product.id)
                            )
                        }
                    )
                }
            }
        }
        is ProductListState.Error -> Text(state.message)
    }
}

// Long-Term Architecture Considerations

// ✅ Flutter: Future-Proof Architecture
// - Web support (stable)
// - Desktop support (Windows, macOS, Linux)
// - Embedded devices (Raspberry Pi, etc.)
// - Single codebase for all platforms

class MultiPlatformApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Same code runs on mobile, web, desktop
    return MaterialApp(
      title: 'My App',
      home: HomeScreen(),
    );
  }
}

// ✅ React Native: Ecosystem Evolution
// - New Architecture (JSI, Fabric, TurboModules)
// - Improved performance
// - Better native module integration
// - Web support via React Native Web

// Migration to New Architecture
import { TurboModuleRegistry } from 'react-native';

const MyTurboModule = TurboModuleRegistry.get('MyTurboModule');
// Synchronous calls, no bridge overhead

// ✅ Kotlin Multiplatform: Expanding Horizons
// - WebAssembly support (experimental)
// - Server-side Kotlin
// - Native desktop (Compose Multiplatform)
// - Maximum code reuse across all platforms

// Shared code for mobile, web, server
// commonMain/kotlin
class BusinessLogic {
    fun processData(data: Data): Result {
        // Runs on Android, iOS, Web, Server
        return Result.Success(processed)
    }
}

// Platform-specific UI
// androidMain: Jetpack Compose
// iosMain: SwiftUI
// jsMain: React/Web
// jvmMain: Spring Boot/Server

// Decision Framework: Choose Flutter When...

✅ You prioritize:
- UI consistency across platforms
- Maximum code sharing (95-100%)
- Excellent performance out of the box
- Google ecosystem integration
- Rapid prototyping and iteration
- Single codebase for mobile, web, desktop

✅ Your team has:
- Willingness to learn Dart
- Design-focused mindset
- Need for custom UI components

✅ Your project requires:
- Complex animations and transitions
- Custom design systems
- Cross-platform consistency
- Fast development cycles

// Example: E-commerce app with custom design
class ECommerceApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: CustomTheme.lightTheme,
      home: ProductCatalogScreen(),
    );
  }
}

// Decision Framework: Choose React Native When...

✅ You prioritize:
- Leveraging existing web/React expertise
- Large package ecosystem
- Rapid development with hot reload
- Web code reuse
- Large community and resources

✅ Your team has:
- Strong JavaScript/TypeScript skills
- React experience
- Web development background

✅ Your project requires:
- Quick time-to-market
- Integration with web codebase
- Access to npm ecosystem
- Flexible UI (can look native or custom)

// Example: Startup MVP with web team
const StartupApp = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

// Decision Framework: Choose Kotlin Multiplatform When...

✅ You prioritize:
- Native performance and feel
- Maximum business logic sharing
- Long-term maintainability
- Platform-specific UI polish
- Type safety and null safety

✅ Your team has:
- Native mobile development experience
- Kotlin/Java background
- Willingness to maintain platform-specific UI
- Enterprise/scale mindset

✅ Your project requires:
- Native performance critical
- Complex business logic
- Long-term project (5+ years)
- Enterprise-grade architecture
- Platform-specific UX requirements

// Example: Enterprise banking app
// commonMain: Shared business logic
class BankingService {
    suspend fun processTransaction(transaction: Transaction): Result<TransactionResult> {
        // Complex business logic shared across platforms
        return validateAndProcess(transaction)
    }
}

// androidMain: Native Android UI
@Composable
fun BankingScreen(viewModel: BankingViewModel) {
    // Native Android experience
}

// iosMain: Native iOS UI
struct BankingScreen: View {
    @ObservedObject var viewModel: BankingViewModel
    // Native iOS experience
}

// ✅ Flutter: Production Architecture Pattern
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

// Dependency Injection with Riverpod
final httpClientProvider = Provider<HttpClient>((ref) {
  return HttpClientImpl();
});

final productRepositoryProvider = Provider<ProductRepository>((ref) {
  return ProductRepositoryImpl(ref.watch(httpClientProvider));
});

final productServiceProvider = Provider<ProductService>((ref) {
  return ProductService(ref.watch(productRepositoryProvider));
});

// Error Handling
class AppErrorHandler {
  static void handleError(BuildContext context, Object error) {
    if (error is NetworkException) {
      _showSnackBar(context, 'Network error. Please check your connection.');
    } else if (error is ValidationException) {
      _showSnackBar(context, 'Invalid input. Please check your data.');
    } else {
      _showSnackBar(context, 'An unexpected error occurred.');
      // Log to crash reporting service
      CrashReporting.logError(error);
    }
  }
  
  static void _showSnackBar(BuildContext context, String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }
}

// ✅ React Native: Production Architecture
// src/App.tsx
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { NavigationContainer } from '@react-navigation/native';
import { ErrorBoundary } from 'react-error-boundary';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 3,
      staleTime: 5 * 60 * 1000, // 5 minutes
    },
  },
});

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <View style={styles.errorContainer}>
      <Text style={styles.errorText}>Something went wrong</Text>
      <Button onPress={resetErrorBoundary} title="Try again" />
    </View>
  );
}

export default function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <QueryClientProvider client={queryClient}>
        <NavigationContainer>
          <AppNavigator />
        </NavigationContainer>
      </QueryClientProvider>
    </ErrorBoundary>
  );
}

// Dependency Injection Pattern
// src/services/ServiceContainer.ts
class ServiceContainer {
  private static instance: ServiceContainer;
  private services: Map<string, any> = new Map();
  
  static getInstance(): ServiceContainer {
    if (!ServiceContainer.instance) {
      ServiceContainer.instance = new ServiceContainer();
    }
    return ServiceContainer.instance;
  }
  
  register<T>(key: string, service: T): void {
    this.services.set(key, service);
  }
  
  resolve<T>(key: string): T {
    return this.services.get(key) as T;
  }
}

// Usage
const container = ServiceContainer.getInstance();
container.register('productService', new ProductService());
const productService = container.resolve<ProductService>('productService');

// ✅ Kotlin Multiplatform: Production Architecture
// commonMain/kotlin/di/AppModule.kt
import org.koin.core.module.dsl.singleOf
import org.koin.dsl.module

val appModule = module {
    // Network
    single { createHttpClient() }
    single { createJson() }
    
    // Data
    single<ProductApi> { ProductApiImpl(get()) }
    single<ProductRepository> { ProductRepositoryImpl(get()) }
    
    // Domain
    single<GetProductsUseCase> { GetProductsUseCase(get()) }
    
    // Presentation
    viewModel { ProductListViewModel(get()) }
}

// Error Handling
sealed class AppError {
    data class NetworkError(val message: String) : AppError()
    data class ValidationError(val field: String, val message: String) : AppError()
    data class UnknownError(val throwable: Throwable) : AppError()
}

class ErrorHandler {
    fun handleError(error: AppError): String {
        return when (error) {
            is AppError.NetworkError -> "Network error: ${error.message}"
            is AppError.ValidationError -> "Validation error: ${error.message}"
            is AppError.UnknownError -> {
                // Log to crash reporting
                CrashReporting.logError(error.throwable)
                "An unexpected error occurred"
            }
        }
    }
}

// Testing Strategy
// commonTest/kotlin/ProductRepositoryTest.kt
class ProductRepositoryTest {
    @Test
    fun `getProducts returns success with valid data`() = runTest {
        val mockApi = mockk&lt;ProductApi&gt;()
        val repository = ProductRepositoryImpl(mockApi)
        
        coEvery { mockApi.fetchProducts() } returns listOf(
            Product(id = "1", title = "Test", price = 10.0)
        )
        
        val result = repository.getProducts()
        
        assertTrue(result.isSuccess)
        assertEquals(1, result.getOrNull()?.size)
    }
}

// Final Recommendation Matrix

const frameworkDecision = {
  // Choose React Native if:
  reactNative: {
    teamHasWebExpertise: true,
    needRapidIteration: true,
    prioritizeEcosystem: true,
    wantLargeCommunity: true,
    acceptablePerformance: true, // Good, not perfect
  },
  
  // Choose Flutter if:
  flutter: {
    prioritizeUIConsistency: true,
    needCustomDesign: true,
    wantMaximumCodeSharing: true,
    teamCanLearnDart: true,
    prioritizePerformance: true,
  },
  
  // Choose Kotlin Multiplatform if:
  kotlinMultiplatform: {
    haveNativeExperience: true,
    prioritizeNativePerformance: true,
    needLongTermMaintainability: true,
    wantMaximumBusinessLogicSharing: true,
    acceptablePlatformSpecificUI: true,
  },
};

// The Architect's Final Word:
// 
// In 2026, all three frameworks are excellent choices.
// React Native: Best for most teams (ecosystem + expertise)
// Flutter: Best for design-focused projects (consistency + performance)
// Kotlin Multiplatform: Best for native-first teams (performance + maintainability)
//
// The "best" framework is the one that fits YOUR context.
// Don't optimize for the perfect choice; optimize for the right choice.