Claude Code React Native: Mobile Apps für iOS und Android mit KI entwickeln

React Native ist die erste Wahl, wenn man eine App für iOS und Android gleichzeitig bauen will — ohne zwei getrennte Codebasen zu pflegen. Eine JavaScript- oder TypeScript-Codebase, zwei Plattformen. Das klingt verlockend, und es funktioniert tatsächlich gut. Aber der Einstieg ist steiler als bei einer Web-App: Expo-Setup, Metro-Bundler, native Module, plattformspezifische Eigenheiten, Navigation, State-Management — alles will konfiguriert sein, bevor die erste eigentliche Funktion entsteht.

Claude Code React Native ändert diese Gleichung. Nicht weil es die Plattform einfacher macht, sondern weil es den Boilerplate übernimmt, Konfigurationen generiert und native Integrationen erklärt — sodass man sich auf die Produktentscheidungen konzentrieren kann, die tatsächlich wichtig sind.

1. React Native: Was es ist und wann es passt

React Native rendert echte native UI-Komponenten — kein WebView, keine HTML-Schicht. Ein <View> wird zu einem nativen UIView auf iOS und zu einem android.view.View auf Android. Das bedeutet: native Performance, native Gesten, natives Look-and-Feel. Gleichzeitig schreibt man den Logik-Code nur einmal in JavaScript oder TypeScript.

React Native eignet sich besonders für:

• Teams die React bereits kennen und keine separate Swift/Kotlin-Expertise aufbauen wollen
• Apps die beide Plattformen gleichzeitig abdecken müssen, mit überschaubarem Budget
• Produktentscheidungen die sich noch ändern — JavaScript ist schneller umzubauen als nativer Code

Es passt weniger gut für grafisch aufwändige Games, Apps die intensiv auf plattformspezifische APIs angewiesen sind, oder Projekte wo natürliche Plattform-APIs zwingend erforderlich sind und keine Community-Module existieren.

2. Expo vs. Bare React Native

Vor dem ersten Befehl steht eine Entscheidung: Expo Managed Workflow oder Bare React Native?

Expo Managed Workflow ist der empfohlene Einstieg. Expo übernimmt den Build-Prozess, stellt fertige Pakete für Kamera, Location, Push-Notifications und Dutzende andere Features bereit, und erlaubt Over-the-Air-Updates ohne App-Store-Submission. Die Einschränkung: man kann keinen beliebigen nativen Code einbinden, solange man im Managed Workflow bleibt.

Bare React Native gibt volle Kontrolle über den nativen Code. Xcode und Android Studio sind Teil des Workflows. Das ist nötig, wenn man native Module einbinden muss, die Expo nicht unterstützt — aber die Komplexität ist deutlich höher.

# Neues Expo-Projekt anlegen
npx create-expo-app MeineApp --template blank-typescript
cd MeineApp

# Entwicklungsserver starten
npx expo start

Claude Code kann diesen Einstieg vollständig begleiten: Projektstruktur erklären, die erste Komponente schreiben, TypeScript-Konfiguration optimieren und den Unterschied zwischen den verfügbaren Templates einschätzen.

3. Core Components: die Bausteine jeder App

React Native hat kein <div> oder <span>. Stattdessen gibt es plattformunabhängige Komponenten, die auf native UI-Elemente gemappt werden:

• View — das universelle Layout-Container-Element (entspricht dem <div> im Web)
• Text — jeder Text muss in <Text> gewrappt sein, rohe Strings im JSX sind ein Fehler
• StyleSheet — Styling über JavaScript-Objekte, ähnlich CSS aber mit camelCase und nur einem Teil der CSS-Eigenschaften
• TouchableOpacity — tippbare Elemente mit Opacity-Feedback, einer der häufigsten Button-Patterns
• FlatList — performante Listendarstellung für große Datensätze, rendert nur sichtbare Elemente
• Image — Bilder aus lokalen Assets oder Remote-URLs
• TextInput — Eingabefelder, plattformspezifisch angepasst

Ein einfaches Beispiel, das Claude Code auf Basis einer Beschreibung generiert:

import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native';

const data = [
  { id: '1', title: 'Erstes Element' },
  { id: '2', title: 'Zweites Element' },
];

export default function ListenBeispiel() {
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity style={styles.item}>
            <Text style={styles.text}>{item.title}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  item: { padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee' },
  text: { fontSize: 16 },
});

4. Navigation mit React Navigation

Navigation ist in React Native kein Einzeiler. Das Ökosystem hat sich auf React Navigation als De-facto-Standard geeinigt, aber die Konfiguration ist ausführlicher als im Web.

npm install @react-navigation/native @react-navigation/stack
npx expo install react-native-screens react-native-safe-area-context

Claude Code generiert vollständige Navigation-Setups auf Basis einer Beschreibung: Welche Screens gibt es? Welche sind tief verschachtelt? Gibt es einen Tab-Navigator, einen Drawer oder nur einen Stack? Ein typischer Prompt:

claude "Erstelle ein React Navigation Setup für eine App mit:
- Bottom Tab Navigator (Home, Profil, Einstellungen)
- Stack Navigator innerhalb des Home-Tabs (Liste → Detailansicht)
- TypeScript-Typen für alle Route-Parameter"

Das Ergebnis ist ein vollständiges, typsicheres Navigation-Setup — inklusive der oft vergessenen RootStackParamList-Typdefinitionen, die man braucht um sicher zwischen Screens zu navigieren.

5. State-Management: Zustand oder Redux Toolkit

Für State-Management in React Native gelten die gleichen Abwägungen wie im Web. Zustand ist der schlanke Ansatz: minimale Boilerplate, einfache API, gut für mittlere Komplexität. Redux Toolkit ist der umfassende Ansatz: strukturierter, mit mehr Tooling, besser für Teams und große Codebasen.

Zustand-Beispiel, das Claude Code auf Anfrage generiert:

import { create } from 'zustand';

interface UserStore {
  isLoggedIn: boolean;
  displayName: string;
  login: (name: string) => void;
  logout: () => void;
}

export const useUserStore = create<UserStore>((set) => ({
  isLoggedIn: false,
  displayName: '',
  login: (name) => set({ isLoggedIn: true, displayName: name }),
  logout: () => set({ isLoggedIn: false, displayName: '' }),
}));

Claude Code kann dabei helfen, die richtige Wahl zu treffen: Zustand ist meistens ausreichend. Redux Toolkit lohnt sich, wenn Dev-Tools, Time-Travel-Debugging oder ein etabliertes Team-Pattern gefragt sind.

6. Native Device Features

Der eigentliche Vorteil gegenüber einer Web-App: native Gerätefunktionen. Expo stellt fertige Pakete bereit:

• Kamera: expo-camera — Foto, Video, QR-Code-Scan
• Location: expo-location — GPS, Geofencing, Hintergrundlocation
• Push-Notifications: expo-notifications — lokale und Remote-Notifications
• Biometrie: expo-local-authentication — Face ID, Touch ID
• Kamera-Rolle: expo-media-library — Zugriff auf Fotos und Videos

Das Tricky daran: jedes dieser Pakete braucht Berechtigungen, die in der app.json deklariert werden müssen — unterschiedlich für iOS und Android. Claude Code kennt diese Konfigurationen und ergänzt sie korrekt:

claude "Füge Location-Zugriff zu meiner Expo-App hinzu.
Ich brauche nur Foreground-Location, keinen Background-Zugriff.
Zeige mir die app.json-Konfiguration und den Hook zum Abrufen
der aktuellen Position."

7. Debugging mit Expo Go und Metro

Das Debugging-Erlebnis in React Native ist anders als im Browser — aber gut, wenn man die Werkzeuge kennt.

Expo Go ist die schnellste Feedback-Schleife: App auf dem echten Gerät installieren, QR-Code scannen, und jede Änderung im Code ist nach dem Speichern sofort sichtbar. Kein Build-Schritt, keine Wartezeit. Der Metro-Bundler im Hintergrund übernimmt Hot Reloading.

Für tieferes Debugging:

• React Native DevTools: Komponenten-Inspector, Profiler, Netzwerk-Monitor — erreichbar über das Expo-Menü
• console.log: landet im Terminal wo expo start läuft, nicht im Browser
• Flipper: erweiterte Debugging-Oberfläche für Bare-React-Native-Projekte

Fehlermeldungen in React Native sind oft umständlich formuliert. Ein typischer Workflow mit Claude Code: Fehlermeldung aus dem Metro-Terminal kopieren, übergeben, Root-Cause verstehen:

claude "Was bedeutet dieser React Native Fehler und wie behebe ich ihn:

Invariant Violation: Element type is invalid: expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined."

8. Wie Claude Code den Mobile-Entwicklungs-Workflow verbessert

Der größte Zeitgewinn liegt nicht bei einzelnen Code-Snippets, sondern bei der Gesamtintegration. React Native-Projekte haben viele bewegliche Teile, die zusammenpassen müssen: Navigation-Typen, Store-Typen, API-Typen, Berechtigungen, Build-Konfigurationen. Claude Code liest den gesamten Kontext und hält diese Teile konsistent.

Konkrete Anwendungsfälle im täglichen Einsatz:

• Komponenten generieren: "Erstelle einen wiederverwendbaren Button-Component mit Loading-State, Disabled-State und drei Größenvarianten" — inklusive TypeScript-Props und StyleSheet
• Navigation ergänzen: neuen Screen in bestehendes Navigation-Setup einbinden, Typen aktualisieren, Übergabe-Parameter definieren
• Native Module integrieren: Expo-Paket installieren, Berechtigungen konfigurieren, Hook schreiben, Fehlerbehandlung ergänzen
• API-Integration: Fetch-Logic schreiben, Loading/Error-States managen, Daten in den Store bringen
• Plattformunterschiede auflösen: "Warum sieht das auf Android anders aus als auf iOS?" — Claude Code kennt die häufigen Unterschiede und erklärt plattformspezifische Lösungen

"Ich beschreibe den Screen auf Deutsch, Claude Code schreibt den kompletten TypeScript-Component inklusive Navigation-Setup, API-Call und Error-Handling. Was früher einen halben Tag dauerte, dauert jetzt 20 Minuten."

Besonders wertvoll: Claude Code lernt den Codestil des Projekts. Es liest bestehende Komponenten und orientiert sich daran — konsistente Benennung, gleiche Muster, gleicher Import-Stil. Das Ergebnis fügt sich ein, statt einen neuen Pattern einzuführen.

Verwandte Artikel die auf dieses Thema aufbauen:

• Claude Code Debugging — wie du Bugs systematisch findest, auch in nativen App-Fehlern
• Claude Code für Unternehmen — Deployment, Zugriffskontrolle und Team-Workflows