Mobile Development 2. Mai 2026 11 min Lesezeit

Claude Code Mobile App Entwicklung: React Native & Flutter 2026

Mobile App Entwicklung hat eine hohe Lernkurve: zwei Plattformen, spezifische APIs, Performance-Fallstricke, App Store Guidelines. Claude Code kennt React Native und Flutter gut — und kann von Komponente bis Deploy-Konfiguration helfen.

Claude Code vs. Mobile App: Was funktioniert

Mobile-Entwicklung hat Besonderheiten die Claude Code kennen muss: plattformspezifisches Verhalten (iOS vs. Android), Performance (UI-Thread blockieren ist fatal), native Module, und App-Store-Anforderungen. Für alles davon gibt es etablierte Patterns — und Claude Code kennt sie.

✅ Sehr gut
Komponenten-Generierung, Navigation-Setup, API-Integration, State Management, TypeScript-Types, Styling mit StyleSheet

⚠️ Vorsicht nötig
Native Module (Bluetooth, NFC), Performance-kritische Animationen, App-Store-spezifische Konfiguration (muss verifiziert werden)

React Native mit Claude Code

React NativeProjekt-Setup

# Prompt für vollständiges Projekt-Setup:
Erstelle ein React Native (Expo) Projekt-Setup für eine
Fitness-Tracking-App. Anforderungen:

- TypeScript strict mode
- Navigation: React Navigation (Tab + Stack)
- State: Zustand (kein Redux - zu komplex)
- API: Axios mit Interceptors für Auth-Token
- UI: React Native Paper (Material Design)
- Ordnerstruktur: feature-based (screens/, components/, hooks/, api/)

Erstelle die Grundstruktur mit allen Konfigurationsdateien.

# Claude Code generiert Ordnerstruktur:
src/
├── screens/
│   ├── Home/
│   │   ├── HomeScreen.tsx
│   │   └── components/WorkoutCard.tsx
│   ├── Profile/
│   └── Workout/
├── components/
│   └── common/Button.tsx
├── hooks/
│   ├── useAuth.ts
│   └── useWorkouts.ts
├── api/
│   ├── client.ts    # Axios instance + interceptors
│   └── workouts.ts
├── store/
│   └── useStore.ts  # Zustand store
└── navigation/
    ├── TabNavigator.tsx
    └── RootNavigator.tsx

React NativeKomponenten-Generierung

# Prompt für typsichere Komponente:
Erstelle eine WorkoutCard React Native Komponente:
- Props: workout (title, duration, calories, type, completedAt)
- Zeigt Workout-Typ als farbiges Icon (Laufen=blau, Kraft=rot, Yoga=grün)
- Swipe-to-delete Geste (react-native-gesture-handler)
- Accessibility: accessibilityLabel, accessibilityHint
- Kein StyleSheet inline — StyleSheet.create nutzen

import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';

interface WorkoutCardProps {
  workout: {
    title: string;
    duration: number;  // Minuten
    calories: number;
    type: 'running' | 'strength' | 'yoga';
    completedAt: Date;
  };
  onDelete: () => void;
}

const TYPE_COLORS = {
  running: '#3b82f6',
  strength: '#ef4444',
  yoga: '#22c55e',
};

export function WorkoutCard({ workout, onDelete }: WorkoutCardProps) {
  const color = TYPE_COLORS[workout.type];

  return (
    <Swipeable renderRightActions={() => (
      <Pressable onPress={onDelete} style={styles.deleteAction}>
        <Text style={styles.deleteText}>Löschen</Text>
      </Pressable>
    )}>
      <View style={[styles.card, { borderLeftColor: color }]}
        accessibilityLabel={`${workout.title}, ${workout.duration} Minuten`}>
        <Text style={styles.title}>{workout.title}</Text>
        <Text style={styles.meta}>
          {workout.duration} Min · {workout.calories} kcal
        </Text>
      </View>
    </Swipeable>
  );
}

Flutter mit Claude Code

FlutterWidget-Generierung

# Prompt für Flutter Widget:
Erstelle ein Flutter StatefulWidget für einen Schrittzähler:
- Zeigt aktuelle Schrittzahl und Fortschritt zum Tagesziel (10.000)
- CircularProgressIndicator als Fortschrittsring
- Animation wenn Ziel erreicht (kurze Shake-Animation)
- Null-Safety, const Constructor wo möglich
- Material 3 Design

class StepCounter extends StatefulWidget {
  const StepCounter({
    super.key,
    required this.steps,
    this.goal = 10000,
  });

  final int steps;
  final int goal;

  @override
  State<StepCounter> createState() => _StepCounterState();
}

class _StepCounterState extends State<StepCounter>
    with SingleTickerProviderStateMixin {

  late AnimationController _shakeController;
  double get progress =>
    (widget.steps / widget.goal).clamp(0.0, 1.0);

  @override
  Widget build(BuildContext context) {
    return Stack(alignment: Alignment.center, children: [
      CircularProgressIndicator(
        value: progress,
        strokeWidth: 12,
        backgroundColor: Colors.grey.shade200,
        color: progress >= 1.0 ? Colors.green : Theme.of(context).primaryColor,
      ),
      Column(mainAxisSize: MainAxisSize.min, children: [
        Text('${widget.steps}',
          style: Theme.of(context).textTheme.displaySmall?.copyWith(
            fontWeight: FontWeight.bold)),
        Text('Schritte', style: Theme.of(context).textTheme.bodyMedium),
      ]),
    ]);
  }
}

App Store Deployment mit Claude Code

# Prompt für App Store Vorbereitung:
Ich bin bereit meinen React Native App im App Store einzureichen.
Erstelle eine Checkliste und erkläre jeden Schritt:

1. app.json / app.config.js Konfiguration (Version, Bundle ID)
2. iOS: Xcode Signing, Provisioning Profile
3. Android: Keystore generieren, build.gradle Signing
4. Screenshots generieren (welche Größen für iOS/Android?)
5. App Store Connect vs. Google Play Console: Unterschiede
6. EAS Build (Expo) vs. lokaler Build: wann was nutzen?

EAS Build Tipp: Für React Native Expo-Projekte: eas build --platform all in einem Befehl. Claude Code kann die eas.json Konfiguration für Preview/Production-Builds generieren.

Performance-Debugging

# Performance-Issue debuggen mit Claude Code:
Meine FlatList mit 500 Items ist auf Android ruckelig.
Hier ist meine aktuelle Implementation:
[Code einfügen]

Analysiere:
1. Werden Items korrekt memoized (React.memo)?
2. Ist getItemLayout gesetzt? (Verhindert Layout-Berechnungen)
3. Wird keyExtractor stabil berechnet?
4. Gibt es unnötige Re-Renders in renderItem?
5. Sollte ich windowSize/initialNumToRender anpassen?

Mobile Development im Kurs

Im Claude Code Mastery Kurs gibt es ein Mobile-Entwicklung-Modul mit vollständigen React Native und Flutter Workflows — von der ersten Komponente bis zum App Store Deployment.

14 Tage kostenlos testen →