React Native: co to jest, jak działa Bridge i środowisko JavaScript

Czym jest React Native

React Native — to framework stworzony przez zespół Facebook (obecnie Meta) i wydany jako open-source w 2015 roku. W przeciwieństwie do podejść hybrydowych (Cordova, Ionic), React Native nie używa WebView. Zamiast tego komponenty JavaScript są mapowane na natywne elementy UI: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

Pierwsza wersja React Native obsługiwała tylko iOS. Obsługa Androida pojawiła się w 2016 roku. Wersja 0.60 (2019) wprowadziła Autolinking — automatyczne podłączanie natywnych zależności. React Native 0.68 (2022) dołączył nową architekturę Fabric + TurboModules. Obecna stabilna wersja 0.74 (2024) została w pełni przeniesiona na architekturę New Architecture z obsługą Yoga 3.0 do układów Flexbox.

Według danych Statista 2024, React Native jest używany w 38% projektów wieloplatformowych. Framework stosują Discord, Instagram, Shopify, Pinterest, Skype i Uber Eats. Meta używa React Native w Facebook i Instagram — głównej aplikacji mobilnej z 2 miliardami użytkowników.

Historia i ewolucja React Native

React Native został ogłoszony na React.js Conf w styczniu 2015 roku. Pomysł polegał na przeniesieniu deklaratywnego paradygmatu React z sieci na platformy mobilne. Pierwszy commit w repozytorium pojawił się w 2013 roku jako wewnętrzny projekt Facebook do tworzenia aplikacji Facebook Groups na iOS.

Wersja 0.70 (2022) przedstawiła Hermes jako domyślny silnik JavaScript. Hermes to silnik z kompilacją wstępną (AOT), zoptymalizowany dla urządzeń mobilnych. Skraca czas uruchamiania aplikacji o 50% i zmniejsza rozmiar APK o 30% w porównaniu z JavaScriptCore. Hermes obsługuje ES6 i częściowo ES2020.

Różnica między React Native a React Web

React Web renderuje komponenty do elementów DOM (div, span, p) przez ReactDOM. React Native renderuje do natywnych komponentów platformy. Zamiast <div> używa się <View>, zamiast <span> — <Text>. Style są ustawiane przez obiekt StyleSheet.create(), który jest translowany na właściwości CSS platformy. Flexbox jest domyślnie włączony przez silnik Yoga.

Nawigacja w React Native różni się od sieci. Zamiast react-router-dom używa się React Navigation — natywnej biblioteki z obsługą nawigatorów Stack, Tab i Drawer. React Navigation 6.x używa natywnych animacji (useNativeDriver) i integracji z Deep Links. Do natywnej nawigacji ekranów iOS UINavigationController i Android Fragment stosuje się bibliotekę react-native-navigation od Wix.

Architektura React Native

Architektura React Native tradycyjnie opierała się na Bridge — asynchronicznym kanale JSON między środowiskiem JavaScript a kodem natywnym. Od wersji 0.68 Meta wprowadziła New Architecture, która zastępuje Bridge na JSI (JavaScript Interface) i Fabric. Rozważmy oba modele.

Bridge i Fabric

Bridge — to serializowany protokół JSON, działający w kilku wątkach: JS Thread (interpretacja kodu React), Main Thread (UI) i Native Modules Thread (API). Każda interakcja między JS a kodem natywnym przechodzi serializację i deserializację obiektów, co powoduje opóźnienia przy częstych wywołaniach. Przy przewijaniu listy na 1000 elementów Bridge generuje do 10 000 komunikatów JSON na sekundę.

Fabric — nowy system renderowania w React Native. Zamiast Bridge Fabric używa C++ Shadow Tree, który synchronizuje się z wątkiem UI przez JSI. Eliminuje to serializację JSON: natywny kod C++ bezpośrednio wywołuje funkcje w środowisku JavaScript i odwrotnie. Fabric skraca opóźnienie renderowania z 16 ms (Bridge) do 2–4 ms.

TurboModules — druga część New Architecture. W starym modelu wszystkie moduły natywne były ładowane przy starcie aplikacji. TurboModules ładują moduły leniwie (lazy loading) — dopiero gdy kod JS po raz pierwszy ich zażąda. Skraca to czas zimnego startu o 40% w aplikacjach z 20+ modułami natywnymi.

Przykład aplikacji w 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;

Moduły natywne

Moduły natywne — to mechanizm do wywoływania API platformy z JavaScript. Jeśli funkcjonalność nie jest pokryta standardowymi komponentami React Native (aparat, Bluetooth, biometria), programista pisze moduł w Swift/Kotlin i rejestruje go przez RCTBridgeModule lub TurboModule. Funkcja natywna jest wywoływana z JS przez NativeModules.CameraModule.takePhoto().

React Native udostępnia gotowe moduły natywne do dostępu do akcelerometru (react-native-sensors), geolokalizacji (@react-native-community/geolocation), biometrii (react-native-biometrics) i powiadomień lokalnych (@notifee/react-native). Dla niestandardowych scenariuszy Expo oferuje Expo Modules API — prostszy interfejs do tworzenia modułów natywnych bez Xcode lub Android Studio.

Zalety React Native

Ogromna społeczność — React Native ma największą społeczność wśród frameworków wieloplatformowych. Na GitHub projekt ma 117 000+ gwiazdek, 1800+ kontrybutorów. npm co tydzień pobiera react-native 3 mln+ razy. Pytania o React Native stanowią 5% wszystkich pytań w dziale programowania mobilnego na Stack Overflow.

Ekosystem JavaScript — programiści React używają tych samych narzędzi co w sieci: npm, Babel, ESLint, Prettier, Jest, TypeScript. Można ponownie wykorzystać logikę biznesową między wersją webową (React) a aplikacją mobilną (React Native). Biblioteki Redux, Zustand, React Query, React Hook Form działają na obu platformach bez zmian.

Expo — to SDK i narzędzia upraszczające tworzenie aplikacji w React Native. Expo udostępnia gotowe moduły (aparat, powiadomienia, mapy, OAuth), budowanie w chmurze (EAS Build) i aktualizacje OTA (EAS Update). Expo Go pozwala uruchomić aplikację na fizycznym urządzeniu bez Xcode i Android Studio. Według danych Expo 2024, 70% nowych projektów React Native używa Expo.

Aktualizacje OTA — funkcja dostępna przez Expo Update i CodePush (Microsoft). Programiści mogą wysyłać aktualizacje pakietu JavaScript bezpośrednio do użytkowników bez przechodzenia przez recenzję App Store lub Google Play. Przyspiesza to naprawianie krytycznych błędów z 2–5 dni (oczekiwanie na recenzję) do 1–2 godzin.

Obsługa TypeScript jest domyślnie włączona od React Native 0.71. Szablon projektu zawiera tsconfig.json, typy dla wszystkich komponentów i obsługę strict mode. Flow (statyczne typowanie od Facebook) jest również obsługiwany, ale Meta oficjalnie zaleca TypeScript. Szablon TypeScript stanowi 85% nowych projektów według ankiety State of React Native 2024.

Ekosystem i popularne biblioteki

npm — główny rejestr pakietów dla React Native. Wyszukiwanie bibliotek jest filtrowane po słowie kluczowym react-native. Do instalacji używa się npm install lub yarn add. React Native CLI automatycznie linkuje natywne zależności (od wersji 0.60). Dla projektów Expo instalacja jest zarządzana przez expo install, który dobiera kompatybilną wersję biblioteki.

Kluczowe biblioteki

@react-navigation/native — standard de facto dla nawigacji w React Native. Biblioteka zawiera Stack Navigator (animowane przejścia), Tab Navigator (dolne menu dla iOS/Android), Drawer Navigator (menu boczne) i Material Top Tab. React Navigation 7.x (2024) wprowadziła statyczną konfigurację tras i pełną obsługę React 18 z useSyncExternalStore.

react-native-reanimated — biblioteka do wydajnych animacji. Reanimated 3.x wykonuje animacje w wątku UI (worklet), omijając wątek JS. Gwarantuje to 60 FPS nawet przy animacji 100+ elementów. useSharedValue, useAnimatedStyle i withSpring zastępują Animated API ze standardowego pakietu. Reanimated obsługuje gesty dotyku przez react-native-gesture-handler.

@tanstack/react-query — biblioteka do zarządzania stanem serwerowym. React Query buforuje odpowiedzi API, automatycznie ponawia zapytania przy zmianie sieci (refetchOnReconnect) i obsługuje paginację przez useInfiniteQuery. Wersja 5.x zawiera optymistyczne aktualizacje dla UX — interfejs aktualizuje się przed otrzymaniem odpowiedzi serwera, a następnie jest korygowany.