React Native: cos'è, come funziona Bridge e l'ambiente JavaScript

Cos'è React Native

React Native è un framework creato dal team di Facebook (oggi Meta) e rilasciato come open-source nel 2015. A differenza degli approcci ibridi (Cordova, Ionic), React Native non utilizza WebView. Invece, i componenti JavaScript vengono mappati su elementi UI nativi: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

La prima versione di React Native supportava solo iOS. Il supporto per Android è arrivato nel 2016. La versione 0.60 (2019) ha introdotto Autolinking — collegamento automatico delle dipendenze native. React Native 0.68 (2022) ha incluso la nuova architettura Fabric + TurboModules. La versione stabile attuale 0.74 (2024) è completamente migrata alla New Architecture con supporto Yoga 3.0 per il layout Flexbox.

Secondo Statista 2024, React Native è utilizzato nel 38% dei progetti multipiattaforma. Il framework è utilizzato da Discord, Instagram, Shopify, Pinterest, Skype e Uber Eats. Meta utilizza React Native in Facebook e Instagram — l'applicazione mobile principale con 2 miliardi di utenti.

Storia ed evoluzione di React Native

React Native è stato annunciato alla React.js Conf nel gennaio 2015. L'idea era di portare il paradigma dichiarativo di React dal web alle piattaforme mobili. Il primo commit nel repository è apparso nel 2013 come progetto interno di Facebook per creare l'app Facebook Groups su iOS.

La versione 0.70 (2022) ha introdotto Hermes come motore JavaScript predefinito. Hermes è un motore compilato in anticipo (AOT) ottimizzato per dispositivi mobili. Riduce il tempo di avvio dell'app del 50% e diminuisce la dimensione dell'APK del 30% rispetto a JavaScriptCore. Hermes supporta ES6 e parzialmente ES2020.

Differenza tra React Native e React Web

React Web rende i componenti in elementi DOM (div, span, p) tramite ReactDOM. React Native rende in componenti nativi della piattaforma. Invece di <div>, usa <View>; invece di <span>, usa <Text>. Gli stili sono definiti tramite StyleSheet.create(), che viene tradotto in proprietà CSS della piattaforma. Flexbox è abilitato per impostazione predefinita attraverso il motore Yoga.

La navigazione in React Native differisce dal web. Invece di react-router-dom, si utilizza React Navigation — una libreria nativa con supporto per navigatori Stack, Tab e Drawer. React Navigation 6.x utilizza animazioni native (useNativeDriver) e integrazione Deep Links. Per la navigazione nativa degli schermi con UINavigationController iOS e Fragment Android, si utilizza la libreria react-native-navigation di Wix.

Architettura di React Native

L'architettura di React Native tradizionalmente ruotava attorno a Bridge — un canale JSON asincrono tra l'ambiente JavaScript e il codice nativo. Dalla versione 0.68, Meta ha introdotto New Architecture, che sostituisce Bridge con JSI (JavaScript Interface) e Fabric. Esaminiamo entrambi i modelli.

Bridge e Fabric

Bridge è un protocollo JSON serializzato che opera su più thread: JS Thread (interpretazione del codice React), Main Thread (UI) e Native Modules Thread (API). Ogni interazione tra JS e il codice nativo passa attraverso la serializzazione e deserializzazione degli oggetti, creando ritardi con chiamate frequenti. Durante lo scorrimento di una lista di 1000 elementi, Bridge genera fino a 10.000 messaggi JSON al secondo.

Fabric è un nuovo sistema di rendering in React Native. Invece di Bridge, Fabric utilizza un albero ombra (Shadow Tree) in C++ che si sincronizza con il thread UI tramite JSI. Questo elimina la serializzazione JSON: il codice nativo C++ chiama direttamente funzioni nell'ambiente JavaScript e viceversa. Fabric riduce la latenza di rendering da 16 ms (Bridge) a 2–4 ms.

TurboModules è la seconda parte di New Architecture. Nel vecchio modello, tutti i moduli nativi venivano caricati all'avvio dell'app. TurboModules carica i moduli in modo lazy (lazy loading) — solo quando il codice JS li richiede per la prima volta. Questo riduce il tempo di avvio a freddo del 40% nelle app con 20+ moduli nativi.

Esempio di applicazione React Native

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Moduli nativi

I moduli nativi sono un meccanismo per chiamare le API della piattaforma da JavaScript. Se la funzionalità non è coperta dai componenti standard di React Native (fotocamera, Bluetooth, biometria), lo sviluppatore scrive un modulo in Swift/Kotlin e lo registra tramite RCTBridgeModule o TurboModule. La funzione nativa viene chiamata da JS tramite NativeModules.CameraModule.takePhoto().

React Native fornisce moduli nativi pronti per accedere all'accelerometro (react-native-sensors), geolocalizzazione (@react-native-community/geolocation), biometria (react-native-biometrics) e notifiche locali (@notifee/react-native). Per scenari personalizzati, Expo offre Expo Modules API — un'interfaccia più semplice per creare moduli nativi senza Xcode o Android Studio.

Vantaggi di React Native

Community massiccia — React Native ha la community più grande tra i framework multipiattaforma. Su GitHub, il progetto ha 117.000+ stelle e 1800+ contributori. npm scarica react-native 3 milioni+ di volte a settimana. Le domande su React Native rappresentano il 5% di tutte le domande su Stack Overflow nella sezione sviluppo mobile.

Ecosistema JavaScript — gli sviluppatori React utilizzano gli stessi strumenti del web: npm, Babel, ESLint, Prettier, Jest, TypeScript. La logica di business può essere riutilizzata tra la versione web (React) e l'app mobile (React Native). Librerie come Redux, Zustand, React Query e React Hook Form funzionano su entrambe le piattaforme senza modifiche.

Expo è un SDK e set di strumenti che semplifica lo sviluppo React Native. Expo fornisce moduli pronti (fotocamera, notifiche, mappe, OAuth), build cloud (EAS Build) e aggiornamenti OTA (EAS Update). Expo Go consente di eseguire l'app su un dispositivo fisico senza Xcode o Android Studio. Secondo i dati Expo 2024, il 70% dei nuovi progetti React Native utilizza Expo.

Aggiornamenti OTA — una funzionalità disponibile tramite Expo Update e CodePush (Microsoft). Gli sviluppatori possono inviare aggiornamenti del bundle JavaScript direttamente agli utenti senza passare attraverso la revisione di App Store o Google Play. Questo accelera la correzione di bug critici da 2–5 giorni (attesa revisione) a 1–2 ore.

Supporto TypeScript incluso per impostazione predefinita da React Native 0.71. Il modello di progetto include tsconfig.json, tipi per tutti i componenti e supporto modalità strict. Flow (tipizzazione statica di Facebook) è anche supportato, ma Meta raccomanda ufficialmente TypeScript. Il modello TypeScript costituisce l'85% dei nuovi progetti secondo il sondaggio State of React Native 2024.

Ecosistema e librerie popolari

npm è il registro principale dei pacchetti per React Native. La ricerca di librerie è filtrata dalla parola chiave react-native. Per l'installazione si usa npm install o yarn add. React Native CLI collega automaticamente le dipendenze native (dalla versione 0.60). Per i progetti Expo, l'installazione è gestita tramite expo install, che seleziona la versione compatibile della libreria.

Librerie chiave

@react-navigation/native — lo standard de facto per la navigazione in React Native. La libreria include Stack Navigator (transizioni animate), Tab Navigator (menu inferiore per iOS/Android), Drawer Navigator (menu laterale) e Material Top Tab. React Navigation 7.x (2024) ha introdotto la configurazione statica delle route e il supporto completo a React 18 con useSyncExternalStore.

react-native-reanimated — una libreria per animazioni ad alte prestazioni. Reanimated 3.x esegue animazioni nel thread UI (worklet), bypassando il thread JS. Questo garantisce 60 FPS anche durante l'animazione di 100+ elementi. useSharedValue, useAnimatedStyle e withSpring sostituiscono l'API Animated della libreria standard. Reanimated gestisce i gesti tattili tramite react-native-gesture-handler.

@tanstack/react-query — una libreria per la gestione dello stato del server. React Query memorizza nella cache le risposte API, recupera automaticamente i dati al cambio di rete (refetchOnReconnect) e supporta la paginazione con useInfiniteQuery. La versione 5.x include aggiornamenti ottimistici per l'UX — l'interfaccia si aggiorna prima di ricevere la risposta del server, per poi aggiustarsi.