5 ms·

How we built the v0 iOS app

34 points by MaxLeiter 11mo ago

_fzslm 11mo ago
This looks like a solidly built app, but having used React Native to ship production apps I really don't think its the way forward – nor spending development effort on making apps "look native" with Liquid Glass and the like. It's so much more brittle than building a web app, even with the impressive steps taken with e.g. the New Architecture. When nearly everything today is a walled garden, I find it really hard to understand why we'd want to fortify those walls with any more platform-specific code. Though it's imperfect and still in development, I see much more of a future in the open web platform and wasm.
- deleted 11mo ago
  [deleted]
- sunaookami 10mo ago
  Updating React Native every few months with breaking changes, no official upgrade path but "diff the two versions and copy everything over", having to update something every few months because Google introduces some new bullshit (API level updates that break everything! 16 KB page size! no orientation lock for tablets! yay!), using dependencies that get deprecated because React Native comes with no batteries included (Expo seems better but it's 1) another vendor lock-in 2) difficult to use with third party SDKs and 3) was not in the state it's now when the development of our app was started)... man I hate React Native and mobile development with a passion. Sadly I'm stuck with it for now...
  - satvikpendem 10mo ago
    I use Flutter with seems to fix many of these issues, primarily because it's not in the npm ecosystem so I don't have random breakages everywhere, because like you I also was tired of React Native.
tevon 11mo ago
Their bottom control buttons here feels like the perfect use-case for liquid glass. Really enjoying this new UI from Apple.
fernandorojo 11mo ago
Author of the blog post here. Happy to answer any questions.
- maderalabs 10mo ago
  I'm curious how much y'all used AI in the development process of the app. Definitely a lot of thought put into the architecture as shown in the post here, what was the split of human written vs. AI-written code? Especially curious given v0 is intended for building with AI. Really great writeup, super thoughtful! Been a v0 user and fan for awhile now, excited to give this a shot!
  - fernandorojo 10mo ago
    Our biggest usage of AI was actually a code review bot which lives on GitHub PRs. It reviews our code on every commit. It was originally an internal tool, but it's now Vercel Agent. We also used v0 for prototyping ideas and designs for the native app.
- internetter 10mo ago
  Why did you decide against SwiftUI?
  - fernandorojo 10mo ago
    I ultimately prefer React Native's composition model over SwiftUI. Something that attracts me to RN is that it's easy to drop down to native. We use SwiftUI for a number of components under the hood. But for a full app, React Native felt better.
gitpusher 11mo ago
Man. I looked at their landing page. Skimmed the "how we did it" article. And I still have no idea what this app does – seems like chat of some sort? Edit: Ah. If you go to the iOS Store, they reveal that it is an AI app. How mysterious. Why not just say that on your landing page
- jama211 11mo ago
  Yeah I can’t find a reason why but I’m put off and uneasy reading all this for some reason . Also the detail in this “how we built the app” article is basically… too detailed? Like a new developer who comments every line of logic in their code. Perhaps it was also generated with AI with a prompt that was looking at the codebase? I wish them all the best but perhaps this just isn’t for me.
  - MaxLeiter 11mo ago
    A lot of react native apps do not feel native. Even more are just low quality. Many v0 users were asking us how exactly we did X or Y to make it feel so good, which is what this post is for.
    - jama211 10mo ago
      Ok, well good luck
    - tennex 10mo ago
      I like it. This post is the perfect level of detail for people obsessed about UX minutiae. Personally, I'm not a huge Vercel fan (IMO: lots of hype, business model encourages developer ecosystem lock-in), but this post gave me more trust in the design/UX care that goes into their products (which is a core Vercel strength).
      - MaxLeiter 10mo ago
        I am obviously bias as a Vercel employee, but I think we actually do a lot to avoid locking our users in. You can read more about our approach here: https://vercel.com/blog/vercel-the-anti-vendor-lock-in-cloud https://vercel.com/blog/vercel-the-anti-vendor-lock-in-cloud If that doesn't alleviate your concerns or you disagree, I'd love to hear your thoughts about how we can improve
rumori 11mo ago
I tried the app and dragging down on the content doesn’t dismiss the keyboard interactively like Messages, Safari or even ChatGPT does. That is usually the telltale sign that an app is not fully native, I haven’t see any cross platform framework succeeding with this particular behavior. Not the end of the world but still expected in Design Award runner ups.
- fernandorojo 11mo ago
  Interesting, that actually should work. Are you on iOS 26.2 by chance? I'm currently investigating a regression on interactive keyboard dismissal specific to iOS 26.2.
  - busymom0 10mo ago
    Note sure about 26.2 but on 26.1, setting the following on a native UITextView makes it work: textView.keyboardDismissMode = .interactive Should be doable via react native too.
    - fernandorojo 10mo ago
      Yeah that's what we use (and we showed it in the patch in the blog post). There was a bug on a particular iOS 26.2 beta, but it looks like it's already fixed
rumori 11mo ago
After signing up with Apple sign-in, the app fails to load favorites, chats, fails to upload images and fails to submit issues. Something to look into.
- fernandorojo 11mo ago
  Thanks for sharing, sorry about that. We had an issue on the backend with Apple sign in that we just fixed today. Mind signing out and back in to see if it's fixed?
pkamb 10mo ago
> Our goal was to build an app worthy of an Apple Design Award [...] After weeks of experimentation, we landed on React Native with Expo to achieve this. Has a non-native app ever won an ADA?
- tl 10mo ago
  Balatro and a number of other games have. But react-native? I can't think of an example and the framework wouldn't be my choice for "award winning" design. Watch Duty won with a Cordova app in the "Social Impact" category, so it's not impossible.
  - fernandorojo 10mo ago
    TIL a Cordova app won
- moonu 10mo ago
  [dead]
- fernandorojo 10mo ago
  Imagine being the first one!
patternMachine 10mo ago
This reads more like a portfolio case study than a blog post for a company. Who is the audience of this post? Isn't one of the main value props of Vercel that you don't need to know technical details like this to launch a product?
- satvikpendem 10mo ago
  By OP: > A lot of react native apps do not feel native. Even more are just low quality. Many v0 users were asking us how exactly we did X or Y to make it feel so good, which is what this post is for. https://news.ycombinator.com/item?id=46049137 https://news.ycombinator.com/item?id=46049137 --- And I mean, what's wrong with giving more detail on how to make good UX, for other developers to learn from too? I appreciated the level of detail in this post rather than many which skim over it.
samschooler 10mo ago
This is an incredible write up and touches on a bunch of headaches I'm sure we've all hit with RN, so thanks. I'm interested in how you're dealing with the live activity and share sheet. I always drop down to native code, but am wondering if you built those with RN as well?
- fernandorojo 10mo ago
  For the live activities, we used expo-apple-targets. That helps bootstrap it, link assets, etc. The UI itself is SwiftUI. The hard part here was actually the server-driven events for the activities during the stream. Live activities can be annoying to work with using APNs. You can just use Share.share() from react-native directly for the share sheet.
  - samschooler 10mo ago
    Sweet, didn't know about expo-apple-targets. I think that answers both. By share sheet I meant external, so a safari -> share sheet -> v0.dev -> your custom share view external to the app. But I'm sure it's the same flow with expo-apple-targets.
kundi 10mo ago
I have tried the app but the experience is quite bad. The output broke half-way with a red message, the produced design was subpar
Insensitivity 10mo ago
I'm not sure if React Native is much different from React itself, but a few things that made me give a side eye, when looking at this write up: 1. The instant 5 levels of providers (and additional one later) seems excessive. 2. The usage of useAnimatedReaction which seems almost like a "useEffect" kind of hook, which was sprinkled in almost every code block. 3. The imperative size calculations, does React Native not support any responsive like constructs? I recall solving the same problem by separating "history" and "tail" and having a "grower" component, without having to use any JS (purely html & css), albeit it being web and not native. 4. Personally, when I see something like the scroll code, where you have to call scroll, wait a frame, call scroll again, set a timeout, scroll again- I would have raised my eyebrows about the architecture / code flow way before that. 5. the amount of "floating" hook calls like useKeyboardAwareMessageList() useScrollMessageListFromComposerSizeUpdates() useUpdateLastMessageIndex() that don't return anything, always makes me raise an eyebrow, usually in React Web codebases, where the users just spam useEffects and effect chains. Not sure if it's just my ignorance in React Native, but if I had seen the equivalent in a React Web app, I would've been baffled

34 points by MaxLeiter 11mo ago

_fzslm 11mo ago

This looks like a solidly built app, but having used React Native to ship production apps I really don't think its the way forward – nor spending development effort on making apps "look native" with Liquid Glass and the like. It's so much more brittle than building a web app, even with the impressive steps taken with e.g. the New Architecture. When nearly everything today is a walled garden, I find it really hard to understand why we'd want to fortify those walls with any more platform-specific code. Though it's imperfect and still in development, I see much more of a future in the open web platform and wasm.

deleted 11mo ago
[deleted]
sunaookami 10mo ago
Updating React Native every few months with breaking changes, no official upgrade path but "diff the two versions and copy everything over", having to update something every few months because Google introduces some new bullshit (API level updates that break everything! 16 KB page size! no orientation lock for tablets! yay!), using dependencies that get deprecated because React Native comes with no batteries included (Expo seems better but it's 1) another vendor lock-in 2) difficult to use with third party SDKs and 3) was not in the state it's now when the development of our app was started)... man I hate React Native and mobile development with a passion. Sadly I'm stuck with it for now...
- satvikpendem 10mo ago
  I use Flutter with seems to fix many of these issues, primarily because it's not in the npm ecosystem so I don't have random breakages everywhere, because like you I also was tired of React Native.

tevon 11mo ago

Their bottom control buttons here feels like the perfect use-case for liquid glass. Really enjoying this new UI from Apple.

fernandorojo 11mo ago

Author of the blog post here. Happy to answer any questions.

maderalabs 10mo ago
I'm curious how much y'all used AI in the development process of the app. Definitely a lot of thought put into the architecture as shown in the post here, what was the split of human written vs. AI-written code? Especially curious given v0 is intended for building with AI. Really great writeup, super thoughtful! Been a v0 user and fan for awhile now, excited to give this a shot!
- fernandorojo 10mo ago
  Our biggest usage of AI was actually a code review bot which lives on GitHub PRs. It reviews our code on every commit. It was originally an internal tool, but it's now Vercel Agent. We also used v0 for prototyping ideas and designs for the native app.
internetter 10mo ago
Why did you decide against SwiftUI?
- fernandorojo 10mo ago
  I ultimately prefer React Native's composition model over SwiftUI. Something that attracts me to RN is that it's easy to drop down to native. We use SwiftUI for a number of components under the hood. But for a full app, React Native felt better.

gitpusher 11mo ago

Man. I looked at their landing page. Skimmed the "how we did it" article. And I still have no idea what this app does – seems like chat of some sort? Edit: Ah. If you go to the iOS Store, they reveal that it is an AI app. How mysterious. Why not just say that on your landing page

jama211 11mo ago
Yeah I can’t find a reason why but I’m put off and uneasy reading all this for some reason . Also the detail in this “how we built the app” article is basically… too detailed? Like a new developer who comments every line of logic in their code. Perhaps it was also generated with AI with a prompt that was looking at the codebase? I wish them all the best but perhaps this just isn’t for me.
- MaxLeiter 11mo ago
  A lot of react native apps do not feel native. Even more are just low quality. Many v0 users were asking us how exactly we did X or Y to make it feel so good, which is what this post is for.
  - jama211 10mo ago
    Ok, well good luck
  - tennex 10mo ago
    I like it. This post is the perfect level of detail for people obsessed about UX minutiae. Personally, I'm not a huge Vercel fan (IMO: lots of hype, business model encourages developer ecosystem lock-in), but this post gave me more trust in the design/UX care that goes into their products (which is a core Vercel strength).
    - MaxLeiter 10mo ago
      I am obviously bias as a Vercel employee, but I think we actually do a lot to avoid locking our users in. You can read more about our approach here: https://vercel.com/blog/vercel-the-anti-vendor-lock-in-cloud https://vercel.com/blog/vercel-the-anti-vendor-lock-in-cloud If that doesn't alleviate your concerns or you disagree, I'd love to hear your thoughts about how we can improve

rumori 11mo ago

I tried the app and dragging down on the content doesn’t dismiss the keyboard interactively like Messages, Safari or even ChatGPT does. That is usually the telltale sign that an app is not fully native, I haven’t see any cross platform framework succeeding with this particular behavior. Not the end of the world but still expected in Design Award runner ups.

fernandorojo 11mo ago
Interesting, that actually should work. Are you on iOS 26.2 by chance? I'm currently investigating a regression on interactive keyboard dismissal specific to iOS 26.2.
- busymom0 10mo ago
  Note sure about 26.2 but on 26.1, setting the following on a native UITextView makes it work: textView.keyboardDismissMode = .interactive Should be doable via react native too.
  - fernandorojo 10mo ago
    Yeah that's what we use (and we showed it in the patch in the blog post). There was a bug on a particular iOS 26.2 beta, but it looks like it's already fixed

rumori 11mo ago

After signing up with Apple sign-in, the app fails to load favorites, chats, fails to upload images and fails to submit issues. Something to look into.

fernandorojo 11mo ago
Thanks for sharing, sorry about that. We had an issue on the backend with Apple sign in that we just fixed today. Mind signing out and back in to see if it's fixed?

pkamb 10mo ago

> Our goal was to build an app worthy of an Apple Design Award [...] After weeks of experimentation, we landed on React Native with Expo to achieve this. Has a non-native app ever won an ADA?

tl 10mo ago
Balatro and a number of other games have. But react-native? I can't think of an example and the framework wouldn't be my choice for "award winning" design. Watch Duty won with a Cordova app in the "Social Impact" category, so it's not impossible.
- fernandorojo 10mo ago
  TIL a Cordova app won
moonu 10mo ago
[dead]
fernandorojo 10mo ago
Imagine being the first one!

patternMachine 10mo ago

This reads more like a portfolio case study than a blog post for a company. Who is the audience of this post? Isn't one of the main value props of Vercel that you don't need to know technical details like this to launch a product?

satvikpendem 10mo ago
By OP: > A lot of react native apps do not feel native. Even more are just low quality. Many v0 users were asking us how exactly we did X or Y to make it feel so good, which is what this post is for. https://news.ycombinator.com/item?id=46049137 https://news.ycombinator.com/item?id=46049137 --- And I mean, what's wrong with giving more detail on how to make good UX, for other developers to learn from too? I appreciated the level of detail in this post rather than many which skim over it.

samschooler 10mo ago

This is an incredible write up and touches on a bunch of headaches I'm sure we've all hit with RN, so thanks. I'm interested in how you're dealing with the live activity and share sheet. I always drop down to native code, but am wondering if you built those with RN as well?

fernandorojo 10mo ago
For the live activities, we used expo-apple-targets. That helps bootstrap it, link assets, etc. The UI itself is SwiftUI. The hard part here was actually the server-driven events for the activities during the stream. Live activities can be annoying to work with using APNs. You can just use Share.share() from react-native directly for the share sheet.
- samschooler 10mo ago
  Sweet, didn't know about expo-apple-targets. I think that answers both. By share sheet I meant external, so a safari -> share sheet -> v0.dev -> your custom share view external to the app. But I'm sure it's the same flow with expo-apple-targets.

kundi 10mo ago

I have tried the app but the experience is quite bad. The output broke half-way with a red message, the produced design was subpar

Insensitivity 10mo ago

I'm not sure if React Native is much different from React itself, but a few things that made me give a side eye, when looking at this write up: 1. The instant 5 levels of providers (and additional one later) seems excessive. 2. The usage of useAnimatedReaction which seems almost like a "useEffect" kind of hook, which was sprinkled in almost every code block. 3. The imperative size calculations, does React Native not support any responsive like constructs? I recall solving the same problem by separating "history" and "tail" and having a "grower" component, without having to use any JS (purely html & css), albeit it being web and not native. 4. Personally, when I see something like the scroll code, where you have to call scroll, wait a frame, call scroll again, set a timeout, scroll again- I would have raised my eyebrows about the architecture / code flow way before that. 5. the amount of "floating" hook calls like useKeyboardAwareMessageList() useScrollMessageListFromComposerSizeUpdates() useUpdateLastMessageIndex() that don't return anything, always makes me raise an eyebrow, usually in React Web codebases, where the users just spam useEffects and effect chains. Not sure if it's just my ignorance in React Native, but if I had seen the equivalent in a React Web app, I would've been baffled