Comment construire une app React Native avec VULK

Mis à jour le 18 juillet 2026 — rafraîchi avec des données vérifiées de la plateforme et le statut honnête actuel de l'aperçu pour React Native.

Comment construit-on une app React Native avec VULK ?

La réponse complète : vous décrivez l'app dans un prompt, et VULK génère un projet React Native + Expo complet — navigation par fichiers avec Expo Router, styles avec NativeWind (Tailwind pour React Native), TypeScript partout, et un app.json configuré avec identifiants de bundle et permissions. Vous téléchargez ensuite le projet, lancez npx expo start et le testez sur votre propre téléphone dans Expo Go en quelques minutes ; les builds de production partent via EAS Build (eas build) vers l'App Store et Google Play.

Une chose dite d'emblée, parce que l'honnêteté bat le marketing : VULK ne rend pas actuellement les apps React Native dans l'aperçu en direct intégré. React Native est bundlé par Metro et ne peut pas tourner dans l'aperçu navigateur qui sert les stacks web de VULK — un aperçu RN dans l'éditeur est en développement, pas encore livré. Ce que vous obtenez aujourd'hui, c'est du code généré complet et réel, plus le workflow Expo standard pour l'exécuter sur un appareil. La demande est réelle mais moindre que celle de Flutter : 213 prompts utilisateur cumulés ont demandé React Native/Expo contre 381 pour Flutter (données de la plateforme VULK, juillet 2026, N = 11 355 projets) — c'est aussi pourquoi Flutter a eu son service de build intégré en premier.

Que génère exactement VULK ?

Ce n'est pas une web app enveloppée dans un WebView. VULK génère de vrais composants natifs — View, Text, ScrollView, FlatList, TouchableOpacity — qui compilent en widgets natifs de plateforme sur iOS et Android.

L'arborescence générée ressemble à ceci :

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

Comment écrire des prompts qui produisent de bonnes apps mobiles ?

Le prompt est là où se décide la qualité de votre app générée. Voici de vrais prompts qui produisent des résultats solides.

Prompt basique (fonctionne, mais générique) :

Construis une app de suivi fitness en React Native

Meilleur prompt (fonctionnalités spécifiques) :

Construis une app React Native de suivi fitness avec navigation par onglets Expo Router. Inclus un écran de journal d'entraînement où les utilisateurs ajoutent des exercices avec séries, répétitions et poids. Ajoute un écran de progression avec des graphiques du volume hebdomadaire. Utilise NativeWind avec un thème sombre. Inclus un composant minuteur pour les temps de repos entre les séries.

Prompt avancé (qualité production) :

Construis un tracker fitness React Native + Expo avec ces écrans : (1) Dashboard montrant le plan d'entraînement du jour et les stats hebdomadaires, (2) Bibliothèque d'exercices avec recherche et filtres par groupe musculaire, (3) Écran d'entraînement actif avec minuteur en cours, enregistrement des séries et minuteur de repos, (4) Onglet progression avec courbes du poids soulevé par groupe musculaire sur 30 jours, (5) Profil avec réglages des unités (kg/lbs) et valeurs par défaut du minuteur. Utilise les onglets Expo Router pour la navigation principale et la navigation stack dans chaque onglet. Style avec NativeWind en thème sombre (fond zinc-900, accents emerald-500). Stocke les données localement avec AsyncStorage. Utilise expo-haptics pour le retour haptique des boutons.

La différence entre ces prompts, c'est la spécificité. Les modèles IA de VULK performent le mieux quand vous décrivez explicitement écrans, structures de données et patterns d'interaction — le prompt médian sur VULK ne fait que 364 caractères, mais les meilleures générations mobiles viennent de prompts comme l'avancé ci-dessus (données de la plateforme VULK, juillet 2026).

Comment NativeWind fonctionne-t-il dans le code généré ?

NativeWind permet à VULK d'utiliser les classes Tailwind CSS dans React Native. Le code généré utilise le prop className au lieu de 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>
  );
}

C'est du vrai code React Native qui compile en objets StyleSheet natifs au moment du build. Aucune pénalité de performance à l'exécution. Si vous avez besoin de styles que NativeWind ne couvre pas, vous pouvez toujours retomber sur les props style — VULK les génère quand un style spécifique à la plateforme est requis.

Comment fonctionne la navigation Expo Router ?

VULK génère un routage par fichiers avec Expo Router. Cela reflète le modèle mental de Next.js : les fichiers du répertoire app/ deviennent des routes.

Patterns clés utilisés par VULK :

• Navigation par onglets : Un fichier (tabs)/_layout.tsx avec le composant Tabs de expo-router/tabs
• Navigation stack : Des fichiers _layout.tsx imbriqués avec le composant Stack pour la navigation push/pop dans un onglet
• Routes dynamiques : Des fichiers nommés [id].tsx ou [slug].tsx acceptant des paramètres de route
• Routes modales : Des fichiers dans un groupe (modal)/ présentés en overlays modaux

Le layout racine inclut typiquement les providers de polices, thèmes et état global :

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

Comment tester l'app sur votre téléphone ?

Puisqu'il n'y a pas encore d'aperçu RN dans l'éditeur, les tests se font sur votre propre appareil — et le workflow Expo rend cela rapide :

1. Téléchargez le code depuis l'éditeur VULK (l'export ZIP de la source est inclus à partir du plan Builder)
2. Extrayez et installez les dépendances : cd your-app && npm install
3. Lancez le serveur de dev : npx expo start
4. Scannez le QR code avec Expo Go sur votre téléphone (app Appareil photo iOS ou app Expo Go Android)

L'app se charge sur votre appareil en quelques secondes, et les modifications locales se reflètent instantanément via hot reload.

Pour les fonctionnalités nécessitant des modules natifs absents d'Expo Go (Bluetooth, NFC…), créez un development build avec npx expo run:ios ou npx expo run:android. L'app.json généré par VULK inclut les configurations de plugins pour les modules natifs courants.

Comment itérer après la première génération ?

Le flux conversationnel de VULK est conçu pour le développement mobile itératif. Après la génération initiale, affinez avec des messages de suivi :

• « Ajoute le pull-to-refresh sur l'écran de liste des entraînements »
• « Remplace la liste plate par une liste sectionnée groupée par groupe musculaire »
• « Ajoute un bottom sheet pour le sélecteur d'exercices au lieu de naviguer vers un nouvel écran »
• « Fais afficher au minuteur de repos un indicateur de progression circulaire »

Chaque itération préserve votre code existant et applique des changements ciblés. VULK suit l'arborescence complète et ne modifie que les fichiers à mettre à jour. La conversation de build médiane sur la plateforme fait 4 messages — un jet plus quelques retouches (données de la plateforme VULK, juillet 2026).

Comment livrer sur l'App Store et Google Play ?

Les builds de production passent par EAS Build, le service de build managé d'Expo :

• Android : eas build --platform android produit un APK (installation directe) ou un AAB (soumission Google Play). Pas d'Android Studio local requis.
• iOS : eas build --platform ios produit un IPA pour TestFlight et la soumission App Store. Il vous faut un compte Apple Developer (99 $/an).

L'app.json généré par VULK embarque les identifiants de bundle, champs de version et déclarations de permissions attendus par EAS — le projet est prêt à builder sans chirurgie de configuration. (Si vous voulez un service de build APK intégré dès aujourd'hui, il existe pour la voie Flutter de VULK — une raison de plus pour laquelle beaucoup de builders mobiles choisissent Flutter sur VULK.)

À quoi faut-il faire attention ?

Profondeur de navigation : Si votre app a plus de trois niveaux de navigation imbriquée, décrivez la hiérarchie explicitement dans votre prompt. Sinon l'IA peut aplatir des routes qui devraient être empilées.

Gestion des images : VULK génère l'usage d'expo-image pour un chargement optimisé. Si votre app est riche en images (galerie, feed social), mentionnez-le pour que l'IA inclue cache et placeholders.

Support hors ligne : Si votre app doit fonctionner hors ligne, dites-le dans le prompt. VULK générera la persistance AsyncStorage et la détection de l'état réseau, mais seulement sur demande.