Skip to content

React Native support for react-lang Renderer needs native host wrappers #523

@vishxrad

Description

@vishxrad

Summary

The react-lang Renderer is difficult to use directly inside React Native and Expo because the default implementation assumes web host elements.

What happened

While migrating the React Native example to OpenUI Lang v0.5 and @openuidev/react-lang 0.2.5, Android Expo Go crashed with:

View config getter callback for component div must be a function received undefined

The crash came from Renderer using DOM host wrappers by default. React Native treats lowercase host names such as div as native component names, so the renderer cannot be dropped into a native app without a way to replace those wrappers with View.

A second integration issue showed up when linking the workspace package into Expo. Metro could resolve react-lang from the workspace, but react-lang could then resolve its own dev React instead of the app peer React. That produced invalid hook call errors until the Expo Metro config forced React imports back to the app copy.

Expected behavior

React Native hosts should be able to use the official react-lang Renderer without maintaining a separate renderer implementation.

Proposed fixes

  • Provide native safe host wrapper configuration on Renderer, for example containerComponent and contentComponent.
  • Provide a native compatible query loader path, or let hosts fully replace it.
  • Document Expo and pnpm workspace peer React resolution requirements.
  • Consider a react-native entrypoint that defaults wrappers to View instead of div.

Minimal usage goal

<Renderer
  response={openui}
  library={library}
  isStreaming={isStreaming}
  toolProvider={toolProvider}
  containerComponent={View}
  contentComponent={View}
/>

Impact

Without this, React Native examples either crash on native devices or need an example-local renderer, which makes actions, Query refresh, streaming behavior, and future react-lang runtime fixes easier to drift from the official renderer.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions