Come costruire una app React Native con VULK

Aggiornato il 7 ottobre 2026 — anteprima React Native, test sul dispositivo e build per gli store.

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.

VULK genera un progetto React Native + Expo completo. Usa Expo Go per visualizzarlo sul tuo telefono, continua a modificarlo nella conversazione con VULK e usa EAS Build per App Store e Google Play. Le funzioni native si testano sul dispositivo.

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?

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.

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, così VULK impila ogni route esattamente dove la vuoi.

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 genera allora la persistenza con AsyncStorage e il rilevamento dello stato di rete.