Comment Vercel a développé l’app iOS de v0

• Vercel, une entreprise historiquement centrée sur le web, a testé plusieurs stacks techniques et patterns UI avec l’objectif d’offrir une expérience native digne des Apple Design Awards, avant d’aboutir au combo React Native + Expo
• Le cœur du produit est une expérience de création basée sur un chat IA : on note une idée comme dans un mémo, puis elle se matérialise en arrière-plan. L’équipe a conçu avec un grand soin les animations de messages, le scroll, le clavier et un compositeur Liquid Glass pour obtenir des interactions de chat au niveau natif sur iOS
• Pour l’implémentation du chat, Vercel s’appuie sur une combinaison de contextes et de hooks fondés sur LegendList, Reanimated, react-native-keyboard-controller, avec des calculs de blankSize et de contentInset, ainsi qu’un lien avec la hauteur du compositeur, afin de gérer en douceur les hauteurs dynamiques et les variations du clavier
• Côté structure du code, les types, la logique métier et la couche API sont partagés entre le web et le natif. Le flux schéma OpenAPI basé sur Zod → Hey API → Tanstack Query permet à v0 web et aux clients de la v0 Platform API d’utiliser les mêmes endpoints

---

Vue d’ensemble et objectifs de l’app v0 iOS

• Avec la sortie de v0 for iOS, sa première app mobile, Vercel s’est fixé pour objectif de créer une expérience native haut de gamme visant le niveau des Apple Design Awards, malgré son ADN centré sur le web
  • Jusqu’à la sortie de l’app iOS, l’entreprise s’était concentrée sur le web, si bien que le développement d’une app entièrement native constituait un territoire nouveau
  • Avant la bêta publique, elle a donc expérimenté des dizaines de versions en appliquant plusieurs stacks techniques et patterns UI différents
• Comme références, l’équipe s’est inspirée d’apps comme Apple Notes et iMessage, qui parlent bien le langage de l’iPhone, avec l’ambition d’atteindre un niveau de finition capable de trouver sa place parmi les autres apps de l’écran d’accueil
  • Elle explique ne pas s’être enfermée dans un framework précis, mais avoir implémenté et comparé concrètement plusieurs stacks avant de conclure
• Après ces expérimentations, le choix final s’est porté sur React Native + Expo. Les retours de développeurs indiquant que le résultat donne vraiment l’impression d’une app native ont conduit Vercel à détailler son architecture technique

Orientation de l’expérience de chat de v0

• v0 iOS vise à être un outil permettant de transformer immédiatement en quelque chose d’exploitable les idées qui surgissent loin de son ordinateur, en se positionnant comme la nouvelle génération de l’app de prise de notes
  • Plutôt que de transposer un IDE mobile ou l’intégralité des fonctionnalités du web, l’équipe a privilégié une expérience simple et agréable pour créer quelque chose avec l’IA en mobilité
• Cette expérience est centrée sur une interface de chat, pour laquelle les exigences suivantes ont été définies
  • Les nouveaux messages doivent apparaître avec des animations fluides
  • Les nouveaux messages utilisateur doivent être scrollés jusqu’en haut de l’écran pour rester visibles
  • Les messages de l’assistant doivent s’afficher en streaming avec un fade-in progressif en cascade (streaming + délai)
  • Le champ de saisie (compositeur) doit flotter dans un style Liquid Glass, au-dessus d’un contenu scrollable
  • Lorsqu’on ouvre un chat existant, l’affichage doit démarrer déjà positionné sur le dernier message
  • Le comportement du clavier doit sembler naturel et proche du natif
  • La saisie texte doit prendre en charge le collage d’images et de fichiers ainsi que le focus/blur via geste de pan
  • Le rendu Markdown doit être rapide tout en prenant en charge des composants dynamiques
• S’il existe de nombreux patterns d’UI de chat IA sur mobile, il n’y avait pas de pattern mobile dédié à la génération de code par IA. L’équipe a donc dû concevoir elle-même un nouveau pattern, ce qui a demandé beaucoup de travail, de tests et d’ajustements pour atteindre le niveau visé

Conception d’une architecture de chat composable

• Pour répondre à ces exigences, le code du chat a été conçu de manière composable, afin de pouvoir assembler les fonctionnalités par briques
  • Pour cela, l’équipe a créé plusieurs Context Providers englobant l’ensemble du chat, à l’intérieur desquels est placée la liste des messages
• L’implémentation du chat s’appuie sur les bibliothèques open source suivantes
  • LegendList : rendu de listes haute performance
  • React Native Reanimated : animations et shared values
  • react-native-keyboard-controller : contrôle de l’état du clavier et gestion des événements
• Le rendu de chaque message bifurque selon item.role entre user / assistant / optimistic-placeholder, avec des composants distincts selon le rôle

Implémentation des animations de messages

• Le premier message utilisateur apparaît en douceur grâce à une shared value de Reanimated
  • Le hook useFirstMessageAnimation calcule la hauteur du message, la hauteur de l’écran et la hauteur du clavier afin de contrôler translateY et opacity
• Le premier message de l’assistant apparaît avec un fade-in différé après la fin de l’animation du message utilisateur
• Dans les chats existants, scrollToEnd() et l’ajustement de contentInset permettent de positionner naturellement les nouveaux messages en haut de l’écran

Contrôle du scroll et du clavier

• La qualité de l’expérience de chat dépend fortement du caractère naturel du comportement du clavier, et obtenir dans React Native une sensation proche du natif s’est avéré particulièrement délicat
• En raison des différences entre versions d’iOS, des problèmes d’instabilité du comportement du clavier sont apparus,
  ce qui a conduit Vercel à collaborer avec le mainteneur de react-native-keyboard-controller pour corriger des bugs et améliorer les performances
• Le hook useKeyboardAwareMessageList permet de contrôler finement les événements d’ouverture, de fermeture et de glisser du clavier
• Lorsqu’un chat existant est ouvert, plusieurs appels à scrollToEnd sont utilisés pour résoudre les problèmes liés aux hauteurs dynamiques et ajuster automatiquement la position de scroll

Compositeur flottant Liquid Glass et amélioration du champ de saisie

• En appliquant l’effet Liquid Glass d’iMessage, l’équipe a mis en place un champ de saisie flottant et semi-transparent
  • KeyboardStickyView et la shared value composerHeight servent à ajuster en temps réel le contentInset de la scroll view
• Pour conserver l’auto-scroll lors des variations de hauteur du champ de saisie, le hook useScrollWhenComposerSizeUpdates est utilisé
• Pour résoudre les problèmes de rebond du scroll et d’affichage des indicateurs du TextInput par défaut, un patch natif sur RCTUITextView a été appliqué
  • Il améliore aussi la possibilité de donner le focus au clavier via un geste de swipe

Collage d’images et fade-in du contenu en streaming

• Grâce à un module Expo, l’app détecte les événements UIPasteboard et prend en charge le collage de texte, d’images et de fichiers
• Le composant FadeInStaggeredIfStreaming permet un fade-in mot par mot du texte de réponse de l’IA
  • La gestion d’un pool d’animations sert à limiter le nombre d’animations simultanées et à optimiser les performances
  • Le contenu déjà vu ne se réanime pas grâce à DisableFadeProvider

Partage de code entre web et natif, et Platform API

• Les types et fonctions utilitaires sont partagés entre le web et le mobile, tandis que l’UI et la gestion d’état restent séparées
• Vercel a mis en place un framework d’API type-safe basé sur Zod, qui génère automatiquement la spécification OpenAPI
  • L’app mobile effectue ses appels API via Hey API + Tanstack Query
• Sur cette base, l’entreprise a publié la v0 Platform API, en exposant les mêmes endpoints aux développeurs externes

Styling et composants natifs

• react-native-unistyles est utilisé pour gérer les thèmes et permettre un styling rapide sans accès via Context
• Zeego sert à implémenter des menus basés sur le UIMenu natif d’iOS
• Vercel a corrigé un bug de positionnement des Alert apparu sur iOS 26 et a contribué le patch en upstream à React Native
• Des problèmes de glissement et de scintillement liés aux modales (formSheet) ont également été corrigés, en collaboration avec Callstack, Meta et Expo, avec une intégration dans React Native 0.82

Projets à venir et collaboration avec la communauté

• Après avoir achevé sa première app avec le duo React Native + Expo, Vercel prévoit de conserver cette même stack pour ses futurs projets. L’entreprise se dit satisfaite de son stack actuel
• Vercel se concentre sur la réalisation de produits ambitieux à un haut niveau d’exécution,
  • et indique vouloir publier en open source le savoir-faire développé en interne afin d’aider les développeurs web et natifs à créer des produits du même niveau
  • En particulier, l’entreprise recrute une communauté pour bêta-tester des bibliothèques open source pour apps de chat IA, et continuera à contribuer à l’amélioration de React Native