React Native: ce este, cum funcționează Bridge și mediul JavaScript

Ce este React Native

React Native — este un framework creat de echipa Facebook (actualmente Meta) și lansat ca open-source în 2015. Spre deosebire de abordările hibride (Cordova, Ionic), React Native nu utilizează WebView. În schimb, componentele JavaScript sunt mapate pe elemente UI native: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

Prima versiune React Native suporta doar iOS. Suportul pentru Android a apărut în 2016. Versiunea 0.60 (2019) a introdus Autolinking — conectarea automată a dependențelor native. React Native 0.68 (2022) a adăugat noua arhitectură Fabric + TurboModules. Versiunea stabilă actuală 0.74 (2024) a fost complet migrată la arhitectura New Architecture cu suport pentru Yoga 3.0 pentru layout Flexbox.

Conform datelor Statista 2024, React Native este utilizat în 38% din proiectele cross-platform. Framework-ul este folosit de Discord, Instagram, Shopify, Pinterest, Skype și Uber Eats. Meta utilizează React Native în Facebook și Instagram — aplicația mobilă principală cu 2 miliarde de utilizatori.

Istoria și evoluția React Native

React Native a fost anunțat la React.js Conf în ianuarie 2015. Ideea a fost transferarea paradigmei declarative a React de pe web pe platformele mobile. Primul commit în repository a apărut în 2013 ca un proiect intern Facebook pentru crearea aplicației Facebook Groups pe iOS.

Versiunea 0.70 (2022) a introdus Hermes ca motor JavaScript implicit. Hermes este un motor cu compilare prealabilă (AOT), optimizat pentru dispozitive mobile. Reduce timpul de pornire a aplicației cu 50% și dimensiunea APK cu 30% comparativ cu JavaScriptCore. Hermes suportă ES6 și parțial ES2020.

Diferența dintre React Native și React Web

React Web randază componentele în elemente DOM (div, span, p) prin ReactDOM. React Native randază în componente native ale platformei. În loc de <div> se folosește <View>, în loc de <span> — <Text>. Stilurile se setează prin obiectul StyleSheet.create(), care este translatat în proprietăți CSS ale platformei. Flexbox este activat implicit prin motorul Yoga.

Navigația în React Native diferă de web. În loc de react-router-dom se utilizează React Navigation — o bibliotecă nativă cu suport pentru navigatoare Stack, Tab și Drawer. React Navigation 6.x folosește animații native (useNativeDriver) și integrare cu Deep Links. Pentru navigația nativă a ecranelor iOS UINavigationController și Android Fragment se aplică biblioteca react-native-navigation de la Wix.

Arhitectura React Native

Arhitectura React Native s-a construit în mod tradițional în jurul Bridge — un canal JSON asincron între mediul JavaScript și codul nativ. începând cu versiunea 0.68, Meta a introdus New Architecture, care înlocuiește Bridge cu JSI (JavaScript Interface) și Fabric. Să analizăm ambele modele.

Bridge și Fabric

Bridge — este un protocol JSON serializat care funcționează în mai multe fire: JS Thread (interpretarea codului React), Main Thread (UI) și Native Modules Thread (API). Fiecare interacțiune între JS și codul nativ trece prin serializarea și deserializarea obiectelor, ceea ce creează întârzieri la apelurile frecvente. La derularea unei liste de 1000 de elemente, Bridge generează până la 10 000 de mesaje JSON pe secundă.

Fabric — noul sistem de randare în React Native. În loc de Bridge, Fabric utilizează un Shadow Tree C++ care se sincronizează cu firul UI prin JSI. Aceasta elimină serializarea JSON: codul C++ nativ apelează direct funcții în mediul JavaScript și invers. Fabric reduce întârzierea de randare de la 16 ms (Bridge) la 2–4 ms.

TurboModules — a doua parte a New Architecture. În modelul vechi, toate modulele native erau încărcate la pornirea aplicației. TurboModules încarcă modulele întârziat (lazy loading) — doar când codul JS le solicită pentru prima dată. Aceasta reduce timpul de pornire la rece cu 40% în aplicațiile cu 20+ module native.

Exemplu de aplicație în 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;

Module native

Modulele native — sunt un mecanism pentru apelarea API-urilor platformei din JavaScript. Dacă funcționalitatea nu este acoperită de componentele standard React Native (cameră, Bluetooth, biometrie), dezvoltatorul scrie un modul în Swift/Kotlin și îl înregistrează prin RCTBridgeModule sau TurboModule. Funcția nativă este apelată din JS prin NativeModules.CameraModule.takePhoto().

React Native oferă module native gata făcute pentru acces la accelerator (react-native-sensors), geolocalizare (@react-native-community/geolocation), biometrie (react-native-biometrics) și notificări locale (@notifee/react-native). Pentru scenarii personalizate, Expo oferă Expo Modules API — o interfață mai simplă pentru crearea modulelor native fără Xcode sau Android Studio.

Avantajele React Native

Comunitate imensă — React Native are cea mai mare comunitate dintre framework-urile cross-platform. Pe GitHub, proiectul are 117 000+ stele, 1800+ contribuitori. npm descarcă săptămânal react-native de 3 milioane+ ori. Întrebările despre React Native reprezintă 5% din toate întrebările din secțiunea de dezvoltare mobilă pe Stack Overflow.

Ecosistemul JavaScript — dezvoltatorii React folosesc aceleași instrumente ca în web: npm, Babel, ESLint, Prettier, Jest, TypeScript. Logica de business poate fi reutilizată între versiunea web (React) și aplicația mobilă (React Native). Bibliotecile Redux, Zustand, React Query, React Hook Form funcționează pe ambele platforme fără modificări.

Expo — este un SDK și un set de instrumente care simplifică dezvoltarea în React Native. Expo oferă module gata făcute (cameră, notificări, hărți, OAuth), build-uri în cloud (EAS Build) și actualizări OTA (EAS Update). Expo Go permite rularea aplicației pe un dispozitiv fizic fără Xcode și Android Studio. Conform datelor Expo 2024, 70% din noile proiecte React Native folosesc Expo.

Actualizări OTA — o funcție disponibilă prin Expo Update și CodePush (Microsoft). Dezvoltatorii pot trimite actualizări ale pachetului JavaScript direct utilizatorilor fără a trece prin revizia App Store sau Google Play. Aceasta accelerează remedierea erorilor critice de la 2–5 zile (așteptarea reviziei) la 1–2 ore.

Suportul TypeScript este activat implicit începând cu React Native 0.71. Șablonul proiectului include tsconfig.json, tipuri pentru toate componentele și suport pentru strict mode. Flow (tipizarea statică de la Facebook) este de asemenea suportat, dar Meta recomandă oficial TypeScript. Șablonul TypeScript reprezintă 85% din proiectele noi conform sondajului State of React Native 2024.

Ecosistemul și bibliotecile populare

npm — registrul principal de pachete pentru React Native. Căutarea bibliotecilor este filtrată după cuvântul cheie react-native. Pentru instalare se folosește npm install sau yarn add. React Native CLI conectează automat dependențele native (de la versiunea 0.60). Pentru proiectele Expo, instalarea este gestionată prin expo install, care selectează versiunea compatibilă a bibliotecii.

Biblioteci cheie

@react-navigation/native — standardul de facto pentru navigație în React Native. Biblioteca include Stack Navigator (tranziții animate), Tab Navigator (meniu inferior pentru iOS/Android), Drawer Navigator (meniu lateral) și Material Top Tab. React Navigation 7.x (2024) a introdus configurarea statică a rutelor și suport complet pentru React 18 cu useSyncExternalStore.

react-native-reanimated — bibliotecă pentru animații de înaltă performanță. Reanimated 3.x execută animațiile în firul UI (worklet), ocolind firul JS. Aceasta garantează 60 FPS chiar și la animarea a 100+ elemente. useSharedValue, useAnimatedStyle și withSpring înlocuiesc Animated API din pachetul standard. Reanimated gestionează gesturile tactile prin react-native-gesture-handler.

@tanstack/react-query — bibliotecă pentru gestionarea stării serverului. React Query cache-uiește răspunsurile API, reinteroghează automat datele la schimbarea rețelei (refetchOnReconnect) și suportă paginarea cu useInfiniteQuery. Versiunea 5.x include actualizări optimiste pentru UX — interfața se actualizează înainte de a primi răspunsul serverului, apoi este corectată.