React Native: Was es ist, wie Bridge funktioniert und die JavaScript-Umgebung

Was ist React Native

React Native ist ein Framework, das vom Facebook-Team (jetzt Meta) entwickelt und 2015 als Open-Source veröffentlicht wurde. Im Gegensatz zu hybriden Ansätzen (Cordova, Ionic) verwendet React Native kein WebView. Stattdessen werden JavaScript-Komponenten auf native UI-Elemente abgebildet: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

Die erste Version von React Native unterstützte nur iOS. Android-Unterstützung kam 2016 hinzu. Version 0.60 (2019) führte Autolinking ein — automatische Verknüpfung nativer Abhängigkeiten. React Native 0.68 (2022) enthielt die neue Fabric + TurboModules Architektur. Die aktuelle stabile Version 0.74 (2024) ist vollständig auf New Architecture mit Yoga 3.0-Unterstützung für Flexbox-Layout umgestellt.

Laut Statista 2024 wird React Native in 38% der plattformübergreifenden Projekte verwendet. Das Framework wird von Discord, Instagram, Shopify, Pinterest, Skype und Uber Eats genutzt. Meta verwendet React Native in Facebook und Instagram — der Haupt-Mobile-App mit 2 Milliarden Nutzern.

Geschichte und Entwicklung von React Native

React Native wurde auf der React.js Conf im Januar 2015 angekündigt. Die Idee war, das deklarative Paradigma von React vom Web auf mobile Plattformen zu übertragen. Der erste Commit im Repository erschien 2013 als internes Facebook-Projekt zur Erstellung der Facebook Groups App auf iOS.

Version 0.70 (2022) führte Hermes als standardmäßige JavaScript-Engine ein. Hermes ist eine vorab kompilierte (AOT) Engine, die für mobile Geräte optimiert ist. Sie reduziert die App-Startzeit um 50% und verringert die APK-Größe um 30% im Vergleich zu JavaScriptCore. Hermes unterstützt ES6 und teilweise ES2020.

Unterschied zwischen React Native und React Web

React Web rendert Komponenten über ReactDOM in DOM-Elemente (div, span, p). React Native rendert in native Plattformkomponenten. Statt <div> wird <View> verwendet, statt <span> — <Text>. Styles werden über StyleSheet.create() definiert, das in plattformspezifische CSS-Eigenschaften übersetzt wird. Flexbox ist standardmäßig über die Yoga-Engine aktiviert.

Die Navigation in React Native unterscheidet sich vom Web. Statt react-router-dom wird React Navigation verwendet — eine native Bibliothek mit Unterstützung für Stack-, Tab- und Drawer-Navigatoren. React Navigation 6.x verwendet native Animationen (useNativeDriver) und Deep-Links-Integration. Für die native Bildschirmnavigation mit iOS UINavigationController und Android Fragment wird die Bibliothek react-native-navigation von Wix verwendet.

React Native Architektur

Die React Native Architektur basierte traditionell auf Bridge — einem asynchronen JSON-Kanal zwischen der JavaScript-Umgebung und nativem Code. Seit Version 0.68 hat Meta New Architecture eingeführt, die Bridge durch JSI (JavaScript Interface) und Fabric ersetzt. Betrachten wir beide Modelle.

Bridge und Fabric

Bridge ist ein serialisiertes JSON-Protokoll, das in mehreren Threads läuft: JS Thread (Interpretation von React-Code), Main Thread (UI) und Native Modules Thread (API). Jede Interaktion zwischen JS und nativem Code durchläuft Serialisierung und Deserialisierung von Objekten, was bei häufigen Aufrufen zu Verzögerungen führt. Beim Scrollen einer Liste mit 1000 Elementen generiert Bridge bis zu 10.000 JSON-Nachrichten pro Sekunde.

Fabric ist ein neues Rendering-System in React Native. Statt Bridge verwendet Fabric einen C++ Shadow Tree, der über JSI mit dem UI-Thread synchronisiert wird. Dies eliminiert die JSON-Serialisierung: Nativer C++-Code ruft direkt Funktionen in der JavaScript-Umgebung auf und umgekehrt. Fabric reduziert die Rendering-Latenz von 16 ms (Bridge) auf 2–4 ms.

TurboModules ist der zweite Teil von New Architecture. Im alten Modell wurden alle nativen Module beim App-Start geladen. TurboModules lädt Module lazy (lazy loading) — nur wenn JS-Code sie zum ersten Mal anfordert. Dies reduziert die Kaltstartzeit um 40% in Apps mit 20+ nativen Modulen.

Beispiel einer React Native App

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;

Native Module

Native Module sind ein Mechanismus zum Aufruf von Plattform-APIs aus JavaScript. Wenn eine Funktion nicht von den Standard-React-Native-Komponenten abgedeckt wird (Kamera, Bluetooth, Biometrie), schreibt der Entwickler ein Modul in Swift/Kotlin und registriert es über RCTBridgeModule oder TurboModule. Die native Funktion wird aus JS über NativeModules.CameraModule.takePhoto() aufgerufen.

React Native bietet vorgefertigte native Module für den Zugriff auf Beschleunigungssensor (react-native-sensors), Geolokalisierung (@react-native-community/geolocation), Biometrie (react-native-biometrics) und lokale Benachrichtigungen (@notifee/react-native). Für benutzerdefinierte Szenarien bietet Expo die Expo Modules API — eine einfachere Schnittstelle zur Erstellung nativer Module ohne Xcode oder Android Studio.

Vorteile von React Native

Große Community — React Native hat die größte Community unter den plattformübergreifenden Frameworks. Auf GitHub hat das Projekt 117.000+ Sterne und 1.800+ Mitwirkende. npm lädt react-native 3 Millionen+ Mal pro Woche herunter. React Native-Fragen machen 5% aller Stack Overflow-Fragen im Bereich Mobile-Entwicklung aus.

JavaScript-Ökosystem — React-Entwickler verwenden dieselben Tools wie im Web: npm, Babel, ESLint, Prettier, Jest, TypeScript. Geschäftslogik kann zwischen der Webversion (React) und der Mobile-App (React Native) wiederverwendet werden. Bibliotheken wie Redux, Zustand, React Query und React Hook Form funktionieren auf beiden Plattformen ohne Änderungen.

Expo ist ein SDK und Toolset, das die React Native-Entwicklung vereinfacht. Expo bietet vorgefertigte Module (Kamera, Benachrichtigungen, Karten, OAuth), Cloud-Builds (EAS Build) und OTA-Updates (EAS Update). Expo Go ermöglicht das Ausführen der App auf einem physischen Gerät ohne Xcode oder Android Studio. Laut Expo 2024-Daten verwenden 70% der neuen React Native-Projekte Expo.

OTA-Updates — eine Funktion, die über Expo Update und CodePush (Microsoft) verfügbar ist. Entwickler können JavaScript-Bundle-Updates direkt an Benutzer senden, ohne den App Store oder Google Play Review-Prozess durchlaufen zu müssen. Dies beschleunigt kritische Bugfixes von 2–5 Tagen (Warten auf Review) auf 1–2 Stunden.

TypeScript-Unterstützung ist seit React Native 0.71 standardmäßig enthalten. Die Projektvorlage enthält tsconfig.json, Typen für alle Komponenten und Strict-Mode-Unterstützung. Flow (statische Typisierung von Facebook) wird ebenfalls unterstützt, aber Meta empfiehlt offiziell TypeScript. Die TypeScript-Vorlage macht 85% der neuen Projekte aus, laut der State of React Native 2024-Umfrage.

Ökosystem und beliebte Bibliotheken

npm ist die primäre Paketregistrierung für React Native. Die Bibliothekssuche wird nach dem Schlüsselwort react-native gefiltert. Zur Installation wird npm install oder yarn add verwendet. React Native CLI verknüpft native Abhängigkeiten automatisch (seit Version 0.60). Für Expo-Projekte wird die Installation über expo install verwaltet, das eine kompatible Bibliotheksversion auswählt.

Wichtige Bibliotheken

@react-navigation/native — der De-facto-Standard für Navigation in React Native. Die Bibliothek umfasst Stack Navigator (animierte Übergänge), Tab Navigator (unteres Menü für iOS/Android), Drawer Navigator (seitliches Menü) und Material Top Tab. React Navigation 7.x (2024) führte statische Routenkonfiguration und vollständige React 18-Unterstützung mit useSyncExternalStore ein.

react-native-reanimated — eine Bibliothek für hochleistungsfähige Animationen. Reanimated 3.x führt Animationen im UI-Thread (Worklet) aus und umgeht dabei den JS-Thread. Dies garantiert 60 FPS selbst bei der Animation von 100+ Elementen. useSharedValue, useAnimatedStyle und withSpring ersetzen die Animated API aus der Standardbibliothek. Reanimated verarbeitet Touch-Gesten über react-native-gesture-handler.

@tanstack/react-query — eine Bibliothek für die Serverzustandsverwaltung. React Query cached API-Antworten, fordert Daten bei Netzwerkänderung automatisch neu an (refetchOnReconnect) und unterstützt Paginierung mit useInfiniteQuery. Version 5.x enthält optimistische Updates für die UX — die Oberfläche wird vor dem Erhalt der Serverantwort aktualisiert und dann angepasst.