Was ist React Native? iOS und Android Apps mit einer Codebasis entwickeln

Was ist React Native und wie läuft eine Codebasis auf iOS und Android?

React Native ist ein Open Source Framework von Meta, mit dem Sie iOS und Android Apps aus React Komponenten in JavaScript oder TypeScript entwickeln. Diese Komponenten erscheinen auf dem Gerät als echte native Bedienelemente, nicht als Webansicht. Sie pflegen also eine gemeinsame Codebasis und veröffentlichen zwei Store Apps mit plattformtypischem Verhalten.

Die Frage, was ist React Native, stellen mir Kunden meist direkt nach dem Relaunch ihrer Website, wenn eine App als nächster Schritt ansteht. Ich arbeite seit 2012 im Online Marketing und im Webbereich. Deshalb sehe ich täglich, wie sich App Entscheidungen auf Budget, Tracking und Wartung auswirken. In diesem Beitrag erkläre ich die neue Architektur, Expo, einen kurzen Vergleich mit Flutter und die Fälle, in denen React Native passt.

Wie man programmieren lernt, wiederhole ich hier nicht. Wenn Sie allerdings zuerst den Webkontext suchen, finden Sie in der Kategorie Software passende Artikel.

Warum ist die kurze Geschichte von React Native heute noch wichtig?

Meta hat React Native 2015 als Open Source veröffentlicht. Die eigenen Teams hatten mobile Apps auf Basis von Webansichten getestet und fanden sie zu langsam. Daher übertrugen sie das Komponentenmodell von React auf native Oberflächen. Das Motto lautete "learn once, write anywhere". Ein Versprechen im Sinne von "write once, run anywhere" gab es nie.

Dieser Unterschied zählt im Alltag. Sie teilen den Großteil des Codes, trotzdem brauchen manche Screens plattformspezifisches Verhalten. Zum Beispiel wecken die Wischgeste zum Zurückgehen auf iOS und die Zurücktaste auf Android unterschiedliche Erwartungen. Ein gutes Team versteckt solche Unterschiede nicht, sondern steuert sie bewusst.

Kurz gesagt: React Native ist keine Abkürzung. Es ist eine Brücke, die das Denken von React Entwicklern in die mobile Welt bringt. Zudem unterscheidet sich die heutige Architektur deutlich vom ursprünglichen Brückenmodell. Der nächste Abschnitt zeigt, warum.

Warum war die alte Bridge ein Engpass?

In der alten Architektur sprachen JavaScript und die native Schicht über eine asynchrone Bridge miteinander. Jeder Aufruf lief als JSON Nachricht durch eine Warteschlange und musste auf der Gegenseite wieder entpackt werden. Folglich konnten aufwendige Animationen, lange Listen und schnelle Touch Eingaben träge wirken.

Der Kern des Problems war einfach. Beide Welten konnten sich nicht direkt aufrufen. Wollten Sie etwa während des Scrollens eine Größe synchron messen, mussten Sie auf die Bridge warten. Viele Teams verlagerten deshalb Logik in nativen Code. Somit wuchs die Komplexität der Codebasis.

Außerdem luden alle nativen Module schon beim App Start. Das verlängerte die Startzeit großer Apps spürbar. Die neue Architektur zielt genau auf diese beiden Schwächen: die asynchrone Bridge und das vollständige Laden beim Start.

Aus welchen Bausteinen besteht die neue Architektur von React Native?

Die neue Architektur ruht auf vier Bausteinen. Alle verfolgen dasselbe Ziel: den Weg zwischen JavaScript und nativem Code verkürzen und das Rendering berechenbarer machen. Die folgende Liste fasst sie knapp zusammen.

• JSI (JavaScript Interface): JavaScript hält direkte Referenzen auf C++ Objekte, eine JSON Serialisierung entfällt.
• Fabric: das neue Rendering System mit synchroner Layoutmessung und Unterstützung für die Concurrent Features von React.
• Turbo Modules: native Module laden erst dann, wenn Ihr Code sie wirklich braucht.
• Codegen: erzeugt aus TypeScript Definitionen typsicheren Schnittstellencode für beide Seiten.

Laut dem offiziellen Team ist die neue Architektur seit React Native 0.76 im Oktober 2024 der Standard. Der Releasebeitrag zu React Native 0.82 geht noch weiter: Ab dieser Version lässt sich die neue Architektur nicht mehr abschalten, alte Opt out Einstellungen ignoriert das Framework.

Für ein neues Projekt entfällt also die Architekturentscheidung. Die eigentliche Frage lautet, ob Ihre Bibliotheken die neue Architektur unterstützen. Konkret hilft ein kurzer Durchgang durch die Abhängigkeitsliste. Die meisten bekannten Pakete sind kompatibel. Kleine Pakete ohne aktuelle Updates machen allerdings manchmal Ärger.

Wie verändern JSI und Fabric die gefühlte Geschwindigkeit?

Nutzer kennen keine Architekturnamen. Sie merken nur, ob ein Tipp sofort reagiert. Dank JSI ruft JavaScript eine native Funktion auf, ohne sich in eine Warteschlange einzureihen. Dadurch laufen Gesten, Animationen und Messungen flüssiger.

Mit Fabric liegt der Ansichtsbaum in einer gemeinsamen C++ Schicht. Deshalb teilen iOS und Android dieselbe Layoutberechnung, und optische Abweichungen nehmen ab. Zudem funktionieren die Concurrent Features von React, etwa Übergänge, die dringende Updates bevorzugen, jetzt auch mobil.

Ehrlich gesagt rettet die neue Architektur allerdings keinen schlecht gebauten Screen. Unnötige Neuberechnungen, riesige Bilder und unbegrenzte Listen bleiben in jeder Architektur langsam. Performance hängt weiterhin an der Disziplin des Teams. Die Architektur hebt nur die Obergrenze an. Messen Sie deshalb auch nach der Umstellung regelmäßig weiter.

Was bringt die Hermes Engine Ihrer App?

Hermes ist die JavaScript Engine, die Meta für React Native entwickelt hat, und neue Projekte nutzen sie standardmäßig. Sie übersetzt JavaScript schon beim Build in Bytecode. Somit verliert die App beim Start keine Zeit mit dem Parsen.

In der Praxis hat das zwei Effekte. Erstens wirkt der Start auf Android Geräten der Mittel und Einstiegsklasse deutlich angenehmer. Zweitens bleibt der Speicherverbrauch stabiler. Nutzt ein großer Teil Ihrer Zielgruppe günstige Smartphones, spüren echte Kunden diesen Unterschied direkt.

Trotzdem ist Hermes kein Zauberstab. Aufgeblähte Abhängigkeiten, unnötige Netzwerkaufrufe beim Start und ein schwerer erster Screen bremsen jede Engine aus. Also: zuerst messen, dann optimieren.

Was ist Expo und wie hängt es mit React Native zusammen?

Expo ist ein Framework samt Werkzeugkasten auf Basis von React Native. Es liefert fertige Module für Kamera, Benachrichtigungen und Standort. Dazu kommen Expo Router für dateibasiertes Routing und die EAS Dienste für Builds in der Cloud. Anders gesagt: Expo ist kein Konkurrent von React Native, sondern die komfortable Schicht darüber.

Die offizielle Einstiegsseite von React Native empfiehlt für neue Apps ein Framework und stellt Expo dabei in den Vordergrund. Das ist ein deutlicher Wandel. Früher galt ein reines React Native Setup als Standard. Heute beginnt der offizielle Weg mit Expo.

Außerdem räume ich gern mit einem alten Vorurteil auf. Expo sperrt Sie nicht mehr in eine geschlossene Box. Mit Development Builds und Config Plugins binden Sie eigenen nativen Code ein. Zudem erklärt der Expo Leitfaden zur neuen Architektur, wie das SDK damit zusammenarbeitet.

Expo oder React Native CLI: womit sollten Sie starten?

Für die meisten Unternehmensprojekte lautet meine Antwort Expo. Allerdings verlangen manche Fälle eine andere Wahl. Die Tabelle vergleicht beide Wege nach ihrer Wirkung im Arbeitsalltag.

Das Ergebnis ist eindeutig. Expo spart viel Zeit beim Werkzeugaufbau. Andererseits fühlen sich Banking SDKs, spezielle Bluetooth Hardware oder React Native Screens in einer bestehenden nativen App mit der CLI oft leichter an.

Eine Regel hat sich für mich bewährt: mit Expo starten und nur wechseln, wenn es wirklich nötig ist. Der umgekehrte Weg, also später von der CLI zu Expo, ist meist mühsamer.

Was ist der wichtigste Unterschied zwischen Flutter und React Native?

Der Kernunterschied liegt im Rendering. React Native nutzt die Bedienelemente der Plattform. Flutter zeichnet dagegen jeden Pixel mit einer eigenen Engine. Deshalb sieht eine Flutter App auf beiden Systemen nahezu identisch aus, während React Native das native Gefühl leichter trifft.

Details finden Sie in der offiziellen Flutter Dokumentation. Meine Beobachtung ist schlicht: Beide sind ausgereift, und mit beiden laufen erfolgreiche Apps in den Stores. Entscheiden sollten daher die Sprache Ihres Teams und der Designbedarf des Produkts, nicht der Hype.

Wann ist Flutter die klügere Wahl?

Flutter halte ich in drei Szenarien für stärker. Erstens, wenn Ihr Markendesign bewusst von Plattformkonventionen abweicht und überall gleich aussehen muss. Zweitens, wenn Ihr Team bereits Dart oder Flutter beherrscht. Drittens, wenn Sie verspielte Oberflächen mit vielen eigenen Animationen und Grafiken bauen.

Zum Beispiel profitiert eine bunte Lern App für Kinder von der eigenen Rendering Engine. Nutzer einer Bestell App im B2B-Umfeld erwarten dagegen vertrautes iOS und Android Verhalten. Dort wirken die nativen Komponenten von React Native natürlicher.

Schauen Sie außerdem auf Community, Nachfrage am Arbeitsmarkt und Bibliotheken. Wenn Sie das Team vergrößern wollen, finden Sie in vielen Regionen leichter React Entwickler als Dart Entwickler. Prüfen Sie das allerdings anhand der Stellenanzeigen in Ihrer eigenen Region.

Wann ist React Native die richtige Wahl?

Aus meiner Praxis glänzt React Native unter den folgenden Bedingungen. Das ist keine Garantie, sondern die Checkliste, die ich in Beratungen nutze.

1. Ihr Team hat bereits Webentwickler mit React und TypeScript Kenntnissen.
2. Die App besteht aus Geschäftsscreens wie Formularen, Listen, Warenkorb, Profil und Benachrichtigungen.
3. Sie wollen Geschäftslogik, Validierung und API Client mit Ihrer Website teilen.
4. Beide Plattformen sollen gleichzeitig mit demselben Funktionsumfang starten.
5. Fehlerkorrekturen sollen per Update aus der Ferne ausgeliefert werden, ohne auf das Store Review zu warten.

Treffen drei oder mehr Punkte zu, ist React Native ein starker Kandidat. Wurde Ihre Website zudem im Rahmen eines Webdesign Projekts mit React gebaut, schont die Wiederverwendung dieses Wissens das Budget.

Dennoch zählen Geschäftsziele genauso viel wie Technik. Wer Code schreibt, bevor die Rolle der App im Vertriebstrichter klar ist, bezahlt später teure Nacharbeit.

Wann passt React Native eher nicht?

Ich empfehle React Native nicht für jedes Projekt. Zum Beispiel laufen 3D Spiele an der Hardwaregrenze, Videoverarbeitung in Echtzeit oder AR lastige Apps meist besser mit Swift und Kotlin oder mit einer Game Engine.

Ebenso verliert der plattformübergreifende Vorteil an Wert, wenn Ihre App nur auf einer Plattform lebt, etwa als reine iPad App für den Außendienst. Dann ist rein native Entwicklung oft schlanker.

Schließlich sollten Sie vorsichtig sein, wenn Sie neue Betriebssystemfunktionen am ersten Tag brauchen. Die Community ist schnell. Veröffentlicht Apple oder Google jedoch eine neue API, kommt der passende Wrapper manchmal später. Dann schreiben Sie in den ersten Wochen eventuell selbst nativen Verbindungscode.

Wie verwalten Sie plattformspezifischen Code in einer Codebasis?

Eine Codebasis heißt nicht, dass jede Zeile auf beiden Plattformen identisch ist. React Native unterstützt plattformspezifische Dateiendungen, sodass Sie eine Komponente für iOS und eine für Android schreiben können. Kleine Unterschiede prüfen Sie direkt im Code über die Plattformabfrage.

Meine Empfehlung lautet so: Geschäftslogik, API Aufrufe und Zustandsverwaltung bleiben vollständig gemeinsam. Plattformunterschiede wandern an die Ränder der Oberfläche, also zu Navigationsgesten, Berechtigungsdialogen und Benachrichtigungen. Folglich bleibt der abweichende Code klein und testbar.

Diese Disziplin hilft zudem dem Designteam. Designer wissen von Anfang an, welche Screens je Plattform variieren. Wenn Sie das beim Webdesign mit Figma in den Ebenen markieren, sinkt das Hin und Her zwischen Design und Entwicklung.

Wie messen Sie die Performance einer React Native App?

Was Sie nicht messen, können Sie nicht verbessern. Ich rate daher, drei Werte vom ersten Tag an zu verfolgen: Kaltstartzeit, verlorene Frames beim Scrollen und die Zeit bis zum ersten sinnvollen Screen. Zusammen prägen sie den ersten Eindruck.

• Nutzen Sie React Native DevTools, um Komponentenbaum und Neuberechnungen zu prüfen.
• Setzen Sie für lange Listen virtualisierte Listenkomponenten ein.
• Liefern Sie Bilder in passender Größe aus. Was Sie im Web mit dem Tool zum Bild verkleinern erledigen, gilt mobil genauso.
• Testen Sie vor dem Release auf einem günstigen Android Gerät, nicht auf dem schnellsten Smartphone im Büro.

Die Disziplin, die Sie im Web mit Lighthouse pflegen, gilt auch hier. Mein Beitrag zum Lighthouse Performance Test zeigt diese Messgewohnheit. Sie ist unabhängig von der Plattform.

Wie wachsen Website und React Native App gemeinsam?

Eine App ist nie ein isolierter Kanal. Nutzer finden Sie oft zuerst über Suche, Social Media oder Anzeigen, besuchen dann die Website und installieren erst später die App. Deshalb darf der Weg zwischen Website und App nicht abreißen.

Ein praktisches Beispiel: Wenn Sie Kampagnenlinks mit dem UTM Generator kennzeichnen, sehen Sie in der Webanalyse, welcher Kanal App Installationen auslöst. Ist Ihre mobile Website schwach, springen Nutzer zudem ab, bevor sie die App überhaupt erreichen. Darum gehört Mobile First Design auch zur App Strategie.

Kurz gesagt: Überlassen Sie die Entscheidung für React Native nicht allein der Technik. Sitzen Marketing, Analyse und Design am selben Tisch, schafft die App schneller Wert.

Wie richten Sie die Navigation mit Expo Router ein?

Expo Router bringt dateibasiertes Routing auf das Smartphone. Legen Sie eine neue Screendatei in einen Ordner, entsteht daraus automatisch eine Route. Wer Next.js aus dem Web kennt, erkennt das Prinzip sofort. Somit bleibt die Lernkurve kurz.

Ein Nebeneffekt sind Deep Links. Da jeder Screen eine Adresse hat, öffnet ein Link aus einer Kampagnen E-Mail direkt den passenden Produktscreen. Konkret führt eine Erinnerung an einen offenen Warenkorb dann direkt zum Warenkorb statt zur Startseite.

Das wirkt klein, zeigt sich aber in der Conversion Rate. Wer zwei unnötige Tipps streicht, verliert weniger Nutzer im Trichter. Dieselbe Logik für Websites beschreibe ich im Beitrag Was ist ein Conversion Funnel. Die Prinzipien gelten mobil genauso.

Was können Updates aus der Ferne ändern und was nicht?

Der JavaScript Teil einer React Native App läuft als eigenes Paket, getrennt vom nativen Code. Dadurch liefern Dienste wie EAS Update Textkorrekturen, kleine Fehlerbehebungen oder Inhaltsänderungen aus, ohne auf das Store Review zu warten.

Die Grenzen sind allerdings klar. Ein neues natives Modul, geänderte Berechtigungen oder ein Upgrade von React Native brauchen ein neues Store Release. Außerdem erlauben die Regeln von Apple und Google nicht, den Kernzweck der App per Update aus der Ferne zu ändern. Also sind solche Updates ein Werkzeug für Wartung und Notfälle, kein versteckter Releasekanal.

Mein Rat: Testen Sie diese Updates wie ein normales Release. Ein Fehler, der Tausende Nutzer in wenigen Minuten erreicht, verbreitet sich viel schneller als ein Fehler im Store Build. Daher verteilen Sie Updates zunächst an eine kleine Gruppe und beobachten die Kennzahlen.

Wie bauen Sie Tests und Releases für eine React Native App auf?

Ich empfehle drei Testebenen. Unit Tests prüfen die Geschäftslogik. Komponententests prüfen das Verhalten der Screens. Dazu kommen End to End Tests für kritische Abläufe wie Login, Zahlung und Bestellung, also die Schritte, die tatsächlich Umsatz bringen.

Für Releases ist Automatisierung Pflicht. Richten Sie eine Pipeline ein, die bei jedem Merge die Tests startet und bei Erfolg einen Build an einen internen Testkanal schickt. Dann enden die Diskussionen nach dem Muster "bei mir lief es". Zudem entfällt mit Cloud Builds wie EAS Build die Xcode Einrichtung auf jedem Laptop.

Kleine Teams sollten darin keinen schweren Prozess sehen. Schon wenige End to End Tests für kritische Abläufe und ein automatischer interner Build machen den Releasetag deutlich ruhiger. Den Umfang erweitern Sie dann nach Bedarf.

Wie planen Sie Analyse und Anzeigentracking für eine App?

Nach dem Launch höre ich am häufigsten die Frage: Welche Anzeige bringt Installationen? Die Antwort beginnt mit einer frühen Messplanung. Die Verbindung von Firebase und GA4 zeigt Ereignisse und Conversions aus der App in derselben Property wie Ihre Webdaten.

Halten Sie die Ereignisnamen in Web und App einheitlich. Haben Sie im Web das Ereignis für den Warenkorb benannt, nutzen Sie in der App denselben Namen. Sonst zerfallen die Berichte in zwei Teile, und Vergleiche funktionieren nicht mehr.

Bei Anzeigen folgen App Kampagnen ihrer eigenen Logik. In der Google Ads Verwaltung ist die saubere Übertragung von In App Conversions die Grundlage dafür, dass Smart Bidding lernen kann. Schreiben Sie den Trackingplan deshalb vor dem Programmieren, nicht danach.

Warum sollten Sie die Wartung einer React Native App nicht unterschätzen?

Mit dem Launch endet die Arbeit nicht, sie beginnt erst. Apple und Google aktualisieren jedes Jahr ihre Betriebssysteme, Store Regeln ändern sich, und Ihre Bibliotheken bringen neue Versionen. Auch React Native selbst erscheint in regelmäßigen Releases.

Mein Startvorschlag aus der Praxis, ausdrücklich ohne Garantie: Planen Sie neben dem Budget für die erste Version einen eigenen jährlichen Posten für Wartung ein. Er deckt Updates der Abhängigkeiten, Kompatibilität mit neuen Betriebssystemen und kleine Korrekturen ab. Apps ohne Wartung fallen einige Versionen zurück, und dann steigen die Kosten für ein Upgrade schnell.

Achten Sie bei der Auswahl von Bibliotheken folglich eher auf kontinuierliche Pflege als auf Popularität. Ein Paket ohne aktuelle Updates unterstützt die neue Architektur womöglich nicht. Prüfen Sie daher Aktualität und Unterstützung, bevor Sie eine neue Abhängigkeit aufnehmen.

Was ist React Native aus Sicht eines Unternehmens?

Jenseits der technischen Definition: Was ist React Native für eine Geschäftsführung? Die Antwort ist schlichter: ein Team, eine Codebasis, zwei Stores. Dieses Modell vereinfacht Budget und Zeitplan, vor allem für Firmen mit dem Wunsch nach einem schnellen ersten Release. Einfacher heißt allerdings nicht kostenlos.

Nehmen wir eine Beispielrechnung: Beauftragen Sie ein React Native Team statt zweier getrennter nativer Teams, sinken Aufwand für Recruiting und Abstimmung. Dafür muss dieses eine Team die Details von iOS und Android kennen. Die Ersparnis hängt somit direkt von der Kompetenz des Teams ab.

Deshalb sollte der Preis beim Einholen von Angeboten nicht Ihr einziger Filter sein. Laden Sie bereits veröffentlichte Apps des Teams herunter, testen Sie sie auf einem günstigen Smartphone und fragen Sie nach dem Wartungsprozess. Dann vergleichen Sie Versprechen mit echter Leistung.

Welche Irrtümer sollten Sie bei der Frage, was ist React Native, meiden?

Ein Teil der Informationen im Netz stammt noch aus der Zeit der alten Architektur. Achten Sie deshalb auf das Datum eines Artikels und die genannte Version. Die meisten Klagen über langsame Bridges gelten heute nicht mehr in gleicher Form.

• Irrtum: React Native ist eine Webansicht. Tatsächlich rendert die Oberfläche mit nativen Komponenten.
• Irrtum: Mit Expo gibt es keinen nativen Code. Tatsächlich erlauben Development Builds genau das.
• Irrtum: Eine Codebasis bedeutet null Plattformunterschiede. Tatsächlich werden sie kleiner, verschwinden aber nicht.
• Irrtum: Plattformübergreifend ist immer günstiger. Bei hardwarelastigen Projekten kann es umgekehrt sein.

Kurz gesagt senkt der Blick in aktuelle, offizielle Quellen das Risiko einer Fehlentscheidung. Fragen Sie außerdem bei jeder Behauptung, für welche Version sie gilt. Diese Frage klärt technische Debatten erstaunlich schnell.

Welche Fragen sollten Sie vor dem Start eines React Native Projekts klären?

Geschäftsfragen vor der Technikwahl zu klären, ist der effizienteste Einsatz des Budgets. Diese Fragen beantworte ich mit Kunden vor jedem neuen mobilen Projekt.

• Welchem Geschäftsziel dient die App: Umsatz, Kundenbindung oder interne Abläufe?
• Was können Nutzer in der App tun, das auf der Website nicht geht?
• Wie viele Personen im Team kennen React, und wer übernimmt die Wartung?
• Welche nativen Funktionen sind Pflicht: Kamera, Standort, Zahlung, Bluetooth?
• An welchen Kennzahlen messen Sie den Erfolg?

Der letzte Punkt wiegt am schwersten. Um Erfolgskennzahlen vorab festzulegen, können Sie den Rahmen aus meinem Beitrag zu Online Marketing KPIs auch auf Apps anwenden. Nach dem Launch dreht sich die Diskussion dann um Ziele statt um Geschmack.

Also, was ist React Native in einer abschließenden Antwort?

Zusammengefasst ist React Native ein ausgereiftes Framework, das React Wissen aus dem Web auf iOS und Android überträgt. Mit der neuen Architektur hat es die meisten alten Bridge Probleme hinter sich gelassen. Der Start mit Expo ist inzwischen die offizielle Empfehlung. Flutter bleibt mit einer anderen Rendering Philosophie eine starke Alternative.

Wägen Sie bei der Entscheidung die Sprache Ihres Teams, den Designbedarf des Produkts und das Geschäftsziel der App gemeinsam ab. Das heißt: Stellen Sie das Problem in den Mittelpunkt, nicht die Technik. Wenn Sie besprechen möchten, wie eine App mit Website, Anzeigen und Tracking zusammenspielt, erreichen Sie mich über die Kontaktseite.