Comment construire une app React Native avec VULK

Mis à jour le 7 octobre 2026 — aperçu React Native, tests sur l’appareil et builds pour les stores.

Comment construit-on une app React Native avec VULK ?

La réponse complète : tu décris 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. Tu télécharges ensuite le projet, lances npx expo start et le testes sur ton 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.

VULK génère un projet React Native + Expo complet. Utilise Expo Go pour le prévisualiser sur ton téléphone, continue à le faire évoluer dans la conversation avec VULK et utilise EAS Build pour l’App Store et Google Play. Les fonctions natives se testent sur l’appareil.

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 ton 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 tu décris 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 tu as besoin de styles que NativeWind ne couvre pas, tu peux 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 ton téléphone ?

Les tests se font sur ton propre appareil — et le workflow Expo rend cela rapide :

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

L'app se charge sur ton 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ée 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, affine 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 ton 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 te 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.

À quoi faut-il faire attention ?

Profondeur de navigation : Si ton app a plus de trois niveaux de navigation imbriquée, décris la hiérarchie explicitement dans ton prompt pour que VULK empile chaque route exactement là où tu la veux.

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

Support hors ligne : Si ton app doit fonctionner hors ligne, dis-le dans le prompt. VULK génère alors la persistance AsyncStorage et la détection de l'état réseau.