@ohos-ports/react-native-navigation 8.9.0-beta.4 → 8.9.0-beta.6

package/README.md

@@ -8,31 +8,18 @@ React Native Navigation — truly native navigation for iOS and Android, ported
 npm install @ohos-ports/react-native-navigation @ohos-ports/react-native react
 ```
 
-**Important**: You must also add the `react-native` npm alias in your `package.json` so that `import { ... } from 'react-native'` resolves to `@ohos-ports/react-native`:
-
-```json
-{
-  "dependencies": {
-    "@ohos-ports/react-native-navigation": "^8.9.0-beta.2",
-    "@ohos-ports/react-native": "^0.87.1-beta.1",
-    "react-native": "npm:@ohos-ports/react-native@^0.87.1-beta.1",
-    "react": "^19.2.3"
-  }
-}
-```
-
-This alias is required because `react-native-navigation` uses ESM `import { NativeModules, Platform, ... } from 'react-native'`, and the npm alias ensures Node.js resolves these imports to `@ohos-ports/react-native`.
+That's it. No npm alias, no postinstall, no extra configuration.
 
 ## Requirements
 
-- Node.js >= 22 (ESM/CJS interop required)
-- HarmonyOS with `@ohos-ports/react-native` runtime
+- Node.js >= 22
+- `@ohos-ports/react-native` runtime
 
-## Patches Applied
+## What was changed
 
-- **lodash ESM imports**: Added `.js` extensions to all `import ... from 'lodash/xxx'` statements (22 files) for Node.js ESM module resolution compatibility.
-- **Deprecations.js**: Changed `import { each } from 'lodash'` to `import each from 'lodash/each.js'` for CJS named export compatibility.
-- **Dependency replacement**: `react-native` → `@ohos-ports/react-native`, `remx` → `@ohos-ports/remx` in peerDependencies.
+- **ESM → CJS transpilation**: Source files converted from ESM (`import`/`export`) to CommonJS (`require`/`module.exports`) using esbuild, eliminating ESM/CJS interop issues.
+- **Dependency path replacement**: All `require('react-native')` → `require('@ohos-ports/react-native')`, `require('remx')` → `require('@ohos-ports/remx')`.
+- **lodash ESM fix**: Added `.js` extensions to lodash deep imports (done before transpilation).
 
 ## License
 

package/lib/cjs/Mock/Application.js

@@ -0,0 +1,67 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Application_exports = {};
+__export(Application_exports, {
+  Application: () => Application
+});
+module.exports = __toCommonJS(Application_exports);
+var React = __toESM(require("react"), 1);
+var import_react_native = require("@ohos-ports/react-native");
+var import_connect = require("./connect.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+const Application = (0, import_connect.connect)(class extends React.Component {
+  constructor(props) {
+    super(props);
+    props.entryPoint();
+  }
+  render() {
+    const {
+      LayoutComponent
+    } = require("./Components/LayoutComponent");
+    const {
+      LayoutStore
+    } = require("./Stores/LayoutStore");
+    const {
+      Modals
+    } = require("./Components/Modals");
+    const {
+      Overlays
+    } = require("./Components/Overlays");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, {
+      testID: "Application",
+      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LayoutComponent, {
+        layoutNode: LayoutStore.getLayout()
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modals, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Overlays, {})]
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Application
+});

package/lib/cjs/Mock/ComponentProps.js

@@ -0,0 +1,16 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ComponentProps_exports = {};
+module.exports = __toCommonJS(ComponentProps_exports);

package/lib/cjs/Mock/Components/BottomTabs.js

@@ -0,0 +1,50 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var BottomTabs_exports = {};
+__export(BottomTabs_exports, {
+  BottomTabs: () => BottomTabs
+});
+module.exports = __toCommonJS(BottomTabs_exports);
+var import_react = __toESM(require("react"), 1);
+var import_LayoutComponent = require("./LayoutComponent.js");
+var import_connect = require("../connect.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+const BottomTabs = (0, import_connect.connect)(class extends import_react.Component {
+  render() {
+    return this.props.layoutNode.children.map((child) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LayoutComponent.LayoutComponent, {
+        layoutNode: child
+      }, child.nodeId);
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BottomTabs
+});

package/lib/cjs/Mock/Components/ComponentScreen.js

@@ -0,0 +1,135 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ComponentScreen_exports = {};
+__export(ComponentScreen_exports, {
+  ComponentScreen: () => ComponentScreen
+});
+module.exports = __toCommonJS(ComponentScreen_exports);
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("@ohos-ports/react-native");
+var import_react_native_navigation = require("react-native-navigation");
+var import_constants = require("../constants.js");
+var import_LayoutStore = require("../Stores/LayoutStore.js");
+var import_connect = require("../connect.js");
+var import_TopBar = require("./TopBar.js");
+var import_EventsStore = require("../Stores/EventsStore.js");
+var import_lodash = __toESM(require("lodash"), 1);
+var import_layoutActions = require("../actions/layoutActions.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+function isURISource(src) {
+  return !!src && typeof src === "object" && "uri" in src;
+}
+const ComponentScreen = (0, import_connect.connect)(class extends import_react.Component {
+  constructor(props) {
+    super(props);
+  }
+  componentDidMount() {
+    this.props.layoutNode.componentDidMount();
+  }
+  isVisible() {
+    const isVisible = import_LayoutStore.LayoutStore.isVisibleLayout(this.props.layoutNode);
+    return isVisible;
+  }
+  renderTabBar() {
+    const bottomTabs = this.props.layoutNode.getBottomTabs();
+    if (!bottomTabs) return null;
+    const bottomTabsOptions = bottomTabs.resolveOptions().bottomTabs;
+    if (bottomTabsOptions?.visible === false) return null;
+    const buttons = bottomTabs.children.map((child, i) => {
+      const bottomTabOptions = child.resolveOptions().bottomTab;
+      const icon = bottomTabs.selectedIndex === i ? bottomTabOptions?.selectedIcon : bottomTabOptions?.icon;
+      const iconURI = isURISource(icon) ? icon.uri : void 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.TouchableOpacity, {
+          style: {
+            padding: 10
+          },
+          testID: bottomTabOptions?.testID,
+          onPress: () => {
+            import_EventsStore.events.invokeBottomTabPressed({
+              tabIndex: i
+            });
+            if (import_lodash.default.defaultTo(bottomTabOptions?.selectTabOnPress, true)) (0, import_layoutActions.switchTabByIndex)(this.props.layoutNode.getBottomTabs(), i);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, {
+            style: {
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, {
+              children: bottomTabOptions?.badge
+            }), iconURI && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Image, {
+              style: {
+                width: 18,
+                height: 18,
+                marginBottom: 5
+              },
+              source: {
+                uri: iconURI
+              }
+            }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, {
+              style: {
+                fontSize: 12
+              },
+              children: bottomTabOptions?.text || ""
+            })]
+          })
+        })
+      }, `tab-${i}`);
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {
+      testID: bottomTabsOptions?.testID,
+      style: {
+        flexDirection: "row",
+        justifyContent: "center",
+        width: "100%",
+        backgroundColor: "#F0F2F5"
+      },
+      children: buttons
+    });
+  }
+  render() {
+    const Component2 = import_react_native_navigation.Navigation.mock.store.getWrappedComponent(this.props.layoutNode.data.name);
+    if (!Component2) throw new Error(`${this.props.layoutNode.data.name} has not been registered.`);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, {
+      testID: this.isVisible() ? import_constants.VISIBLE_SCREEN_TEST_ID : void 0,
+      children: [this.props.layoutNode.getStack() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TopBar.TopBar, {
+        layoutNode: this.props.layoutNode,
+        topBarOptions: this.props.layoutNode.resolveOptions().topBar,
+        backButtonOptions: this.props.layoutNode.resolveOptions().topBar?.backButton
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component2, {
+        componentId: this.props.layoutNode.nodeId
+      }), this.renderTabBar()]
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ComponentScreen
+});

package/lib/cjs/Mock/Components/LayoutComponent.js

@@ -0,0 +1,85 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LayoutComponent_exports = {};
+__export(LayoutComponent_exports, {
+  LayoutComponent: () => LayoutComponent
+});
+module.exports = __toCommonJS(LayoutComponent_exports);
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("@ohos-ports/react-native");
+var import_BottomTabs = require("./BottomTabs.js");
+var import_ComponentScreen = require("./ComponentScreen.js");
+var import_Stack = require("./Stack.js");
+var import_SideMenu = require("./SideMenu.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+const LayoutComponent = class extends import_react.Component {
+  render() {
+    switch (this.props.layoutNode.type) {
+      case "BottomTabs":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BottomTabs.BottomTabs, {
+          layoutNode: this.props.layoutNode
+        });
+      case "Stack":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Stack.Stack, {
+          layoutNode: this.props.layoutNode
+        });
+      case "Component":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentScreen.ComponentScreen, {
+          layoutNode: this.props.layoutNode
+        });
+      case "SideMenuRoot":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SideMenu.SideMenuRoot, {
+          layoutNode: this.props.layoutNode
+        });
+      case "SideMenuLeft":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SideMenu.SideMenuLeft, {
+          layoutNode: this.props.layoutNode
+        });
+      case "SideMenuCenter":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SideMenu.SideMenuCenter, {
+          layoutNode: this.props.layoutNode
+        });
+      case "SideMenuRight":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SideMenu.SideMenuRight, {
+          layoutNode: this.props.layoutNode
+        });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {});
+  }
+  componentDidCatch(error, errorInfo) {
+    const err = new Error(`Error while trying to render layout ${this.props.layoutNode.nodeId} of type ${this.props.layoutNode.type}: ${error}
+${errorInfo?.componentStack}`);
+    err.cause = error;
+    throw err;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LayoutComponent
+});

package/lib/cjs/Mock/Components/Modals.js

@@ -0,0 +1,56 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Modals_exports = {};
+__export(Modals_exports, {
+  Modals: () => Modals
+});
+module.exports = __toCommonJS(Modals_exports);
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("@ohos-ports/react-native");
+var import_LayoutComponent = require("./LayoutComponent.js");
+var import_LayoutStore = require("../Stores/LayoutStore.js");
+var import_connect = require("../connect.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+const Modals = (0, import_connect.connect)(class extends import_react.Component {
+  render() {
+    const children = import_LayoutStore.LayoutStore.getModals();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {
+      testID: "MODALS",
+      children: children.map((child) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LayoutComponent.LayoutComponent, {
+          layoutNode: child
+        }, child.nodeId);
+      })
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modals
+});

package/lib/cjs/Mock/Components/NavigationButton.js

@@ -0,0 +1,104 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NavigationButton_exports = {};
+__export(NavigationButton_exports, {
+  NavigationButton: () => NavigationButton
+});
+module.exports = __toCommonJS(NavigationButton_exports);
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("@ohos-ports/react-native");
+var import_react_native_navigation = require("react-native-navigation");
+var import_EventsStore = require("../Stores/EventsStore.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+const NavigationButton = class extends import_react.Component {
+  ref = void 0;
+  render() {
+    const {
+      button,
+      componentId
+    } = this.props;
+    if (button.component) return this.renderButtonComponent();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Button, {
+      testID: button.testID,
+      title: button.text || "",
+      disabled: button.enabled === false,
+      onPress: () => button.enabled !== false && import_EventsStore.events.invokeNavigationButtonPressed({
+        buttonId: button.id,
+        componentId
+      })
+    }, button.id);
+  }
+  renderButtonComponent() {
+    const {
+      button,
+      componentId
+    } = this.props;
+    const buttonComponentId = button.component.componentId;
+    const ComponentClass = import_react_native_navigation.Navigation.mock.store.getComponentClassForName(button.component.name);
+    if (!ComponentClass) {
+      throw new Error(`Cannot find registered component for: ${button.component?.name}`);
+    }
+    const ButtonComponent = ComponentClass();
+    const props = import_react_native_navigation.Navigation.mock.store.getPropsForId(buttonComponentId);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.TouchableOpacity, {
+      onPress: () => {
+        if (this.ref) {
+          this.invokeOnClick(
+            // @ts-ignore
+            (this.ref._reactInternalFiber || this.ref._reactInternals).return.stateNode
+          );
+        }
+        import_EventsStore.events.invokeNavigationButtonPressed({
+          buttonId: button.id,
+          componentId
+        });
+      },
+      testID: button.testID,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonComponent, {
+        ...props,
+        componentId: buttonComponentId,
+        ref: (ref) => this.ref = ref
+      }, buttonComponentId)
+    });
+  }
+  invokeOnClick(stateNode) {
+    if (stateNode.children) {
+      stateNode.children.forEach((instance) => {
+        if (instance.internalInstanceHandle && instance.internalInstanceHandle.stateNode.props.onClick) {
+          instance.internalInstanceHandle.stateNode.props.onClick();
+        }
+        this.invokeOnClick(instance);
+      });
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavigationButton
+});

package/lib/cjs/Mock/Components/Overlays.js

@@ -0,0 +1,57 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Overlays_exports = {};
+__export(Overlays_exports, {
+  Overlays: () => Overlays
+});
+module.exports = __toCommonJS(Overlays_exports);
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("@ohos-ports/react-native");
+var import_constants = require("../constants.js");
+var import_LayoutComponent = require("./LayoutComponent.js");
+var import_LayoutStore = require("../Stores/LayoutStore.js");
+var import_connect = require("../connect.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+const Overlays = (0, import_connect.connect)(class extends import_react.Component {
+  render() {
+    const children = import_LayoutStore.LayoutStore.getOverlays();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {
+      testID: import_constants.VISIBLE_OVERLAY_TEST_ID,
+      children: children.map((child) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LayoutComponent.LayoutComponent, {
+          layoutNode: child
+        }, child.nodeId);
+      })
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Overlays
+});