@reactvision/react-viro 2.42.0 → 2.43.1

package/fabric-interop/dist/index.js

@@ -0,0 +1,118 @@
+"use strict";
+/**
+ * Viro Fabric Interop Layer
+ *
+ * This module provides compatibility between React Native's New Architecture (Fabric)
+ * and the existing Viro implementation without requiring codegen.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateNodeId = exports.ViroARTrackingTargets = exports.ViroMaterials = exports.ViroAnimations = exports.ViroARObjectMarker = exports.ViroARImageMarker = exports.ViroARPlaneSelector = exports.ViroARPlane = exports.ViroARCamera = exports.Viro3DSceneNavigator = exports.ViroARSceneNavigator = exports.ViroVRSceneNavigator = exports.ViroSceneNavigator = exports.ViroMaterialVideo = exports.ViroAnimatedComponent = exports.ViroParticleEmitter = exports.ViroSpinner = exports.ViroController = exports.ViroButton = exports.ViroSpatialSound = exports.ViroSoundField = exports.ViroSound = exports.ViroOrbitCamera = exports.ViroCamera = exports.ViroLightingEnvironment = exports.ViroOmniLight = exports.ViroSpotLight = exports.ViroDirectionalLight = exports.ViroAmbientLight = exports.ViroPortalScene = exports.ViroPortal = exports.ViroSkyBox = exports.Viro360Video = exports.Viro360Image = exports.ViroAnimatedImage = exports.ViroVideo = exports.ViroImage = exports.ViroText = exports.ViroSurface = exports.ViroPolyline = exports.ViroPolygon = exports.ViroQuad = exports.ViroGeometry = exports.Viro3DObject = exports.ViroSphere = exports.ViroBox = exports.ViroFlexView = exports.ViroARScene = exports.ViroScene = exports.ViroNode = void 0;
+exports.ViroEventsManager = exports.updateMaterial = exports.executeAnimation = exports.updateNativeMaterial = exports.executeNativeAnimation = exports.isViroJSIAvailable = exports.setARImageTargets = exports.setARPlaneDetection = exports.createAnimation = exports.createMaterial = exports.removeChild = exports.addChild = exports.deleteNode = exports.updateNode = exports.createNode = exports.performMemoryCleanup = exports.getMemoryStats = exports.getSceneState = exports.destroyScene = exports.deactivateScene = exports.activateScene = exports.createScene = exports.initializeViro = exports.unregisterEventListener = exports.registerEventListener = exports.handleViroEvent = exports.generateCallbackId = void 0;
+__exportStar(require("./ViroFabricContainer"), exports);
+// Export components explicitly to ensure they're found by validation
+var components_1 = require("./components");
+Object.defineProperty(exports, "ViroNode", { enumerable: true, get: function () { return components_1.ViroNode; } });
+Object.defineProperty(exports, "ViroScene", { enumerable: true, get: function () { return components_1.ViroScene; } });
+Object.defineProperty(exports, "ViroARScene", { enumerable: true, get: function () { return components_1.ViroARScene; } });
+Object.defineProperty(exports, "ViroFlexView", { enumerable: true, get: function () { return components_1.ViroFlexView; } });
+Object.defineProperty(exports, "ViroBox", { enumerable: true, get: function () { return components_1.ViroBox; } });
+Object.defineProperty(exports, "ViroSphere", { enumerable: true, get: function () { return components_1.ViroSphere; } });
+Object.defineProperty(exports, "Viro3DObject", { enumerable: true, get: function () { return components_1.Viro3DObject; } });
+Object.defineProperty(exports, "ViroGeometry", { enumerable: true, get: function () { return components_1.ViroGeometry; } });
+Object.defineProperty(exports, "ViroQuad", { enumerable: true, get: function () { return components_1.ViroQuad; } });
+Object.defineProperty(exports, "ViroPolygon", { enumerable: true, get: function () { return components_1.ViroPolygon; } });
+Object.defineProperty(exports, "ViroPolyline", { enumerable: true, get: function () { return components_1.ViroPolyline; } });
+Object.defineProperty(exports, "ViroSurface", { enumerable: true, get: function () { return components_1.ViroSurface; } });
+Object.defineProperty(exports, "ViroText", { enumerable: true, get: function () { return components_1.ViroText; } });
+Object.defineProperty(exports, "ViroImage", { enumerable: true, get: function () { return components_1.ViroImage; } });
+Object.defineProperty(exports, "ViroVideo", { enumerable: true, get: function () { return components_1.ViroVideo; } });
+Object.defineProperty(exports, "ViroAnimatedImage", { enumerable: true, get: function () { return components_1.ViroAnimatedImage; } });
+Object.defineProperty(exports, "Viro360Image", { enumerable: true, get: function () { return components_1.Viro360Image; } });
+Object.defineProperty(exports, "Viro360Video", { enumerable: true, get: function () { return components_1.Viro360Video; } });
+Object.defineProperty(exports, "ViroSkyBox", { enumerable: true, get: function () { return components_1.ViroSkyBox; } });
+Object.defineProperty(exports, "ViroPortal", { enumerable: true, get: function () { return components_1.ViroPortal; } });
+Object.defineProperty(exports, "ViroPortalScene", { enumerable: true, get: function () { return components_1.ViroPortalScene; } });
+Object.defineProperty(exports, "ViroAmbientLight", { enumerable: true, get: function () { return components_1.ViroAmbientLight; } });
+Object.defineProperty(exports, "ViroDirectionalLight", { enumerable: true, get: function () { return components_1.ViroDirectionalLight; } });
+Object.defineProperty(exports, "ViroSpotLight", { enumerable: true, get: function () { return components_1.ViroSpotLight; } });
+Object.defineProperty(exports, "ViroOmniLight", { enumerable: true, get: function () { return components_1.ViroOmniLight; } });
+Object.defineProperty(exports, "ViroLightingEnvironment", { enumerable: true, get: function () { return components_1.ViroLightingEnvironment; } });
+Object.defineProperty(exports, "ViroCamera", { enumerable: true, get: function () { return components_1.ViroCamera; } });
+Object.defineProperty(exports, "ViroOrbitCamera", { enumerable: true, get: function () { return components_1.ViroOrbitCamera; } });
+Object.defineProperty(exports, "ViroSound", { enumerable: true, get: function () { return components_1.ViroSound; } });
+Object.defineProperty(exports, "ViroSoundField", { enumerable: true, get: function () { return components_1.ViroSoundField; } });
+Object.defineProperty(exports, "ViroSpatialSound", { enumerable: true, get: function () { return components_1.ViroSpatialSound; } });
+Object.defineProperty(exports, "ViroButton", { enumerable: true, get: function () { return components_1.ViroButton; } });
+Object.defineProperty(exports, "ViroController", { enumerable: true, get: function () { return components_1.ViroController; } });
+Object.defineProperty(exports, "ViroSpinner", { enumerable: true, get: function () { return components_1.ViroSpinner; } });
+Object.defineProperty(exports, "ViroParticleEmitter", { enumerable: true, get: function () { return components_1.ViroParticleEmitter; } });
+Object.defineProperty(exports, "ViroAnimatedComponent", { enumerable: true, get: function () { return components_1.ViroAnimatedComponent; } });
+Object.defineProperty(exports, "ViroMaterialVideo", { enumerable: true, get: function () { return components_1.ViroMaterialVideo; } });
+Object.defineProperty(exports, "ViroSceneNavigator", { enumerable: true, get: function () { return components_1.ViroSceneNavigator; } });
+Object.defineProperty(exports, "ViroVRSceneNavigator", { enumerable: true, get: function () { return components_1.ViroVRSceneNavigator; } });
+Object.defineProperty(exports, "ViroARSceneNavigator", { enumerable: true, get: function () { return components_1.ViroARSceneNavigator; } });
+Object.defineProperty(exports, "Viro3DSceneNavigator", { enumerable: true, get: function () { return components_1.Viro3DSceneNavigator; } });
+Object.defineProperty(exports, "ViroARCamera", { enumerable: true, get: function () { return components_1.ViroARCamera; } });
+Object.defineProperty(exports, "ViroARPlane", { enumerable: true, get: function () { return components_1.ViroARPlane; } });
+Object.defineProperty(exports, "ViroARPlaneSelector", { enumerable: true, get: function () { return components_1.ViroARPlaneSelector; } });
+Object.defineProperty(exports, "ViroARImageMarker", { enumerable: true, get: function () { return components_1.ViroARImageMarker; } });
+Object.defineProperty(exports, "ViroARObjectMarker", { enumerable: true, get: function () { return components_1.ViroARObjectMarker; } });
+Object.defineProperty(exports, "ViroAnimations", { enumerable: true, get: function () { return components_1.ViroAnimations; } });
+Object.defineProperty(exports, "ViroMaterials", { enumerable: true, get: function () { return components_1.ViroMaterials; } });
+Object.defineProperty(exports, "ViroARTrackingTargets", { enumerable: true, get: function () { return components_1.ViroARTrackingTargets; } });
+// Export utilities
+__exportStar(require("./components/ViroUtils"), exports);
+// Export specific functions from NativeViro to avoid conflicts
+var NativeViro_1 = require("./NativeViro");
+Object.defineProperty(exports, "generateNodeId", { enumerable: true, get: function () { return NativeViro_1.generateNodeId; } });
+Object.defineProperty(exports, "generateCallbackId", { enumerable: true, get: function () { return NativeViro_1.generateCallbackId; } });
+Object.defineProperty(exports, "handleViroEvent", { enumerable: true, get: function () { return NativeViro_1.handleViroEvent; } });
+Object.defineProperty(exports, "registerEventListener", { enumerable: true, get: function () { return NativeViro_1.registerEventListener; } });
+Object.defineProperty(exports, "unregisterEventListener", { enumerable: true, get: function () { return NativeViro_1.unregisterEventListener; } });
+Object.defineProperty(exports, "initializeViro", { enumerable: true, get: function () { return NativeViro_1.initializeViro; } });
+Object.defineProperty(exports, "createScene", { enumerable: true, get: function () { return NativeViro_1.createScene; } });
+Object.defineProperty(exports, "activateScene", { enumerable: true, get: function () { return NativeViro_1.activateScene; } });
+Object.defineProperty(exports, "deactivateScene", { enumerable: true, get: function () { return NativeViro_1.deactivateScene; } });
+Object.defineProperty(exports, "destroyScene", { enumerable: true, get: function () { return NativeViro_1.destroyScene; } });
+Object.defineProperty(exports, "getSceneState", { enumerable: true, get: function () { return NativeViro_1.getSceneState; } });
+Object.defineProperty(exports, "getMemoryStats", { enumerable: true, get: function () { return NativeViro_1.getMemoryStats; } });
+Object.defineProperty(exports, "performMemoryCleanup", { enumerable: true, get: function () { return NativeViro_1.performMemoryCleanup; } });
+Object.defineProperty(exports, "createNode", { enumerable: true, get: function () { return NativeViro_1.createNode; } });
+Object.defineProperty(exports, "updateNode", { enumerable: true, get: function () { return NativeViro_1.updateNode; } });
+Object.defineProperty(exports, "deleteNode", { enumerable: true, get: function () { return NativeViro_1.deleteNode; } });
+Object.defineProperty(exports, "addChild", { enumerable: true, get: function () { return NativeViro_1.addChild; } });
+Object.defineProperty(exports, "removeChild", { enumerable: true, get: function () { return NativeViro_1.removeChild; } });
+Object.defineProperty(exports, "createMaterial", { enumerable: true, get: function () { return NativeViro_1.createMaterial; } });
+Object.defineProperty(exports, "createAnimation", { enumerable: true, get: function () { return NativeViro_1.createAnimation; } });
+Object.defineProperty(exports, "setARPlaneDetection", { enumerable: true, get: function () { return NativeViro_1.setARPlaneDetection; } });
+Object.defineProperty(exports, "setARImageTargets", { enumerable: true, get: function () { return NativeViro_1.setARImageTargets; } });
+Object.defineProperty(exports, "isViroJSIAvailable", { enumerable: true, get: function () { return NativeViro_1.isViroJSIAvailable; } });
+// Re-export executeAnimation and updateMaterial with different names to avoid conflicts
+var NativeViro_2 = require("./NativeViro");
+Object.defineProperty(exports, "executeNativeAnimation", { enumerable: true, get: function () { return NativeViro_2.executeAnimation; } });
+Object.defineProperty(exports, "updateNativeMaterial", { enumerable: true, get: function () { return NativeViro_2.updateMaterial; } });
+// Also export the original names for backward compatibility
+var NativeViro_3 = require("./NativeViro");
+Object.defineProperty(exports, "executeAnimation", { enumerable: true, get: function () { return NativeViro_3.executeAnimation; } });
+Object.defineProperty(exports, "updateMaterial", { enumerable: true, get: function () { return NativeViro_3.updateMaterial; } });
+// Export event management utilities
+var ViroEventsManager_1 = require("./ViroEventsManager");
+Object.defineProperty(exports, "ViroEventsManager", { enumerable: true, get: function () { return __importDefault(ViroEventsManager_1).default; } });
+//# sourceMappingURL=index.js.map

package/fabric-interop/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;;;;;;;;;;;;;;;;;;;AAEH,wDAAsC;AAEtC,qEAAqE;AACrE,2CAkDsB;AAjDpB,sGAAA,QAAQ,OAAA;AACR,uGAAA,SAAS,OAAA;AACT,yGAAA,WAAW,OAAA;AACX,0GAAA,YAAY,OAAA;AACZ,qGAAA,OAAO,OAAA;AACP,wGAAA,UAAU,OAAA;AACV,0GAAA,YAAY,OAAA;AACZ,0GAAA,YAAY,OAAA;AACZ,sGAAA,QAAQ,OAAA;AACR,yGAAA,WAAW,OAAA;AACX,0GAAA,YAAY,OAAA;AACZ,yGAAA,WAAW,OAAA;AACX,sGAAA,QAAQ,OAAA;AACR,uGAAA,SAAS,OAAA;AACT,uGAAA,SAAS,OAAA;AACT,+GAAA,iBAAiB,OAAA;AACjB,0GAAA,YAAY,OAAA;AACZ,0GAAA,YAAY,OAAA;AACZ,wGAAA,UAAU,OAAA;AACV,wGAAA,UAAU,OAAA;AACV,6GAAA,eAAe,OAAA;AACf,8GAAA,gBAAgB,OAAA;AAChB,kHAAA,oBAAoB,OAAA;AACpB,2GAAA,aAAa,OAAA;AACb,2GAAA,aAAa,OAAA;AACb,qHAAA,uBAAuB,OAAA;AACvB,wGAAA,UAAU,OAAA;AACV,6GAAA,eAAe,OAAA;AACf,uGAAA,SAAS,OAAA;AACT,4GAAA,cAAc,OAAA;AACd,8GAAA,gBAAgB,OAAA;AAChB,wGAAA,UAAU,OAAA;AACV,4GAAA,cAAc,OAAA;AACd,yGAAA,WAAW,OAAA;AACX,iHAAA,mBAAmB,OAAA;AACnB,mHAAA,qBAAqB,OAAA;AACrB,+GAAA,iBAAiB,OAAA;AACjB,gHAAA,kBAAkB,OAAA;AAClB,kHAAA,oBAAoB,OAAA;AACpB,kHAAA,oBAAoB,OAAA;AACpB,kHAAA,oBAAoB,OAAA;AACpB,0GAAA,YAAY,OAAA;AACZ,yGAAA,WAAW,OAAA;AACX,iHAAA,mBAAmB,OAAA;AACnB,+GAAA,iBAAiB,OAAA;AACjB,gHAAA,kBAAkB,OAAA;AAClB,4GAAA,cAAc,OAAA;AACd,2GAAA,aAAa,OAAA;AACb,mHAAA,qBAAqB,OAAA;AAGvB,mBAAmB;AACnB,yDAAuC;AAEvC,+DAA+D;AAC/D,2CA2BsB;AA1BpB,4GAAA,cAAc,OAAA;AACd,gHAAA,kBAAkB,OAAA;AAClB,6GAAA,eAAe,OAAA;AACf,mHAAA,qBAAqB,OAAA;AACrB,qHAAA,uBAAuB,OAAA;AACvB,4GAAA,cAAc,OAAA;AACd,yGAAA,WAAW,OAAA;AACX,2GAAA,aAAa,OAAA;AACb,6GAAA,eAAe,OAAA;AACf,0GAAA,YAAY,OAAA;AACZ,2GAAA,aAAa,OAAA;AACb,4GAAA,cAAc,OAAA;AACd,kHAAA,oBAAoB,OAAA;AACpB,wGAAA,UAAU,OAAA;AACV,wGAAA,UAAU,OAAA;AACV,wGAAA,UAAU,OAAA;AACV,sGAAA,QAAQ,OAAA;AACR,yGAAA,WAAW,OAAA;AACX,4GAAA,cAAc,OAAA;AACd,6GAAA,eAAe,OAAA;AACf,iHAAA,mBAAmB,OAAA;AACnB,+GAAA,iBAAiB,OAAA;AACjB,gHAAA,kBAAkB,OAAA;AAMpB,wFAAwF;AACxF,2CAGsB;AAFpB,oHAAA,gBAAgB,OAA0B;AAC1C,kHAAA,cAAc,OAAwB;AAGxC,4DAA4D;AAC5D,2CAAgE;AAAvD,8GAAA,gBAAgB,OAAA;AAAE,4GAAA,cAAc,OAAA;AAEzC,oCAAoC;AACpC,yDAAmE;AAA1D,uIAAA,OAAO,OAAqB"}

package/fabric-interop/dist/specs/ViroEventsTurboModule.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ViroEventsTurboModule.ts
+ * TurboModule specification for Viro event emission
+ *
+ * This module provides proper event emission for JSI callbacks
+ * in React Native's New Architecture (Fabric + TurboModules)
+ */
+import type { TurboModule } from "react-native";
+export interface Spec extends TurboModule {
+    addListener(eventName: string): void;
+    removeListeners(count: number): void;
+    emitJSICallback(callbackId: string, eventData: Object): void;
+    emitNodeEvent(nodeId: string, eventName: string, eventData: Object): void;
+    emitSceneEvent(sceneId: string, eventName: string, eventData: Object): void;
+    isEventSystemReady(): boolean;
+    getActiveListenerCount(): number;
+}
+declare const _default: Spec;
+export default _default;
+//# sourceMappingURL=ViroEventsTurboModule.d.ts.map

package/fabric-interop/dist/specs/ViroEventsTurboModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViroEventsTurboModule.d.ts","sourceRoot":"","sources":["../../specs/ViroEventsTurboModule.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,MAAM,WAAW,IAAK,SAAQ,WAAW;IAEvC,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrC,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7D,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1E,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAG5E,kBAAkB,IAAI,OAAO,CAAC;IAC9B,sBAAsB,IAAI,MAAM,CAAC;CAClC;;AAED,wBAAoE"}

package/fabric-interop/dist/specs/ViroEventsTurboModule.js

@@ -0,0 +1,12 @@
+"use strict";
+/**
+ * ViroEventsTurboModule.ts
+ * TurboModule specification for Viro event emission
+ *
+ * This module provides proper event emission for JSI callbacks
+ * in React Native's New Architecture (Fabric + TurboModules)
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+exports.default = react_native_1.TurboModuleRegistry.getEnforcing("ViroEvents");
+//# sourceMappingURL=ViroEventsTurboModule.js.map

package/fabric-interop/dist/specs/ViroEventsTurboModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViroEventsTurboModule.js","sourceRoot":"","sources":["../../specs/ViroEventsTurboModule.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAGH,+CAAmD;AAiBnD,kBAAe,kCAAmB,CAAC,YAAY,CAAO,YAAY,CAAC,CAAC"}

package/fabric-interop/examples/BasicSceneExample.tsx

@@ -0,0 +1,287 @@
+/**
+ * BasicSceneExample
+ *
+ * A simple example demonstrating the new fabric-interop system with:
+ * - Scene management and lifecycle
+ * - Property system with individual setters
+ * - Event system with JSI + fallback
+ * - Memory management integration
+ */
+
+import React, { useState, useEffect } from "react";
+import { View, Text, Button, StyleSheet, Alert } from "react-native";
+import {
+  ViroFabricContainer,
+  ViroScene,
+  ViroBox,
+  createMaterial,
+  createAnimation,
+  executeAnimation,
+  getMemoryStats,
+  performMemoryCleanup,
+} from "../index";
+
+export const BasicSceneExample: React.FC = () => {
+  const [sceneActive, setSceneActive] = useState(false);
+  const [memoryStats, setMemoryStats] = useState<Record<string, any> | null>(
+    null
+  );
+
+  // Initialize materials and animations when component mounts
+  useEffect(() => {
+    // Create a red material for the box
+    createMaterial("redMaterial", {
+      diffuseColor: "#FF0000",
+      shininess: 2.0,
+      lightingModel: "Lambert",
+    });
+
+    // Create a blue material for the box
+    createMaterial("blueMaterial", {
+      diffuseColor: "#0000FF",
+      shininess: 2.0,
+      lightingModel: "Lambert",
+    });
+
+    // Create a rotation animation
+    createAnimation("spinAnimation", {
+      properties: {
+        rotateY: "+=360",
+      },
+      duration: 2000,
+      easing: "Linear",
+    });
+
+    // Create a scale animation
+    createAnimation("pulseAnimation", {
+      properties: {
+        scaleX: 1.5,
+        scaleY: 1.5,
+        scaleZ: 1.5,
+      },
+      duration: 1000,
+      easing: "EaseInEaseOut",
+    });
+  }, []);
+
+  // Handle scene initialization
+  const handleSceneInitialized = (success: boolean) => {
+    console.log("Scene initialized:", success);
+    setSceneActive(success);
+
+    if (success) {
+      Alert.alert("Success", "Viro scene initialized successfully!");
+    } else {
+      Alert.alert("Error", "Failed to initialize Viro scene");
+    }
+  };
+
+  // Handle scene state changes
+  const handleSceneStateChanged = (event: {
+    sceneId: string;
+    state: string;
+  }) => {
+    console.log("Scene state changed:", event);
+  };
+
+  // Handle memory warnings
+  const handleMemoryWarning = (event: { memoryStats: Record<string, any> }) => {
+    console.log("Memory warning received:", event.memoryStats);
+    setMemoryStats(event.memoryStats);
+    Alert.alert(
+      "Memory Warning",
+      `Memory usage: ${event.memoryStats.usedMemoryMB?.toFixed(1) || "N/A"} MB`
+    );
+  };
+
+  // Handle box click
+  const handleBoxClick = () => {
+    Alert.alert("Box Clicked", "The red box was clicked!");
+
+    // Execute spin animation
+    executeAnimation("box1", "spinAnimation", {
+      run: true,
+      loop: false,
+    });
+  };
+
+  // Handle box hover
+  const handleBoxHover = (isHovering: boolean) => {
+    console.log("Box hover:", isHovering);
+
+    if (isHovering) {
+      // Execute pulse animation on hover
+      executeAnimation("box1", "pulseAnimation", {
+        run: true,
+        loop: false,
+      });
+    }
+  };
+
+  // Get current memory stats
+  const checkMemoryStats = () => {
+    const stats = getMemoryStats();
+    setMemoryStats(stats);
+
+    if (stats) {
+      Alert.alert(
+        "Memory Stats",
+        `Total Scenes: ${stats.totalScenes || 0}\n` +
+          `Active Scenes: ${stats.activeScenes || 0}\n` +
+          `Managed Nodes: ${stats.managedNodes || 0}\n` +
+          `Memory Usage: ${stats.usedMemoryMB?.toFixed(1) || "N/A"} MB`
+      );
+    } else {
+      Alert.alert("Memory Stats", "Memory statistics not available");
+    }
+  };
+
+  // Perform manual memory cleanup
+  const cleanupMemory = () => {
+    performMemoryCleanup();
+    Alert.alert("Memory Cleanup", "Memory cleanup performed");
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Viro Fabric Interop Example</Text>
+      <Text style={styles.subtitle}>
+        Demonstrating New Architecture compatibility
+      </Text>
+
+      <View style={styles.controls}>
+        <Button
+          title="Check Memory Stats"
+          onPress={checkMemoryStats}
+          disabled={!sceneActive}
+        />
+        <Button
+          title="Cleanup Memory"
+          onPress={cleanupMemory}
+          disabled={!sceneActive}
+        />
+      </View>
+
+      {memoryStats && (
+        <View style={styles.stats}>
+          <Text style={styles.statsTitle}>Memory Stats:</Text>
+          <Text>Total Scenes: {memoryStats.totalScenes || 0}</Text>
+          <Text>Active Scenes: {memoryStats.activeScenes || 0}</Text>
+          <Text>Managed Nodes: {memoryStats.managedNodes || 0}</Text>
+          <Text>
+            Memory Usage: {memoryStats.usedMemoryMB?.toFixed(1) || "N/A"} MB
+          </Text>
+        </View>
+      )}
+
+      <ViroFabricContainer
+        style={styles.viroContainer}
+        debug={true}
+        arEnabled={false}
+        worldAlignment="Gravity"
+        onInitialized={handleSceneInitialized}
+        onSceneStateChanged={handleSceneStateChanged}
+        onMemoryWarning={handleMemoryWarning}
+      >
+        <ViroScene
+          onSceneLoadStart={() => console.log("Scene load started")}
+          onSceneLoadEnd={() => console.log("Scene load ended")}
+          onSceneError={(error) => console.error("Scene error:", error)}
+        >
+          {/* Red box with click and hover events */}
+          <ViroBox
+            position={[-1, 0, -3]}
+            scale={[0.5, 0.5, 0.5]}
+            materials={["redMaterial"]}
+            onClick={handleBoxClick}
+            onHover={(isHovering) => handleBoxHover(isHovering)}
+            canClick={true}
+            canHover={true}
+          />
+
+          {/* Blue box with different position */}
+          <ViroBox
+            position={[1, 0, -3]}
+            scale={[0.5, 0.5, 0.5]}
+            materials={["blueMaterial"]}
+            onClick={() => Alert.alert("Blue Box", "Blue box clicked!")}
+            canClick={true}
+          />
+
+          {/* Center box with animation */}
+          <ViroBox
+            position={[0, 1, -3]}
+            scale={[0.3, 0.3, 0.3]}
+            materials={["redMaterial"]}
+            animation={{
+              name: "spinAnimation",
+              run: true,
+              loop: true,
+            }}
+          />
+        </ViroScene>
+      </ViroFabricContainer>
+
+      <View style={styles.footer}>
+        <Text style={styles.footerText}>
+          Status: {sceneActive ? "Active" : "Initializing..."}
+        </Text>
+        <Text style={styles.footerText}>
+          Features: Scene Management • Property System • Event System • Memory
+          Management
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#f0f0f0",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    textAlign: "center",
+    marginTop: 20,
+    marginBottom: 5,
+  },
+  subtitle: {
+    fontSize: 14,
+    textAlign: "center",
+    color: "#666",
+    marginBottom: 15,
+  },
+  controls: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    paddingHorizontal: 20,
+    marginBottom: 10,
+  },
+  stats: {
+    backgroundColor: "#fff",
+    margin: 10,
+    padding: 10,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: "#ddd",
+  },
+  statsTitle: {
+    fontWeight: "bold",
+    marginBottom: 5,
+  },
+  viroContainer: {
+    flex: 1,
+    backgroundColor: "#000",
+  },
+  footer: {
+    backgroundColor: "#333",
+    padding: 10,
+  },
+  footerText: {
+    color: "#fff",
+    textAlign: "center",
+    fontSize: 12,
+  },
+});