Skip to content

feat(renderers): Add React Native renderer#430

Open
sivamrudram-eng wants to merge 4 commits intogoogle:mainfrom
sivamrudram-eng:feat/react-native-renderer
Open

feat(renderers): Add React Native renderer#430
sivamrudram-eng wants to merge 4 commits intogoogle:mainfrom
sivamrudram-eng:feat/react-native-renderer

Conversation

@sivamrudram-eng
Copy link

Summary

This PR adds the first React Native implementation of the A2UI renderer, enabling A2UI-compliant agents to generate native mobile UIs on iOS and Android.

Features

Core Components

  • A2UIRenderer - Main component for rendering A2UI specifications
  • useA2UIStream - Hook for real-time streaming from agent servers

MVP Components (8 of 16)

Component React Native Mapping Status
Text <Text>
Button <Pressable>
Image <Image>
Row <View flexDirection="row">
Column <View>
Card <View> with shadow
List <FlatList>
TextField <TextInput>

Infrastructure

  • JSONL stream parser for real-time updates
  • Message dispatcher for A2UI protocol messages
  • Surface registry and component buffer for state management
  • Data binding support with BoundValue resolution
  • Full TypeScript support

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

  • Add remaining components (Modal, Tabs, Slider, etc.)
  • Add comprehensive test suite
  • Publish to npm as @a2ui/react-native

Implements #428

Standalone Repository

This renderer is also available as a standalone package at:
https://github.com/sivamrudram-eng/a2ui-react-native

Add first React Native implementation of A2UI renderer with:

- Core A2UIRenderer component for rendering A2UI specs
- 8 MVP components: Text, Button, Image, Row, Column, Card, List, TextField
- JSONL stream parser for real-time updates
- Message dispatcher for A2UI protocol messages
- Surface registry and component buffer for state management
- Data binding support with BoundValue resolution
- useA2UIStream hook for streaming from agent servers
- Full TypeScript support

Implements google#428
@google-cla
Copy link

google-cla bot commented Jan 5, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@sivamrudram-eng
Copy link
Author

I have signed the CLA. Please re-check.

Added new components matching Angular renderer:
- Modal, Tabs, Checkbox, Slider, DateTimeInput
- MultipleChoice, Icon, Divider, Video, AudioPlayer

Added theming system with light/dark themes.
Added example apps demonstrating all components.
Updated README with full documentation.
- Add Jest configuration with ts-jest for TypeScript ESM support
- Add JSONL parser tests (basic parsing, chunked input, error handling)
- Add data model store tests (type guards, path operations, resolvers)
- Add message dispatcher tests (message routing, lifecycle hooks)
- Add component buffer tests (CRUD ops, tree traversal, search)
- Add surface registry tests (surface lifecycle, subscriptions)
- Update ESLint config to recognize Jest test environment
- 130 tests covering all core modules
@github-project-automation github-project-automation bot moved this to Todo in A2UI Jan 20, 2026
@jacobsimionato jacobsimionato added the triage backlog The backlog of issues and PRs which need to be triaged in bulk. label Jan 20, 2026
@zeroasterisk zeroasterisk added component: react renderer and removed triage backlog The backlog of issues and PRs which need to be triaged in bulk. labels Jan 28, 2026
@zeroasterisk
Copy link
Collaborator

Nice work @sivamrudram-eng

@ataibarkai is leading the effort for an A2UI react renderer.

Atai and CopilotKit team, can you please review this PR and see what you might want for the official implementation?

Regardless of the outcome (because I think Atai and team are kind of far into their work) we would welcome your future contributions and refinements to make the A2UI react renderer better. We also have a v0.9 spec ~done and there will be improvements to each of these renderers to support v0.9, possibly backwards compatibility, certainly better decoupling of transport and shared library functions... lots more stuff to do :)

@zeroasterisk
Copy link
Collaborator

Thanks for this substantial contribution @sivamrudram-eng — 21k lines with 44 files is serious work!

A few notes on where this fits:

  1. React Native vs React (web): These are separate efforts. @lukasmoschitz and CopilotKit are leading the React web renderer (Add React renderer #542), but React Native targets a different runtime (native iOS/Android vs browser DOM). There could be opportunities to share protocol/state management logic, but the component implementations are necessarily different.

  2. Repo restructuring: We're considering restructuring soon — renderers may move to their own repos within an org. This would give each renderer (Lit, Angular, React, React Native, Flutter) more autonomy and clearer ownership.

  3. v0.9 spec: We're close to landing v0.9, which includes better shared library separation and transport decoupling. Any renderer merged now will need updates for v0.9 compatibility.

⚠️ Ownership expectations

Owning a renderer is a significant ongoing commitment — keeping up with spec changes, handling issues, reviewing community PRs, etc. The core team's bandwidth is limited, and we likely won't be able to provide regular reviews or maintenance support for React Native.

Given that, it might be easier to start this as a standalone repo (your own or under an A2UI community org) rather than merging into the monorepo. That way you have full autonomy and aren't blocked waiting on us.

If you're interested in that path, we're happy to link to it from the official docs as a community renderer. Let us know what you think!

Appreciate you pushing the A2UI ecosystem forward! 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

3 participants