React Native vs Flutter 2026: Architettura e Performance a Confronto

import { TurboModuleRegistry } from 'react-native';

interface NativePerformanceModule {
  measureRenderTime(): Promise<number>;
  getMemoryUsage(): number;
}

const PerformanceModule = TurboModuleRegistry.getEnforcing<NativePerformanceModule>(
  'PerformanceModule'
);

export async function trackPerformance() {
  const renderTime = await PerformanceModule.measureRenderTime();
  const memoryUsage = PerformanceModule.getMemoryUsage();
  
  return {
    renderTime,
    memoryUsage,
    timestamp: Date.now()
  };
}

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class PerformanceTracker extends StatefulWidget {
  const PerformanceTracker({super.key, required this.child});
  final Widget child;

  @override
  State<PerformanceTracker> createState() => _PerformanceTrackerState();
}

class _PerformanceTrackerState extends State<PerformanceTracker> {
  double _fps = 0;

  @override
  void initState() {
    super.initState();
    SchedulerBinding.instance.addPostFrameCallback(_measureFps);
  }

  void _measureFps(Duration timestamp) {
    final frameTime = SchedulerBinding.instance.currentFrameTimeStamp;
    setState(() => _fps = 1000 / frameTime.inMilliseconds);
    SchedulerBinding.instance.addPostFrameCallback(_measureFps);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        widget.child,
        Positioned(
          top: 10,
          right: 10,
          child: Text('FPS: ${_fps.toStringAsFixed(1)}'),
        ),
      ],
    );
  }
}

// React Native - JSI per performance native
import { useCallback } from 'react';
import { runOnJS, runOnUI } from 'react-native-reanimated';

export function useHeavyComputation() {
  const processData = useCallback((data: number[]) => {
    'worklet';
    // Esecuzione sul thread UI per performance massime
    let result = 0;
    for (let i = 0; i < data.length; i++) {
      result += Math.sqrt(data[i]) * Math.sin(data[i]);
    }
    return result;
  }, []);

  const executeOnUI = useCallback((data: number[]) => {
    runOnUI(() => {
      const result = processData(data);
      runOnJS(console.log)(result);
    })();
  }, [processData]);

  return { executeOnUI };
}

// React Native - Componenti nativi con stile specifico per piattaforma
import { View, Text, Pressable, Platform, StyleSheet } from 'react-native';

interface CardProps {
  title: string;
  onPress: () => void;
  children: React.ReactNode;
}

export function Card({ title, onPress, children }: CardProps) {
  return (
    <Pressable
      style={({ pressed }) => [
        styles.card,
        pressed && styles.cardPressed
      ]}
      onPress={onPress}
      android_ripple={{ color: 'rgba(0,0,0,0.1)' }}
    >
      <Text style={styles.title}>{title}</Text>
      <View style={styles.content}>{children}</View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    borderRadius: Platform.select({ ios: 12, android: 8 }),
    padding: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 8,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  cardPressed: {
    opacity: Platform.OS === 'ios' ? 0.7 : 1,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 8,
  },
  content: {
    gap: 8,
  },
});

// Flutter - Widget custom con adattamento alla piattaforma
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'dart:io' show Platform;

class AdaptiveCard extends StatelessWidget {
  const AdaptiveCard({
    super.key,
    required this.title,
    required this.onTap,
    required this.child,
  });

  final String title;
  final VoidCallback onTap;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    final isIOS = Platform.isIOS;

    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: isIOS 
              ? CupertinoColors.systemBackground
              : Theme.of(context).cardColor,
          borderRadius: BorderRadius.circular(isIOS ? 12 : 8),
          boxShadow: isIOS
              ? [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 8,
                    offset: const Offset(0, 2),
                  ),
                ]
              : null,
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: isIOS ? null : onTap,
            borderRadius: BorderRadius.circular(8),
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const SizedBox(height: 8),
                  child,
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

// React Native - Zustand con TypeScript
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface UserState {
  user: { id: string; name: string; email: string } | null;
  isAuthenticated: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

export const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      user: null,
      isAuthenticated: false,
      login: async (email, password) => {
        const response = await fetch('/api/auth/login', {
          method: 'POST',
          body: JSON.stringify({ email, password }),
        });
        const user = await response.json();
        set({ user, isAuthenticated: true });
      },
      logout: () => set({ user: null, isAuthenticated: false }),
    }),
    {
      name: 'user-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

// Flutter - Riverpod con Code Generation
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'user_provider.g.dart';

@freezed
class User with _$User {
  const factory User({
    required String id,
    required String name,
    required String email,
  }) = _User;
}

@riverpod
class UserNotifier extends _$UserNotifier {
  @override
  User? build() => null;

  Future<void> login(String email, String password) async {
    final response = await ref.read(apiClientProvider).post(
      '/auth/login',
      data: {'email': email, 'password': password},
    );
    state = User.fromJson(response.data);
  }

  void logout() => state = null;
}

@riverpod
bool isAuthenticated(Ref ref) {
  return ref.watch(userNotifierProvider) != null;
}

// React Native - React Navigation 7 con TypeScript
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type TabParamList = {
  Feed: undefined;
  Search: undefined;
  Notifications: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<TabParamList>();

export function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen 
        name="Profile" 
        component={ProfileScreen}
        options={({ route }) => ({
          title: `Utente ${route.params.userId}`,
        })}
      />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

// Flutter - GoRouter con Type-Safety
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

part 'router.g.dart';

@TypedGoRoute<HomeRoute>(path: '/', routes: [
  TypedGoRoute<ProfileRoute>(path: 'profile/:userId'),
  TypedGoRoute<SettingsRoute>(path: 'settings'),
])
class HomeRoute extends GoRouteData {
  const HomeRoute();

  @override
  Widget build(BuildContext context, GoRouterState state) {
    return const HomeScreen();
  }
}

class ProfileRoute extends GoRouteData {
  const ProfileRoute({required this.userId});
  final String userId;

  @override
  Widget build(BuildContext context, GoRouterState state) {
    return ProfileScreen(userId: userId);
  }
}

class SettingsRoute extends GoRouteData {
  const SettingsRoute();

  @override
  Widget build(BuildContext context, GoRouterState state) {
    return const SettingsScreen();
  }
}

final router = GoRouter(routes: $appRoutes);

// React Native - Integrazione fotocamera con Expo
import { Camera, CameraType, useCameraPermissions } from 'expo-camera';
import { useState, useRef } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

export function CameraScreen() {
  const [type, setType] = useState(CameraType.back);
  const [permission, requestPermission] = useCameraPermissions();
  const cameraRef = useRef<Camera>(null);

  if (!permission?.granted) {
    return (
      <View style={styles.container}>
        <Text>Accesso alla fotocamera richiesto</Text>
        <TouchableOpacity onPress={requestPermission}>
          <Text>Concedi permesso</Text>
        </TouchableOpacity>
      </View>
    );
  }

  const takePicture = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync({
        quality: 0.8,
        base64: false,
      });
      console.log('Photo URI:', photo.uri);
    }
  };

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} type={type} ref={cameraRef}>
        <TouchableOpacity style={styles.button} onPress={takePicture}>
          <Text style={styles.buttonText}>Scatta</Text>
        </TouchableOpacity>
      </Camera>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  camera: { flex: 1 },
  button: {
    position: 'absolute',
    bottom: 40,
    alignSelf: 'center',
    backgroundColor: 'white',
    padding: 16,
    borderRadius: 50,
  },
  buttonText: { fontSize: 16, fontWeight: '600' },
});