Come costruire una app React Native con VULK

Aggiornato il 18 luglio 2026 — rinfrescato con dati verificati della piattaforma e l'attuale stato onesto dell'anteprima per React Native.

Come si costruisce una app React Native con VULK?

La risposta completa: descrivi l'app in un prompt e VULK genera un progetto React Native + Expo completo — navigazione basata su file con Expo Router, styling con NativeWind (Tailwind per React Native), TypeScript ovunque, e app.json configurato con bundle identifier e permessi. Poi scarichi il progetto, esegui npx expo start e lo provi sul tuo telefono con Expo Go in pochi minuti; le build di produzione partono via EAS Build (eas build) verso App Store e Google Play.

Una cosa detta subito, perché l'onestà batte il marketing: VULK attualmente non renderizza le app React Native nell'anteprima live dell'editor. React Native usa il bundler Metro e non può girare nell'anteprima browser che serve gli stack web di VULK — un'anteprima RN nell'editor è in sviluppo, non disponibile. Ciò che ottieni oggi è codice generato completo e reale più il workflow Expo standard per eseguirlo su un dispositivo. La domanda è reale ma minore di quella di Flutter: 213 prompt utente di sempre hanno richiesto React Native/Expo contro i 381 di Flutter (dati della piattaforma VULK, luglio 2026, N = 11.355 progetti) — motivo per cui Flutter ha avuto per primo il suo servizio di build integrato.

Cosa genera esattamente VULK?

Questa non è una web app avvolta in un WebView. VULK genera veri componenti nativi — View, Text, ScrollView, FlatList, TouchableOpacity — che compilano in widget nativi della piattaforma su iOS e Android.

L'albero dei file generato appare così:

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

Come si scrivono prompt che producono buone app mobile?

Il prompt è dove si decide la qualità della tua app generata. Ecco prompt reali che producono risultati solidi.

Prompt base (funziona, ma generico):

Costruisci una app di fitness tracking in React Native

Prompt migliore (funzionalità specifiche):

Costruisci una app React Native di fitness tracking con navigazione a tab di Expo Router. Includi una schermata di registro allenamenti dove gli utenti aggiungono esercizi con serie, ripetizioni e peso. Aggiungi una schermata di progressi con grafici del volume settimanale. Usa NativeWind con un tema scuro. Includi un componente timer per le pause tra le serie.

Prompt avanzato (qualità di produzione):

Costruisci un fitness tracker React Native + Expo con queste schermate: (1) Dashboard con il piano di allenamento di oggi e le statistiche settimanali, (2) Libreria esercizi con ricerca e filtri per gruppo muscolare, (3) Schermata allenamento attivo con timer in corso, registrazione serie e timer di recupero, (4) Tab progressi con grafici a linee del peso sollevato per gruppo muscolare su 30 giorni, (5) Profilo con impostazioni per le unità (kg/lbs) e i default del timer di recupero. Usa i tab di Expo Router per la navigazione principale e la navigazione stack dentro ogni tab. Stile con NativeWind in tema scuro (sfondo zinc-900, accenti emerald-500). Salva i dati in locale con AsyncStorage. Usa expo-haptics per il feedback dei pulsanti.

La differenza tra questi prompt è la specificità. I modelli IA di VULK rendono al meglio quando descrivi esplicitamente schermate, strutture dati e pattern di interazione — il prompt mediano su VULK è di soli 364 caratteri, ma le migliori generazioni mobile arrivano da prompt come quello avanzato qui sopra (dati della piattaforma VULK, luglio 2026).

Come funziona NativeWind nel codice generato?

NativeWind permette a VULK di usare i nomi delle classi Tailwind CSS in React Native. Il codice generato usa il prop className invece di 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>
  );
}

Questo è vero codice React Native che compila in oggetti StyleSheet nativi al momento della build. Nessuna penalità di performance a runtime. Se ti servono stili che NativeWind non copre, puoi sempre ripiegare sui prop style — VULK li genera quando serve styling specifico per piattaforma.

Come funziona la navigazione con Expo Router?

VULK genera routing basato su file con Expo Router. Rispecchia il modello mentale di Next.js: i file nella directory app/ diventano route.

Pattern chiave usati da VULK:

• Navigazione a tab: Un file (tabs)/_layout.tsx con il componente Tabs da expo-router/tabs
• Navigazione stack: File _layout.tsx annidati con il componente Stack per la navigazione push/pop dentro un tab
• Route dinamiche: File chiamati [id].tsx o [slug].tsx che accettano parametri di route
• Route modali: File in un gruppo (modal)/ presentati come overlay modali

Il layout radice include tipicamente i provider per font, temi e stato globale:

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

Come provi l'app sul tuo telefono?

Poiché non c'è ancora un'anteprima RN nell'editor, i test avvengono sul tuo dispositivo — e il workflow Expo li rende veloci:

1. Scarica il codice dall'editor di VULK (l'export ZIP del sorgente è incluso dal piano Builder in su)
2. Estrai e installa le dipendenze: cd your-app && npm install
3. Avvia il server di sviluppo: npx expo start
4. Scansiona il QR code con Expo Go sul tuo telefono (app Fotocamera su iOS o app Expo Go su Android)

L'app si carica sul dispositivo in pochi secondi, e le modifiche locali si riflettono all'istante via hot reload.

Per le funzionalità che richiedono moduli nativi non inclusi in Expo Go (come Bluetooth o NFC), crea una development build con npx expo run:ios o npx expo run:android. L'app.json generato da VULK include le configurazioni dei plugin per i moduli nativi comuni.

Come si itera dopo la prima generazione?

Il flusso conversazionale di VULK è progettato per lo sviluppo mobile iterativo. Dopo la generazione iniziale, rifinisci con messaggi di follow-up:

• "Aggiungi il pull-to-refresh sulla schermata della lista allenamenti"
• "Sostituisci la lista piatta con una lista a sezioni raggruppata per gruppo muscolare"
• "Aggiungi un bottom sheet per il selettore esercizi invece di navigare a una nuova schermata"
• "Fai mostrare al timer di recupero un indicatore di progresso circolare"

Ogni iterazione preserva il codice esistente e applica modifiche mirate. VULK traccia l'intero albero dei file e modifica solo quelli da aggiornare. La conversazione di build mediana sulla piattaforma è di 4 messaggi — un colpo più qualche ritocco (dati della piattaforma VULK, luglio 2026).

Come si pubblica su App Store e Google Play?

Le build di produzione passano per EAS Build, il servizio di build gestito di Expo:

• Android: eas build --platform android produce un APK (installazione diretta) o un AAB (invio a Google Play). Nessun Android Studio locale richiesto.
• iOS: eas build --platform ios produce un IPA per TestFlight e l'invio all'App Store. Serve un account Apple Developer ($99/anno).

L'app.json generato da VULK arriva con i bundle identifier, i campi di versione e le dichiarazioni di permessi che EAS si aspetta, quindi il progetto è pronto per la build senza chirurgia di configurazione. (Se vuoi un servizio di build APK integrato oggi, esiste per la via Flutter di VULK — un altro motivo per cui molti builder mobile scelgono Flutter su VULK.)

A cosa fare attenzione?

Profondità di navigazione: Se la tua app ha più di tre livelli di navigazione annidata, descrivi la gerarchia esplicitamente nel prompt. Altrimenti l'IA può appiattire route che dovrebbero essere impilate.

Gestione delle immagini: VULK genera l'uso di expo-image per il caricamento ottimizzato. Se la tua app è ricca di immagini (galleria, feed social), menzionalo così l'IA include caching e placeholder adeguati.

Supporto offline: Se l'app deve funzionare offline, dillo nel prompt. VULK genererà la persistenza con AsyncStorage e il rilevamento dello stato di rete, ma solo se richiesto.