ComponentRenderer
Renders a validated LLM response as a native component. Pass a Message object and a callbacks object: the renderer handles component lookup, prop validation, and error boundaries automatically.
Usage
Tsx
1import { ComponentRenderer } from "wireai-rn";
2
3<FlatList
4 data={messages}
5 keyExtractor={(m) => m.id}
6 renderItem={({ item }) => (
7 <ComponentRenderer
8 message={item}
9 callbacks={createCallbacks(item.id)}
10 />
11 )}
12/>Props
| Prop | Type | Description |
|---|---|---|
message | Message | The message to render. If message.response is undefined or role is 'user', nothing is rendered. |
callbacks | CallbackOverrides | Callback object from useWireAIAction(). Merged into the component's props. |
style | ViewStyle | Optional style applied to the wrapper View. |
What it renders
renderLooks up the component in the registry by name, validates props against the Zod schema, merges callbacks, and renders the React Native component.
askRenders a text message bubble with message.response.message as content.
user messageReturns null: user messages are typically rendered by your own UI.
invalid/unknownRenders a FallbackMessage component with a friendly error message.
Error handling
Each rendered component is wrapped in ComponentErrorBoundary. If a component throws during rendering, the error boundary catches it and shows a FallbackMessage instead of crashing the app.
Render the user's message yourself
ComponentRenderer only renders assistant messages. For user messages, render them in your FlatList with your own bubble style: this gives you full control over the user turn UI.
Advanced: rendering without FlatList
Tsx
1// Render user and assistant messages differently
2{messages.map((msg) => {
3 if (msg.role === "user") {
4 return (
5 <View key={msg.id} style={{ alignSelf: "flex-end", maxWidth: "80%" }}>
6 <Text style={{ padding: 12, backgroundColor: "#7c3aed", color: "#fff", borderRadius: 12 }}>
7 {msg.content}
8 </Text>
9 </View>
10 );
11 }
12 return (
13 <ComponentRenderer
14 key={msg.id}
15 message={msg}
16 callbacks={createCallbacks(msg.id)}
17 />
18 );
19})}