How we built the v0 iOS app

Summary

We recently released v0 for iOS, Vercel’s first mobile app. As a company focused on the web, building a native app was new territory for us.Our goal was to build an app worthy of an Apple Design Award, and we were open-minded on the best tech stack to get there. To that end, we built dozens of iterations of the product prior to our public beta. We experimented with drastically different tech stacks and UI patterns. We took inspiration from apps which speak the iPhone’s language, such as Apple Notes and iMessage. v0 had to earn a spot on your Home Screen among the greats.After weeks of experimentation, we landed on React Native with Expo to achieve this. We are pleased with the results, and our customers are too. In fact, the influx of messages from developers asking how the app feels so native compelled us to write a technical breakdown of how we did it.Link to headingHow we built the v0 chat experienceWhen you’re away from your computer, you might have a quick idea you want to act on. Our goal was to let you turn that idea into something tangible, without requiring context switching. v0 for iOS is the next generation of your Notes app, where your ideas get built in the background.We did not set out to build a mobile IDE with feature parity with our website. Instead, we wanted to build a simple, delightful experience for using AI to make things on the go. The centerpiece of that experience is the chat.To build a great chat, we set the following requirements:New messages animate in smoothlyNew user messages scroll to the top of the screenAssistant messages fade in with a staggered transition as they streamThe composer uses Liquid Glass and floats on top of scrollable contentOpening existing chats starts scrolled to the endKeyboard handling feels naturalThe text input lets you paste images and filesThe text input supports pan gestures to focus and blur itMarkdown is fast and supports dynamic componentsWhile a number of UI patterns have emerged for AI chat in mobile ap...