React Native vs Flutter : Comparatif complet 2026

// TurboModule avec JSI - appel synchrone au code natif
import { TurboModuleRegistry } from 'react-native'

// Ancien bridge : communication asynchrone via JSON
// Nouvelle architecture : références directes C++ via JSI
const DeviceModule = TurboModuleRegistry.get('DeviceInfo')

// Appel synchrone sans sérialisation JSON
const deviceInfo = DeviceModule.getDeviceInfo()
console.log(deviceInfo.model) // Accès instantané

// Fabric permet un rendu concurrent
// Les composants s'affichent de manière synchrone
// Éliminant le "jank" des animations complexes

// Flutter dessine chaque pixel via Impeller
import 'package:flutter/material.dart';

class PerformantAnimation extends StatefulWidget {
  @override
  _PerformantAnimationState createState() => _PerformantAnimationState();
}

class _PerformantAnimationState extends State<PerformantAnimation>
    with SingleTickerProviderStateMixin {
  // Animation fluide garantie par Impeller
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    // Impeller précompile les shaders
    // Plus de "jank" au premier lancement
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    // 60/120 FPS constants grâce à Impeller
    return FadeTransition(
      opacity: _animation,
      child: const Card(child: Text('Animation fluide')),
    );
  }
}

// React Native - Optimisation du démarrage avec Hermes
// metro.config.js
module.exports = {
  transformer: {
    // Hermes améliore le cold start de ~40%
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        // Bytecode précompilé pour démarrage rapide
        inlineRequires: true,
      },
    }),
  },
}

// App.tsx - Lazy loading des modules
import { lazy, Suspense } from 'react'
import { ActivityIndicator, View } from 'react-native'

// TurboModules chargés à la demande
const HeavyFeature = lazy(() => import('./features/HeavyFeature'))

export function App() {
  return (
    <Suspense fallback={<ActivityIndicator />}>
      <HeavyFeature />
    </Suspense>
  )
}

// Flutter - Optimisation mémoire avec const constructors
// widgets/optimized_list.dart
import 'package:flutter/material.dart';

class OptimizedList extends StatelessWidget {
  final List<String> items;

  // const constructor pour réutilisation des widgets
  const OptimizedList({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    // ListView.builder crée les items à la demande
    // Économise la mémoire sur les longues listes
    return ListView.builder(
      itemCount: items.length,
      // Seuls les items visibles sont en mémoire
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(items[index]),
          // const évite les reconstructions inutiles
          leading: const Icon(Icons.article),
        );
      },
    );
  }
}

// React Native - Hot Reload avec Fast Refresh
// components/UserCard.tsx
import { View, Text, StyleSheet } from 'react-native'
import type { User } from '../types'

// Modification → rafraîchissement en 1-2 secondes
// L'état du composant est préservé
export function UserCard({ user }: { user: User }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{user.name}</Text>
      {/* Changer cette ligne → Hot Reload instantané */}
      <Text style={styles.email}>{user.email}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
    // Modification des styles → mise à jour immédiate
    shadowOpacity: 0.1,
  },
  name: { fontSize: 18, fontWeight: '600' },
  email: { fontSize: 14, color: '#666' },
})

// Flutter - Syntaxe Dart à maîtriser
// models/user.dart
import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';
part 'user.g.dart';

// Immutabilité avec Freezed (pattern courant Flutter)
@freezed
class User with _$User {
  const factory User({
    required String id,
    required String name,
    required String email,
    @Default(false) bool isVerified,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) =>
      _$UserFromJson(json);
}

// Utilisation avec null safety
void processUser(User? user) {
  // Dart impose la gestion explicite des nulls
  final name = user?.name ?? 'Anonyme';
  print('Utilisateur: $name');
}

// Spécification TypeScript pour Codegen
import type { TurboModule } from 'react-native'
import { TurboModuleRegistry } from 'react-native'

export interface Spec extends TurboModule {
  // Codegen génère le code natif iOS/Android
  getDeviceId(): string;
  getBatteryLevel(): Promise<number>;
  getSystemVersion(): string;
}

export default TurboModuleRegistry.getEnforcing<Spec>('DeviceInfo')

// Implémentation Android générée par Codegen
package com.app.deviceinfo

import com.facebook.react.bridge.Promise
import com.facebook.react.module.annotations.ReactModule

@ReactModule(name = DeviceInfoModule.NAME)
class DeviceInfoModule : NativeDeviceInfoSpec() {

    override fun getName() = NAME

    // Appel synchrone via JSI
    override fun getDeviceId(): String {
        return android.provider.Settings.Secure.getString(
            reactApplicationContext.contentResolver,
            android.provider.Settings.Secure.ANDROID_ID
        )
    }

    // Appel asynchrone avec Promise
    override fun getBatteryLevel(promise: Promise) {
        val batteryManager = reactApplicationContext
            .getSystemService(Context.BATTERY_SERVICE) as BatteryManager
        val level = batteryManager
            .getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
        promise.resolve(level.toDouble())
    }

    companion object {
        const val NAME = "DeviceInfo"
    }
}

import 'package:flutter/services.dart';

class DeviceService {
  // Canal de communication avec le code natif
  static const _channel = MethodChannel('com.app/device');

  // Appel asynchrone vers le code natif
  static Future<String> getDeviceId() async {
    try {
      final String result = await _channel.invokeMethod('getDeviceId');
      return result;
    } on PlatformException catch (e) {
      throw DeviceException('Erreur récupération ID: ${e.message}');
    }
  }

  // Réception d'événements depuis le natif
  static Stream<int> get batteryLevelStream {
    const eventChannel = EventChannel('com.app/device/battery');
    return eventChannel
        .receiveBroadcastStream()
        .map((event) => event as int);
  }
}

import Flutter
import UIKit

class DevicePlugin: NSObject, FlutterPlugin {

    static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(
            name: "com.app/device",
            binaryMessenger: registrar.messenger()
        )
        let instance = DevicePlugin()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    func handle(_ call: FlutterMethodCall,
                result: @escaping FlutterResult) {
        switch call.method {
        case "getDeviceId":
            // Retourne l'identifiant unique iOS
            let deviceId = UIDevice.current.identifierForVendor?.uuidString
            result(deviceId ?? "unknown")
        default:
            result(FlutterMethodNotImplemented)
        }
    }
}

// Exemple : Application avec UI personnalisée complexe
// screens/animated_dashboard.dart
import 'package:flutter/material.dart';

class AnimatedDashboard extends StatelessWidget {
  const AnimatedDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    // UI pixel-perfect identique sur toutes les plateformes
    return CustomScrollView(
      slivers: [
        // Animations complexes fluides avec Impeller
        SliverAppBar(
          expandedHeight: 200,
          flexibleSpace: FlexibleSpaceBar(
            // Animation de parallaxe native
            background: AnimatedGradient(),
          ),
        ),
        // Graphiques personnalisés avec CustomPainter
        SliverToBoxAdapter(
          child: CustomPaint(
            painter: ChartPainter(data: salesData),
            size: const Size(double.infinity, 300),
          ),
        ),
      ],
    );
  }
}

// Exemple : Application avec comportements natifs plateforme
// screens/NativeIntegration.tsx
import { Platform, Settings, Share, Linking } from 'react-native'
import { useColorScheme } from 'react-native'
import * as Contacts from 'expo-contacts'

export function NativeIntegration() {
  // Adaptation automatique au thème système
  const colorScheme = useColorScheme()

  const handleShare = async () => {
    // Utilise le sheet de partage natif
    await Share.share({
      message: 'Contenu à partager',
      url: 'https://example.com',
    })
  }

  const openContacts = async () => {
    // Intégration native avec les contacts
    const { status } = await Contacts.requestPermissionsAsync()
    if (status === 'granted') {
      const { data } = await Contacts.getContactsAsync()
      console.log(data)
    }
  }

  return (
    <View style={[
      styles.container,
      // Style adapté automatiquement au thème
      { backgroundColor: colorScheme === 'dark' ? '#000' : '#fff' }
    ]}>
      <Button title="Partager" onPress={handleShare} />
      <Button title="Contacts" onPress={openContacts} />
    </View>
  )
}

// React Native - Intégration d'un module Flutter
// Utilisation de flutter_module comme add-to-app
// android/settings.gradle
setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir.parentFile,
  'flutter_module/.android/include_flutter.groovy'
))

// Affichage d'une vue Flutter dans React Native
import { requireNativeComponent } from 'react-native'

const FlutterView = requireNativeComponent('FlutterView')

export function HybridScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Text>Contenu React Native</Text>
      {/* Module Flutter embarqué */}
      <FlutterView
        style={{ height: 300 }}
        route="/flutter-feature"
      />
    </View>
  )
}