a2ui-project / a2ui-project/a2ui

[Renderer] React Native Implementation

オープン
#428 コメント 3 件 リアクション 2 件 担当者 1 名 @ataibarkai が担当を希望しています GitHub で見る
component: react renderer P2 type: feature/enhancement
主要言語
TypeScript
スター
16.4k
フォーク
1.3k
平均マージ
2日 13時間
マージ済み PR(30日)
134

説明

## Summary

I'm building a React Native renderer for A2UI, following the [Renderer Implementation Guide](https://a2ui.org/guides/renderer-development/).

React Native support is listed on the roadmap but doesn't have an implementation yet. This renderer will enable A2UI-compliant agents to generate native mobile UIs on iOS and Android.

## Repository

https://github.com/sivamrudram-eng/a2ui-react-native

## Current Status (MVP)

### Implemented Features

- **JSONL Stream Parser** - Real-time parsing of A2UI streaming responses
- **Message Dispatcher** - Routes `beginRendering`, `surfaceUpdate`, `dataModelUpdate`, `deleteSurface` messages
- **Surface Registry** - Manages multiple rendering surfaces with component buffers
- **Data Binding** - Full `BoundValue` resolution (literal and path-based)
- **Main Renderer Component** - `A2UIRenderer` that renders the component tree

### MVP Components (8 of 16)

| Component | Status | React Native Mapping |
|-----------|--------|---------------------|
| Text | ✅ | `` |
| Button | ✅ | `` |
| Image | ✅ | `` |
| Row | ✅ | `` |
| Column | ✅ | `` |
| Card | ✅ | `` with shadow |
| List | ✅ | `` |
| TextField | ✅ | `` |

### Planned Components

- Modal, Tabs, Slider
- DateTimeInput, Checkbox, MultipleChoice
- Video, AudioPlayer, Icon, Divider

## Usage Example

```tsx
import { A2UIRenderer } from 'a2ui-react-native';

const App = () => {
const spec = {
surfaceId: 'main',
rootId: 'root',
components: [
{ id: 'root', type: 'Column', children: ['text1', 'btn1'] },
{ id: 'text1', type: 'Text', content: 'Hello A2UI!' },
{ id: 'btn1', type: 'Button', label: 'Click me', action: 'doSomething' },
],
};

return ;
};

Roadmap

- Complete MVP testing with example app
- Add remaining standard components
- Publish to npm
- Add streaming hook (useA2UIStream)
- Submit PR to add to official renderers list

Questions for Maintainers

1. Are there any specific requirements for official renderer inclusion?
2. Should I follow the same directory structure as the Lit/Angular renderers?
3. Any feedback on the implementation approach?

I'd welcome any feedback or guidance. Happy to collaborate with the team on this!

---

Would you like me to help you with anything else after posting the issue, such as:
1. Installing dependencies and testing the build
2. Creating an example Expo app
3. Adding the streaming hook (`useA2UIStream`)

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

The issue describes a substantial new renderer implementation. Start by reviewing the existing repository at https://github.com/sivamrudram-eng/a2ui-react-native to see the current MVP status and component mappings. Examine the Renderer Implementation Guide linked in the issue for architectural requirements. The work involves completing the remaining planned components, testing, and preparing for an official PR.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
nodejs, react-native, typescript
領域
frontend, mobile
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
静か
明瞭さ
明確に書かれている
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。