- Web中心の企業であるVercelは、Apple Design Award級のネイティブ体験を目標に複数の技術スタックとUIパターンを試した末、React Native + Expo の組み合わせで完成させた
- 中核は、メモのようにアイデアを書き留めるとバックグラウンドで作られていく AIチャットベースの制作体験で、メッセージアニメーション・スクロール・キーボード・Liquid Glassコンポーザーまで細かく設計し、iOSネイティブ級のチャットインタラクションを実装
- チャット実装では、LegendList、Reanimated、react-native-keyboard-controller を基盤にしたコンテキスト・フックの組み合わせ、
blankSize と contentInset の計算、composerの高さ連動などにより、動的な高さとキーボード変化を滑らかに処理
- コード構造はWebとネイティブ間で 型・ビジネスロジック・APIレイヤー を共有し、Zodベースの OpenAPIスキーマ → Hey API → Tanstack Query の流れで、v0 Webと v0 Platform API の顧客が同じエンドポイントを使えるよう設計した点が特徴
v0 iOSアプリの概要と目標
- Vercelは自社初のモバイルアプリ v0 for iOS をリリースするにあたり、Web中心の企業でありながら Apple Design Award を目指した 高品質なネイティブ体験 を作ることを目標に据えた
- iOSアプリのリリースまではWebに注力してきたため、完全なネイティブアプリ開発は新しい領域だった
- このため公開ベータ以前に、複数の異なる技術スタックとUIパターン を適用した数十種類のバージョンを試作した
- 参考としては、Apple Notes、iMessage のような iPhoneの文法をうまく使うアプリ に着想を得て、ホーム画面のほかのアプリの中で居場所を得られるレベルの完成度を求めた
- 特定のフレームワークに固定せず、複数のスタックを実際に実装・比較 したうえで結論を出したと説明している
- さまざまな実験の末、最終的に React Native + Expo を選択し、結果として ネイティブアプリのように感じる という開発者からのフィードバックが多く寄せられたことを受け、詳細な技術構成を公開した
v0チャット体験の方向性
- v0 iOSは、「コンピューターから離れているときに思いついた アイデアをすぐ実行可能なものにする ツール」を目指し、メモアプリの次世代 という位置づけを志向している
- Webと同じ モバイルIDE や全機能の移植よりも、移動中にAIで何かを作れるシンプルで楽しい体験 を優先した
- この体験の中心は チャットインターフェース であり、これに対して次のような要件を整理した
- 新しいメッセージは 滑らかなアニメーション で表示されること
- 新しいユーザーメッセージは 画面上端までスクロール されて見えること
- アシスタントメッセージはストリーミングされながら 段階的なフェードイン（ストリーミング + 遅延） で表示されること
- 入力欄（コンポーザー）は Liquid Glass スタイルで浮かび、スクロール可能なコンテンツの上に配置されること
- 既存のチャットを開く場合は 最後のメッセージまでスクロールされた状態 で始まること
- キーボード動作は 自然でネイティブに近く 感じられること
- テキスト入力は 画像・ファイルの貼り付け と パンジェスチャーによるフォーカス/ブラー をサポートすること
- Markdownレンダリング は高速で、動的コンポーネント もサポートすること
- モバイルにおけるAIチャットUIパターンは多い一方、AIコード生成向けモバイルパターン は存在しなかったため、新しいパターンを自ら設計 する必要があり、基準を満たすまでに相当な作業・テスト・調整を要した
コンポーザブルなチャット構造の設計
- チャット要件を満たすため、チャットコードは 機能ごとに組み合わせ可能（composable） な形で設計した
- そのため、チャット全体を包む 複数のContext Provider を作成し、その中にメッセージリストを置く構造を採用した
- チャット実装には次の オープンソースライブラリ を使用した
- LegendList: 高性能なリストレンダリング
- React Native Reanimated: アニメーションと共有値（shared value）
- react-native-keyboard-controller: キーボード状態の制御とイベント処理
- 各メッセージのレンダリングは
item.role に応じて user / assistant / optimistic-placeholder に分岐し、役割ごとに異なるコンポーネントを使う
メッセージアニメーションの実装
- 最初のユーザーメッセージは Reanimatedの共有値（shared value） を用いて滑らかにフェードインする
useFirstMessageAnimation フックがメッセージの高さ・画面の高さ・キーボードの高さを計算し、translateY と opacity を制御する
- 最初のアシスタントメッセージは、ユーザーメッセージのアニメーション完了後に 遅延フェードイン する
- 既存チャットでは
scrollToEnd() と contentInset調整 によって、新しいメッセージを画面上部に自然に配置する
スクロールとキーボード制御
- チャット体験の品質は キーボード動作の自然さ に大きく依存しており、React Nativeで ネイティブに近いキーボード感覚 を作る作業はかなり難しかった
- iOSバージョンごとの差異により キーボード動作の不安定さ が発生し、
react-native-keyboard-controller のメンテナーと協力して バグ修正と性能改善 を行った
useKeyboardAwareMessageList フックで、キーボードの開閉・ドラッグイベントを細かく制御した- 既存チャットを開く際の 自動スクロール位置調整 のため、
scrollToEnd を複数回呼び出して 動的な高さの問題を解決 した
Liquid Glass Floating Composerと入力欄の改善
- iMessageの Liquid Glass効果 を適用して 半透明のフローティング入力欄 を実装した
KeyboardStickyView と composerHeight の共有値でスクロールビューの contentInset をリアルタイムに調整する
- 入力欄の高さ変化時にも自動スクロールを維持するため、
useScrollWhenComposerSizeUpdates フックを使用した
- 標準の
TextInput におけるスクロールバウンスやインジケーター表示の問題を解決するため、RCTUITextViewへのネイティブパッチ を適用した
- スワイプジェスチャーでキーボードにフォーカスできるよう改善した
画像貼り付けとストリーミングコンテンツのフェードイン
- Expoモジュール を通じて
UIPasteboard イベントを検知し、テキスト・画像・ファイルの貼り付けをサポートした
- FadeInStaggeredIfStreaming コンポーネントを使って、AI応答テキストの単語単位フェードイン を実装した
- アニメーションプールの管理により、同時アニメーション数の制限と性能最適化 を行った
- すでに見たコンテンツは
DisableFadeProvider で再アニメーションを防いだ
Webとネイティブ間のコード共有とPlatform API
- Webとモバイル間で 型・ヘルパー関数を共有 し、UI・状態管理は分離した
- Zodベースの型安全APIフレームワーク を構築し、OpenAPI仕様を自動生成する
- モバイルアプリは Hey API + Tanstack Query でAPIを呼び出す
- この構成を基盤として v0 Platform API を公開し、同じエンドポイントを外部開発者にも提供した
スタイリングとネイティブコンポーネント
- react-native-unistyles でテーマを管理し、Contextアクセスなしで高速なスタイリングをサポートした
- Zeego を通じて、iOSネイティブの
UIMenu ベースのメニューを実装した
- iOS 26で発生した Alertの位置ずれ を修正し、React Nativeに パッチをアップストリームとして貢献 した
- モーダル（formSheet） 関連のドラッグ・ちらつき問題を修正し、Callstack・Meta・Expoと協力して React Native 0.82に反映 した
今後の計画とコミュニティ協業
- React Native + Expoの組み合わせ で最初のアプリを完成させた後、今後のプロジェクトでも同じスタックを維持する予定 で、現在のスタックに満足している
- Vercelは 野心的な製品を高い水準で実装 することに注力しており、
- Web・ネイティブ開発者が同じレベルの製品を作れるよう、社内で築いたノウハウをオープンソースとして公開 する計画だと明らかにした
- 特に AIチャットアプリ向けオープンソースライブラリ をベータテストするコミュニティを募集しており、React Nativeの改善にも引き続き貢献していく
まだコメントはありません。