a2ui-project / a2ui-project/a2ui
[Renderer] React Native Implementation
- Lingua principale
- TypeScript
- Stelle
- 16.4k
- Fork
- 1.3k
- Merge medio
- 2g 13h
- PR unite (30g)
- 134
Descrizione
## 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`)
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.