Wie man eine React-Native-App mit VULK baut

Aktualisiert am 18. Juli 2026 — aufgefrischt mit verifizierten Plattformdaten und dem aktuellen, ehrlichen Preview-Status für React Native.

Wie baut man eine React-Native-App mit VULK?

Die vollständige Antwort: Sie beschreiben die App in einem Prompt, und VULK generiert ein komplettes React Native + Expo Projekt — dateibasierte Navigation mit Expo Router, Styling mit NativeWind (Tailwind für React Native), durchgehend TypeScript und eine app.json mit Bundle-Identifiern und Berechtigungen. Sie laden das Projekt herunter, führen npx expo start aus und testen es innerhalb von Minuten in Expo Go auf Ihrem eigenen Telefon; Produktions-Builds gehen über EAS Build (eas build) in den App Store und zu Google Play.

Eines vorweg, weil Ehrlichkeit Marketing schlägt: VULK rendert React-Native-Apps derzeit nicht in der In-App-Live-Vorschau. React Native ist Metro-gebündelt und kann nicht in der browserbasierten Vorschau laufen, die VULKs Web-Stacks bedient — eine In-Editor-RN-Vorschau ist in Entwicklung, nicht verfügbar. Was Sie heute bekommen, ist vollständiger, echter generierter Code plus der Standard-Expo-Workflow, um ihn auf einem Gerät auszuführen. Die Nachfrage ist real, aber kleiner als bei Flutter: 213 Nutzer-Prompts aller Zeiten verlangten React Native/Expo, gegenüber 381 für Flutter (VULK-Plattformdaten, Juli 2026, N = 11.355 Projekte) — auch deshalb bekam Flutter seinen In-Plattform-Build-Service zuerst.

Was genau generiert VULK?

Das ist keine Web-App in einem WebView. VULK generiert echte native Komponenten — View, Text, ScrollView, FlatList, TouchableOpacity — die auf iOS und Android zu plattform-nativen Widgets kompilieren.

Der generierte Dateibaum sieht so aus:

app/
  _layout.tsx          # Root layout with navigation container
  index.tsx            # Home screen
  (tabs)/
    _layout.tsx        # Tab navigator layout
    home.tsx           # Home tab
    profile.tsx        # Profile tab
    settings.tsx       # Settings tab
  [id].tsx             # Dynamic route
components/
  Button.tsx
  Card.tsx
  Header.tsx
assets/
  fonts/
  images/
tailwind.config.js
app.json
package.json

Wie schreibt man Prompts, die gute Mobile-Apps produzieren?

Der Prompt entscheidet über die Qualität Ihrer generierten App. Hier sind echte Prompts, die solide Ergebnisse liefern.

Basis-Prompt (funktioniert, aber generisch):

Baue eine Fitness-Tracking-App in React Native

Besserer Prompt (spezifische Features):

Baue eine React-Native-Fitness-Tracking-App mit Expo-Router-Tab-Navigation. Füge einen Workout-Log-Screen hinzu, wo Nutzer Übungen mit Sätzen, Wiederholungen und Gewicht eintragen. Ergänze einen Fortschritts-Screen mit Diagrammen des wöchentlichen Volumens. Style mit NativeWind in einem dunklen Theme. Füge eine Timer-Komponente für Pausen zwischen Sätzen hinzu.

Fortgeschrittener Prompt (Produktionsqualität):

Baue einen React Native + Expo Fitness-Tracker mit diesen Screens: (1) Dashboard mit heutigem Trainingsplan und Wochenstatistiken, (2) Übungsbibliothek mit Suche und Muskelgruppen-Filtern, (3) Aktiver Workout-Screen mit laufendem Timer, Satz-Logging und Pausen-Timer, (4) Fortschritts-Tab mit Liniendiagrammen des gestemmten Gewichts pro Muskelgruppe über 30 Tage, (5) Profil mit Einstellungen für Einheiten (kg/lbs) und Timer-Defaults. Nutze Expo-Router-Tabs für die Hauptnavigation und Stack-Navigation innerhalb jedes Tabs. Style mit NativeWind in einem dunklen Theme (zinc-900 Hintergrund, emerald-500 Akzente). Speichere Daten lokal mit AsyncStorage. Nutze expo-haptics für Button-Feedback.

Der Unterschied zwischen diesen Prompts ist Spezifität. VULKs KI-Modelle liefern am besten, wenn Sie Screens, Datenstrukturen und Interaktionsmuster explizit beschreiben — der Median-Prompt auf VULK hat nur 364 Zeichen, aber die besten Mobile-Generierungen kommen aus Prompts wie dem fortgeschrittenen oben (VULK-Plattformdaten, Juli 2026).

Wie funktioniert NativeWind im generierten Code?

NativeWind lässt VULK Tailwind-CSS-Klassennamen in React Native nutzen. Der generierte Code verwendet das className-Prop statt StyleSheet.create:

// What VULK generates with NativeWind
export default function WorkoutCard({ exercise, sets }: WorkoutCardProps) {
  return (
    <View className="bg-zinc-800 rounded-2xl p-4 mb-3">
      <Text className="text-white text-lg font-semibold">
        {exercise.name}
      </Text>
      <Text className="text-zinc-400 text-sm mt-1">
        {sets} sets completed
      </Text>
    </View>
  );
}

Das ist echter React-Native-Code, der zur Build-Zeit zu nativen StyleSheet-Objekten kompiliert. Es gibt keine Laufzeit-Performance-Strafe. Wenn Sie Styles brauchen, die NativeWind nicht abdeckt, können Sie auf style-Props zurückfallen — VULK generiert diese, wenn plattformspezifisches Styling nötig ist.

Wie funktioniert die Expo-Router-Navigation?

VULK generiert dateibasiertes Routing mit Expo Router. Das spiegelt das mentale Modell von Next.js: Dateien im app/-Verzeichnis werden zu Routen.

Zentrale Muster, die VULK nutzt:

• Tab-Navigation: Eine (tabs)/_layout.tsx-Datei mit Tabs-Komponente aus expo-router/tabs
• Stack-Navigation: Verschachtelte _layout.tsx-Dateien mit Stack-Komponente für Push/Pop-Navigation innerhalb eines Tabs
• Dynamische Routen: Dateien namens [id].tsx oder [slug].tsx, die Routen-Parameter akzeptieren
• Modal-Routen: Dateien in einer (modal)/-Gruppe, die als Modal-Overlays erscheinen

Das Root-Layout enthält typischerweise Provider für Fonts, Themes und globalen State:

export default function RootLayout() {
  return (
    <ThemeProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="(modal)" options={{ presentation: 'modal' }} />
      </Stack>
    </ThemeProvider>
  );
}

Wie testet man die App auf dem eigenen Telefon?

Da es noch keine In-Editor-RN-Vorschau gibt, findet das Testen auf Ihrem eigenen Gerät statt — und der Expo-Workflow macht das schnell:

1. Code herunterladen aus VULKs Editor (Source-ZIP-Export ist ab dem Builder-Plan enthalten)
2. Entpacken und Abhängigkeiten installieren: cd your-app && npm install
3. Dev-Server starten: npx expo start
4. QR-Code scannen mit Expo Go auf Ihrem Telefon (iOS-Kamera-App oder Android Expo Go App)

Die App lädt innerhalb von Sekunden auf Ihrem Gerät, und lokale Änderungen erscheinen sofort per Hot Reload.

Für Features, die native Module außerhalb von Expo Go erfordern (wie Bluetooth oder NFC), erstellen Sie einen Development Build mit npx expo run:ios oder npx expo run:android. VULKs generierte app.json enthält Plugin-Konfigurationen für gängige native Module.

Wie iteriert man nach der ersten Generierung?

VULKs Konversationsfluss ist für iterative Mobile-Entwicklung ausgelegt. Nach der ersten Generierung verfeinern Sie mit Follow-up-Nachrichten:

• „Füge Pull-to-Refresh auf dem Workout-Listen-Screen hinzu"
• „Ersetze die flache Liste durch eine nach Muskelgruppen gruppierte Sektionsliste"
• „Füge ein Bottom Sheet für den Übungs-Picker hinzu statt zu einem neuen Screen zu navigieren"
• „Zeige beim Pausen-Timer einen zirkulären Fortschrittsindikator"

Jede Iteration bewahrt Ihren bestehenden Code und wendet gezielte Änderungen an. VULK verfolgt den vollständigen Dateibaum und modifiziert nur die Dateien, die aktualisiert werden müssen. Die Median-Build-Konversation auf der Plattform umfasst 4 Nachrichten — ein Wurf plus ein paar Anpassungen (VULK-Plattformdaten, Juli 2026).

Wie shippt man in den App Store und zu Google Play?

Produktions-Builds laufen über EAS Build, Expos verwalteten Build-Service:

• Android: eas build --platform android produziert ein APK (Direktinstallation) oder AAB (Google-Play-Einreichung). Kein lokales Android Studio nötig.
• iOS: eas build --platform ios produziert eine IPA für TestFlight und App-Store-Einreichung. Sie brauchen einen Apple-Developer-Account ($99/Jahr).

VULKs generierte app.json kommt mit den Bundle-Identifiern, Versionsfeldern und Berechtigungsdeklarationen, die EAS erwartet — das Projekt ist build-ready ohne Konfigurationschirurgie. (Wenn Sie heute einen In-Plattform-APK-Build-Service wollen: Den gibt es für VULKs Flutter-Pfad — ein weiterer Grund, warum viele Mobile-Builder auf VULK Flutter wählen.)

Worauf sollte man achten?

Navigationstiefe: Hat Ihre App mehr als drei Ebenen verschachtelter Navigation, beschreiben Sie die Hierarchie explizit im Prompt. Sonst flacht die KI womöglich Routen ab, die gestapelt sein sollten.

Bildhandling: VULK generiert expo-image für optimiertes Laden von Bildern. Ist Ihre App bildlastig (Galerie, Social Feed), erwähnen Sie das, damit die KI Caching und Platzhalter-Handling einbaut.

Offline-Support: Muss Ihre App offline funktionieren, sagen Sie das im Prompt. VULK generiert AsyncStorage-Persistenz und Netzwerkstatus-Erkennung — aber nur auf Anfrage.