Support React createRoot

fixtures/app-export-default-react.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { webViewCreateRoot } from "react-native-react-bridge/lib/web";
+import Comp from "./Component";
+import "./example.css";
+
+const App = () => {
+ return <Comp />;
+};
+
+export default webViewCreateRoot(App);

src/plugin/babel.spec.ts

@@ -48,4 +48,11 @@ describe("isEntryFile", () => {
  const paths = isEntryFile(src, filename);
  expect(paths).toEqual(true);
  });
+
+ it("export default webViewRender(App) (react createRoot)", () => {
+ const filename = "app-export-default-react.jsx";
+ const src = readFixture(filename);
+ const paths = isEntryFile(src, filename);
+ expect(paths).toEqual(true);
+ });
 });

src/plugin/babel.ts

@@ -15,6 +15,15 @@ export const isEntryFile = (src: string, filename: string) => {
  name: "webViewRender",
  },
  },
+ }) ||
+ looksLike(path.node, {
+ declaration: {
+ type: "CallExpression",
+ callee: {
+ type: "Identifier",
+ name: "webViewCreateRoot",
+ },
+ },
  })
  ) {
  isEntry = true;

src/web/index.ts

@@ -1 +1 @@
-export { webViewRender, emit, useNativeMessage } from "./react";
+export * from "./react";

src/web/react.ts

@@ -5,6 +5,7 @@
  */
 import { ReactElement, useEffect } from "react";
 import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { emit, getWebViewRootElement, listenNativeMessage } from "./core";
 import type { Message } from "../types";
 
@@ -19,6 +20,14 @@ export const webViewRender = (root: ReactElement): string => {
  return ""; // dummy
 };
 
+/**
+ * {@link webViewRender} but initiated with React's createRoot
+ */
+export const webViewCreateRoot = (root: ReactElement): string => {
+ createRoot(getWebViewRootElement()).render(root);
+ return ""; // dummy
+};
+
 /**
  * A hook to subscribe messages from React Native.
  */