[Renderer] React Native Implementation

[sivamrudram-eng]

Summary

I'm building a React Native renderer for A2UI, following the Renderer Implementation Guide.

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	✅	<Text>
Button	✅	<Pressable>
Image	✅	<Image>
Row	✅	<View flexDirection='row'>
Column	✅	<View>
Card	✅	<View> with shadow
List	✅	<FlatList>
TextField	✅	<TextInput>

Planned Components

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

Usage Example

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 <A2UIRenderer spec={spec} onAction={handleAction} />;
};

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