Skip to content

feat(react-lang): support custom host wrappers for React Native#572

Open
greatjourney589 wants to merge 1 commit into
thesysdev:mainfrom
greatjourney589:feature/react-native-host-wrappers
Open

feat(react-lang): support custom host wrappers for React Native#572
greatjourney589 wants to merge 1 commit into
thesysdev:mainfrom
greatjourney589:feature/react-native-host-wrappers

Conversation

@greatjourney589
Copy link
Copy Markdown

@greatjourney589 greatjourney589 commented May 25, 2026

What

Closes #523
Add support for custom host wrappers in @openui/react-lang's Renderer so it can render on non-web hosts like React Native / Expo.

Today the Renderer hardcodes <div> for its outer and inner wrappers and always falls back to a DOM spinner. On React Native, lowercase host tags like "div" are not valid components and crash with "View config getter callback for component div ...". This change lets callers supply native host components (e.g. View from react-native) instead.

Changes

  • Add containerComponent and contentComponent props to RendererProps (default to "div"), so the outer/inner wrappers can be swapped for native hosts.
  • Apply the web-only CSS opacity fade transition only when the content wrapper is a web host (string tag); skip it for native components to avoid warnings/crashes.
  • Fall back to the default DOM spinner only on web hosts; on native, render nothing unless the caller passes their own queryLoader.
  • Add react-dom + @types/react-dom as devDependencies and a vitest.config.ts to support component tests.
  • Add Renderer tests covering default web div wrappers, custom native wrappers, transition omission on native, and null-response rendering.
  • Update packages/react-lang/README.md with React Native usage docs.

Test Plan

Describe how you validated this change.

  • Not applicable (explain why)
  • Verified locally — vitest run in packages/react-lang passes (4/4 tests), covering web defaults, native wrappers, web-only transition handling, and null responses.

Checklist

  • I linked a related issue, if applicable
  • I updated docs/README when needed
  • I considered backwards compatibility — new props are optional and default to "div", so existing web usage is unchanged.

@greatjourney589
Copy link
Copy Markdown
Author

Hi, @vishxrad
I am very interested in your repository.This is my first PR.
When you have a moment, could you please review this PR?

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant