React Native Schulung: iOS- und Android-Apps mit Expo

React Native – Grundlagen

• Einführung in React Native: Architektur mit Hermes, Fabric, Turbo Native Modules und JSI
• React Native, Expo, Ionic, Flutter und native Apps im Vergleich – Kriterien für die Wahl
• Kernkomponenten View, Text, Image, TextInput und ihre nativen Gegenstücke
• React-Grundlagen für Apps: Funktionskomponenten, Props, useState, useEffect
• Texteingabe mit TextInput: Tastaturtypen, Fokus, Validierung, KeyboardAvoidingView
• Bildlaufansicht mit ScrollView und Pull-to-Refresh über RefreshControl
• Listenansichten mit FlatList und SectionList: Schlüssel, Kopf- und Leerzustand
• Fehlerbehebung für Einsteiger: rote Fehlerseite, LogBox und typische Laufzeitfehler
• Plattformspezifischer Code mit Platform.OS, Platform.select und .ios.tsx/.android.tsx

React Native – Einrichtung der Umgebung

• Entwicklungsumgebung: Node.js, Android Studio mit Emulator, Xcode und Watchman
• Projekt anlegen mit npx create-expo-app, Expo Go und Development Builds
• Integration in vorhandene native Apps: React Native als Bildschirm in Brownfield-Projekten
• Entwicklung für TV-Geräte mit dem Fork react-native-tvos: Fokus und Fernbedienung
• Weitere Plattformen: React Native for Windows und macOS, React Native Web

React Native – Entwicklungs-Workflow

• App auf dem eigenen Gerät ausführen: USB, WLAN, QR-Code und Development Build
• Fast Refresh statt Live-Reload: Zustand behalten, Grenzen bei Modul-Seiteneffekten
• Fehlerbehebung mit den React Native DevTools: Breakpoints, Konsole, Komponentenbaum
• Netzwerkverkehr und native Logs untersuchen mit Logcat und der Xcode-Konsole
• Testen mit Jest und React Native Testing Library, Abfragen über Rollen und Text
• Ende-zu-Ende-Tests mit Maestro oder Detox auf Simulator und Emulator
• Bibliotheken auswählen: React Native Directory, Autolinking, Unterstützung der Neuen Architektur
• TypeScript als Standard: Props typisieren, typisierte Routen und Navigationsparameter
• Upgrade auf neue React-Native- und Expo-Versionen mit Upgrade Helper und expo-doctor
• Continuous Native Generation: app.json, Config-Plugins und npx expo prebuild

React Native – Gestaltung von Apps

• Stile definieren mit StyleSheet.create, Stile kombinieren und bedingt anwenden
• Höhe und Breite: feste Maße, Prozentwerte, flex und useWindowDimensions
• Layout mit Flexbox: Unterschiede zum Web wie flexDirection: 'column' als Standard
• Sichere Bereiche, Notch und Statusleiste mit react-native-safe-area-context
• Bilder einbinden: lokale Assets, Auflösungsvarianten @2x/@3x und expo-image mit Cache
• Farbreferenz und Theme: Farbpalette, PlatformColor und Dark Mode mit useColorScheme
• Zugänglichkeit: accessibilityLabel, role, Schriftgrößen und Test mit VoiceOver und TalkBack
• Utility-Styling mit NativeWind für Teams, die Tailwind CSS aus dem Web kennen

React Native – Interaktion in Apps

• Berührungen mit Pressable: Druckzustand, Trefferfläche, hitSlop und Haptik
• Zwischen Bildschirmen navigieren mit Expo Router: Stack, Tabs und dateibasierte Routen
• React Navigation direkt einsetzen, Deep Links und Universal Links konfigurieren
• Animationen mit der Animated-API und mit Reanimated auf dem UI-Thread
• Das Gesten-Responder-System verstehen und Gesten mit React Native Gesture Handler bauen

React Native – App-Leistung optimieren

• Leistungsübersicht: JS-Thread, UI-Thread, Bildrate und der Performance Monitor
• FlatList optimieren: getItemLayout, windowSize, keyExtractor, Alternative FlashList
• Startzeit verkürzen: Inline Requires in Metro, Hermes-Bytecode statt RAM-Bundles
• Profilerstellung mit dem React-Profiler und Hermes-Profilen in den DevTools
• Unnötiges Rendern vermeiden: memo, stabile Callbacks und der React Compiler

React Native – Die JavaScript-Laufzeit

• JavaScript-Umgebung als Basis: unterstützte Sprachfeatures, Polyfills, kein DOM und kein window
• JavaScript-Timer setTimeout, setInterval, requestAnimationFrame und Aufräumen in Effekten
• Die Hermes-Laufzeitumgebung: Bytecode-Vorübersetzung, Speicherverhalten, Debugging
• JSI: wie JavaScript ohne Brücke synchron mit nativem Code spricht

React Native – Konnektivität und Sicherheit

• REST-Schnittstellen mit fetch ansprechen, Daten mit TanStack Query laden und cachen
• Offline-Fähigkeit: Netzstatus erkennen, Daten lokal mit SQLite oder MMKV vorhalten
• Sicherheit: keine Geheimnisse im JS-Bundle, Tokens im Keychain/Keystore über expo-secure-store
• HTTPS erzwingen, Deep-Link-Parameter prüfen, Zertifikat-Pinning abwägen

React Native – Native Komponenten und Module

• NPM-Module mit nativen Anteilen einrichten: Autolinking, pod install, Neubau der App
• Eigene Module mit der Expo Modules API in Swift und Kotlin schreiben
• Direkte Manipulation mit setNativeProps nur für Sonderfälle wie fortlaufende Animationen, sonst State und Reanimated
• Codegen: TypeScript-Spezifikation als Vertrag zwischen JavaScript und nativem Code

React Native – Spezielle Hinweise für Android

• Native Android-Module als Turbo Native Module in Kotlin umsetzen
• Native Android-UI-Komponenten als Fabric Native Component einbinden
• JavaScript im Hintergrund: Headless JS und geplante Aufgaben unter Android-Vorgaben
• Veröffentlichung im Google Play Store: App Bundle, Play App Signing, interne Testkanäle
• Standardberechtigungen entfernen: Manifest-Merge mit tools:node="remove" oder Expo-Konfiguration
• Laufzeitberechtigungen anfragen und Ablehnung durch Nutzer:innen sauber behandeln

React Native – Spezielle Hinweise für iOS

• Native iOS-Module als Turbo Native Module in Swift und Objective-C++
• Native iOS-UI-Komponenten mit Fabric einbinden, UIKit-Views in React Native zeigen
• iOS-Bibliotheken laden und nutzen: CocoaPods, Podfile und Abhängigkeiten im Xcode-Projekt
• Den iOS-Simulator nutzen: Geräte wählen, Standort und Push simulieren mit xcrun simctl
• Kommunikation zwischen iOS und React Native: Ereignisse aus Swift an JavaScript senden
• App-Erweiterungen für iOS: Widgets und Share Extension neben der React-Native-App
• Veröffentlichung im App Store: Signierung, TestFlight und App-Store-Prüfung
• Builds und Einreichung mit EAS Build und EAS Submit automatisieren

React Native mit dem Codex-Agenten

• Projektregeln für React Native: Expo-SDK-Version, Expo Router, nur Bibliotheken für die Neue Architektur
• Web-Reflexe im Agentencode finden: onClick, div, CSS-Einheiten, window – durch React-Native-APIs ersetzen
• Pakete nur per npx expo install, danach npx expo-doctor und tsc --noEmit als Prüfschritt
• Generierte Ordner ios/android nicht editieren lassen – native Änderungen nur über Config-Plugins
• Maestro-Flow je Bildschirm als Abnahme, Prüfung auf echtem Gerät für Kamera, Push und Tastatur

Praxisprojekt: Schichtplan-App für ein Pflegeteam

• Tabs für Dienstplan, Tauschbörse und Profil mit Expo Router, Schichten als SectionList je Woche
• Schichttausch anfragen und bestätigen, Daten über eine REST-API mit Offline-Zwischenspeicher
• Push-Benachrichtigung bei neuer Tauschanfrage, Anmeldetoken im sicheren Speicher
• Development Build auf dem eigenen Smartphone, interne Testverteilung über TestFlight und Play-Testkanal

Lernziele

• Sie richten ein React-Native-Projekt mit Expo ein und starten es im Simulator, im Emulator und auf dem eigenen Gerät
• Sie bauen Bildschirme aus Kernkomponenten, gestalten sie mit Flexbox und navigieren mit Expo Router
• Sie finden Leistungsprobleme mit den React Native DevTools und optimieren Listen und Startzeit
• Sie binden REST-Schnittstellen an und speichern Zugangsdaten sicher im Keychain bzw. Keystore
• Sie schreiben ein eigenes natives Modul für iOS und Android und veröffentlichen die App in beiden Stores

Zielgruppe

• Webentwickler:innen mit React-Kenntnissen, die mobile Apps für iOS und Android entwickeln wollen
• Native iOS- oder Android-Entwickler:innen, die React Native in bestehende Apps integrieren
• Teams, die eine plattformübergreifende App planen und React Native bewerten möchten