Seite 7 - React Native

Code Signing entscheidet darüber, ob eine React Native App auf einem Testgerät installiert werden kann oder ob sie im App Store und Play Store veröffentlicht werden darf. Wer die Zusammenhänge zwischen Zertifikat, Provisioning Profile, App ID und Team nicht versteht, verliert bei jeder Build-Fehlermeldung wertvolle Zeit. Dieser Leitfaden erklärt das komplette Signing-System für iOS und Android und zeigt, wie EAS Credentials und Fastlane match den manuellen Aufwand ersetzen.

Eine unverschlüsselte SQLite-Datenbank auf dem Gerät lässt sich mit einem Dateimanager oder einem gerooteten Zugriff im Klartext auslesen. SQLCipher schließt diese Lücke, indem es die gesamte Datenbankdatei transparent verschlüsselt, ohne die gewohnte SQL-Schnittstelle zu verändern. Dieser Artikel zeigt Funktionsweise, Schlüsselverwaltung und den realistischen Performance-Preis.

EAS Build kompiliert React Native und Expo Apps in der Cloud zu installierbaren iOS- und Android-Binaries, verwaltet Zertifikate, Provisioning Profiles und Keystores automatisch und macht Builds über eas.json reproduzierbar. Dieser Leitfaden erklärt Build-Profile, Umgebungsvariablen, Config Plugins für native Module und den Weg vom Build bis zur Einreichung mit eas submit.

Fabric ersetzt die asynchrone Bridge durch einen gemeinsamen C++ Shadow Tree, den JavaScript und native Seite direkt über JSI teilen. Wer eine eigene native View als Custom Component bauen will, muss verstehen, wie ComponentDescriptor, ShadowNode und generierter Codegen-Code zusammenspielen, von der ersten Spec-Datei bis zur fertigen ComponentView auf iOS und Android.

Sobald eine Expo-Router-App über eine einzelne Tab-Leiste hinauswächst, stellt sich unweigerlich die Frage, wie Header, Tab-Bars und andere gemeinsame UI-Elemente über mehrere Routen-Ebenen hinweg konsistent bleiben, ohne dass jeder einzelne Screen dieselbe Konfiguration wiederholt. Verschachtelte _layout-Dateien lösen genau dieses Problem, indem sie wie React-Komponenten ineinander greifen und dabei jede Ordnerebene um einen eigenen Navigator erweitern können. Dieser Artikel zeigt, wie diese Verschachtelung in der Praxis funktioniert, wie Modal-Präsentation dateibasiert gesteuert wird und wie eine Tab-Navigation mit einem modalen Detail-Screen darüber konkret aufgebaut wird.

Das JavaScript Interface, JSI, verbindet JavaScript Runtime und nativen C++ Code direkt, ganz ohne JSON-Serialisierung oder asynchronen Bridge-Round-Trip. Wer ein eigenes HostObject baut, lernt, wie synchrone native Bindings in der Praxis funktionieren, warum der Performance-Gewinn vor allem bei häufigen Aufrufen zählt und wo die Grenzen dieses Ansatzes liegen.

Eine WebView in eine React-Native-App einzubetten wirkt zunächst wie der einfachste Weg, hybride Inhalte wie eine Checkout-Seite oder ein CMS-Hilfe-Center anzuzeigen. Erst eine durchdachte Bridge zwischen nativer App und Web-Content über injectedJavaScript und postMessage, kombinierte Navigation-Kontrolle und konsequente Absicherung gegen offene Redirects entscheiden aber darüber, ob die Integration sicher und performant bleibt.

Reanimated 3 verlagert Animationen vom JS-Thread auf den UI-Thread und macht React Native Apps damit auch unter Last flüssig. Dieser Artikel erklärt Worklets, useSharedValue, useAnimatedStyle, runOnJS und runOnUI, die Bewegungsfunktionen withTiming, withSpring und withDecay sowie Layout-Animationen und interpolate() anhand konkreter Codebeispiele.

Funktionale Tests prüfen, ob eine Komponente das Richtige tut, sagen aber nichts darüber aus, ob sie auch richtig aussieht. Ein verrutschter Button, ein falsch skalierter Icon oder ein Farbkontrast-Fehler nach einem Refactoring bleiben von Jest-Assertions unbemerkt. Visuelles Regressionstesting schließt diese Lücke, indem es Screenshots gegen eine gepflegte Baseline vergleicht und jede pixelbasierte Abweichung sichtbar macht. Dieser Artikel zeigt die praktische Toolchain rund um Detox, den Umgang mit Baseline-Bildern und wie sich False Positives durch Animationen und Zeitangaben systematisch vermeiden lassen.

Werbung in eine React-Native-App zu integrieren bedeutet mehr als ein SDK einzubinden. AdMob liefert mit react-native-google-mobile-ads Banner-, Interstitial- und Rewarded-Ad-Formate, doch erst eine durchdachte Ladelogik, sauberes Consent Management und eine passende Mediation-Konfiguration entscheiden darüber, ob Werbeeinnahmen stabil fließen oder das App-Erlebnis und die Store-Freigabe gefährden.