Wie Vercel die iOS-App von v0 entwickelt hat

• Das webzentrierte Unternehmen Vercel experimentierte mit mehreren Tech-Stacks und UI-Mustern, um eine native Experience auf Apple-Design-Award-Niveau zu erreichen, und entschied sich am Ende für die Kombination React Native + Expo
• Im Mittelpunkt steht eine KI-chatbasierte Erstellungs-Experience, bei der man Ideen wie in einer Notiz aufschreibt und sie im Hintergrund erstellt werden. Nachrichtenanimationen, Scrollen, Tastaturverhalten und ein Liquid-Glass-Composer wurden bis ins Detail ausgearbeitet, um Chat-Interaktionen auf iOS-Native-Niveau umzusetzen
• Bei der Chat-Implementierung werden dynamische Höhe und Tastaturänderungen mithilfe einer Kombination aus Contexts und Hooks auf Basis von LegendList, Reanimated, react-native-keyboard-controller, der Berechnung von blankSize und contentInset sowie der Anbindung an die Composer-Höhe flüssig verarbeitet
• Kennzeichnend für die Code-Struktur ist, dass Typen, Business-Logik und API-Layer zwischen Web und Native geteilt werden und dass ein auf Zod basierender Flow OpenAPI-Schema → Hey API → Tanstack Query so gestaltet ist, dass sowohl das v0-Web als auch Kunden der v0 Platform API dieselben Endpunkte verwenden

---

Überblick und Ziele der v0-iOS-App

• Mit der Veröffentlichung von v0 for iOS, der ersten mobilen App des Unternehmens, setzte sich Vercel trotz seines Web-Fokus das Ziel, eine hochwertige native Experience zu schaffen, die auf einen Apple Design Award abzielt
  • Bis zur Veröffentlichung der iOS-App lag der Fokus auf dem Web, daher war die Entwicklung einer vollwertigen nativen App Neuland
  • Dafür wurden vor der öffentlichen Beta Dutzende Versionen mit verschiedenen Tech-Stacks und UI-Mustern erprobt
• Als Referenzen dienten Apps wie Apple Notes und iMessage, die die Sprache des iPhones gut nutzen. Ziel war ein Qualitätsniveau, das sich zwischen anderen Apps auf dem Homescreen behaupten kann
  • Man legte sich nicht früh auf ein bestimmtes Framework fest, sondern traf die Entscheidung erst nach realer Implementierung und Vergleich mehrerer Stacks
• Nach zahlreichen Experimenten fiel die Wahl schließlich auf React Native + Expo. Viele Entwickler gaben daraufhin das Feedback, dass sich die App wie eine native App anfühlt, was Vercel zum Anlass nahm, die technische Architektur im Detail offenzulegen

Ausrichtung der v0-Chat-Experience

• v0 iOS versteht sich als Werkzeug, um Ideen, die einem unterwegs fern vom Computer kommen, sofort in etwas Umsetzbares zu verwandeln, und positioniert sich damit als nächste Generation der Notiz-App
  • Statt eine mobile IDE oder den vollen Web-Funktionsumfang zu übertragen, stand eine einfache und angenehme Experience im Vordergrund, mit der man unterwegs per KI etwas erstellen kann
• Im Zentrum dieser Experience steht die Chat-Oberfläche, für die folgende Anforderungen definiert wurden
  • Neue Nachrichten sollen mit weichen Animationen erscheinen
  • Neue Nutzernachrichten sollen so gescrollt werden, dass sie bis an den oberen Bildschirmrand sichtbar sind
  • Assistant-Nachrichten sollen während des Streamings mit einem gestaffelten Fade-in (Streaming + Verzögerung) angezeigt werden
  • Das Eingabefeld (Composer) soll im Liquid-Glass-Stil schweben und über dem scrollbaren Inhalt liegen
  • Beim Öffnen eines bestehenden Chats soll die Ansicht bereits bis zur letzten Nachricht gescrollt sein
  • Das Tastaturverhalten soll sich natürlich und möglichst nativ anfühlen
  • Die Texteingabe soll Einfügen von Bildern und Dateien sowie Fokus/Blur per Pan-Geste unterstützen
  • Das Markdown-Rendering soll schnell sein und zugleich dynamische Komponenten unterstützen
• Obwohl es viele mobile UI-Muster für KI-Chats gibt, fehlte ein mobiles Muster für KI-Codegenerierung, weshalb ein neues Muster direkt entworfen werden musste. Um den eigenen Ansprüchen gerecht zu werden, waren dafür viel Arbeit, Tests und Abstimmung nötig

Entwurf einer composable Chat-Architektur

• Um die Chat-Anforderungen zu erfüllen, wurde der Chat-Code so entworfen, dass er nach Funktionen kombinierbar (composable) ist
  • Dazu wurden mehrere Context Provider erstellt, die den gesamten Chat umschließen, und die Nachrichtenliste innerhalb dieser Struktur platziert
• Für die Chat-Implementierung kamen folgende Open-Source-Bibliotheken zum Einsatz
  • LegendList: High-Performance-Listenrendering
  • React Native Reanimated: Animationen und Shared Values
  • react-native-keyboard-controller: Steuerung des Tastaturstatus und Event-Handling
• Das Rendering jeder Nachricht verzweigt je nach item.role in user / assistant / optimistic-placeholder, sodass je Rolle unterschiedliche Komponenten verwendet werden

Umsetzung der Nachrichtenanimationen

• Die erste Nutzernachricht blendet mithilfe eines Reanimated Shared Value sanft ein
  • Der Hook useFirstMessageAnimation berechnet Nachrichtenhöhe, Bildschirmhöhe und Tastaturhöhe und steuert damit translateY und opacity
• Die erste Assistant-Nachricht erscheint nach Abschluss der Nutzernachrichtenanimation mit verzögertem Fade-in
• In bestehenden Chats werden neue Nachrichten durch scrollToEnd() und Anpassung von contentInset natürlich am oberen Bildschirmbereich positioniert

Scroll- und Tastatursteuerung

• Die Qualität der Chat-Experience hängt stark von einem natürlich wirkenden Tastaturverhalten ab, und in React Native ein annähernd natives Tastaturgefühl zu erzeugen, erwies sich als ausgesprochen schwierig
• Aufgrund von Unterschieden zwischen iOS-Versionen traten Probleme mit instabilem Tastaturverhalten auf.
  Gemeinsam mit dem Maintainer von react-native-keyboard-controller wurden Bugs behoben und die Performance verbessert
• Mit dem Hook useKeyboardAwareMessageList werden Ereignisse beim Öffnen, Schließen und Ziehen der Tastatur fein granular gesteuert
• Beim Öffnen bestehender Chats wurde zur automatischen Anpassung der Scroll-Position scrollToEnd mehrfach aufgerufen, um Probleme mit dynamischen Höhen zu lösen

Liquid-Glass-Floating-Composer und Verbesserungen am Eingabefeld

• Mit dem Liquid-Glass-Effekt aus iMessage wurde ein halbtransparentes, schwebendes Eingabefeld umgesetzt
  • Über KeyboardStickyView und den Shared Value composerHeight wird das contentInset der Scroll-View in Echtzeit angepasst
• Um bei Änderungen der Eingabefeldhöhe das automatische Scrollen beizubehalten, kommt der Hook useScrollWhenComposerSizeUpdates zum Einsatz
• Um Probleme mit Scroll-Bounce und sichtbaren Indikatoren des Standard-TextInput zu lösen, wurde ein nativer Patch für RCTUITextView angewendet
  • Zusätzlich wurde die Möglichkeit verbessert, die Tastatur per Swipe-Geste zu fokussieren

Einfügen von Bildern und Fade-in bei Streaming-Inhalten

• Über ein Expo-Modul werden UIPasteboard-Events erkannt, um das Einfügen von Text, Bildern und Dateien zu unterstützen
• Mit der Komponente FadeInStaggeredIfStreaming wird ein wortweises Fade-in des KI-Antworttexts umgesetzt
  • Durch die Verwaltung eines Animations-Pools werden gleichzeitige Animationen begrenzt und die Performance optimiert
  • Bereits gesehene Inhalte werden über DisableFadeProvider vor erneuter Animation geschützt

Gemeinsame Code-Nutzung zwischen Web und Native sowie die Platform API

• Zwischen Web und Mobile werden Typen und Helper-Funktionen geteilt, während UI und State-Management getrennt bleiben
• Es wurde ein typensicheres API-Framework auf Basis von Zod aufgebaut, das OpenAPI-Spezifikationen automatisch generiert
  • Die mobile App nutzt Hey API + Tanstack Query für API-Aufrufe
• Auf Basis dieser Struktur wurde die v0 Platform API veröffentlicht, die externe Entwickler über dieselben Endpunkte nutzen können

Styling und native Komponenten

• Mit react-native-unistyles wird das Theme verwaltet und schnelles Styling ohne Context-Zugriff ermöglicht
• Über Zeego wurden Menüs auf Basis des nativen iOS-UIMenu umgesetzt
• Ein Fehler bei der Position von Alerts unter iOS 26 wurde behoben und als Upstream-Patch zu React Native beigetragen
• Probleme mit Dragging und Flackern bei Modals (formSheet) wurden behoben; die Änderungen flossen in Zusammenarbeit mit Callstack, Meta und Expo in React Native 0.82 ein

Weitere Pläne und Zusammenarbeit mit der Community

• Nach Fertigstellung der ersten App mit der Kombination React Native + Expo will Vercel auch künftige Projekte auf demselben Stack aufbauen und zeigt sich mit dem aktuellen Stack zufrieden
• Vercel konzentriert sich darauf, ambitionierte Produkte auf hohem Niveau umzusetzen, und
  • plant, das intern aufgebaute Know-how als Open Source zu veröffentlichen, damit Web- und Native-Entwickler Produkte auf vergleichbarem Niveau bauen können
  • sucht insbesondere eine Community zum Betatesten von Open-Source-Bibliotheken für KI-Chat-Apps und will weiterhin zu Verbesserungen von React Native beitragen