a2ui-project / a2ui-project/a2ui

[Renderer] React Native Implementation

Open
#428 3 comments 2 reactions 1 assignee Claimed by @ataibarkai View on GitHub
component: react renderer P2 type: feature/enhancement
Dominant language
TypeScript
Stars
16.4k
Forks
1.3k
Avg merge
2d 13h
Merged PRs (30d)
134

Description

## 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`)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.