@reactvision/react-viro 2.42.0 → 2.43.1

package/fabric-interop/ViroEventsManager.js

@@ -0,0 +1,257 @@
+/**
+ * ViroEventsManager.js
+ * JavaScript integration for ViroEventsTurboModule
+ *
+ * This module provides the JavaScript interface for handling
+ * Viro JSI events through the TurboModule system
+ */
+
+import { NativeEventEmitter, NativeModules } from "react-native";
+import ViroEventsTurboModule from "./specs/ViroEventsTurboModule";
+
+class ViroEventsManager {
+  constructor() {
+    this.eventEmitter = new NativeEventEmitter(ViroEventsTurboModule);
+    this.listeners = new Map();
+    this.callbackRegistry = new Map();
+
+    // Set up event listeners
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    // Listen for JSI callbacks
+    this.eventEmitter.addListener("ViroJSICallback", (event) => {
+      this.handleJSICallback(event);
+    });
+
+    // Listen for node events
+    this.eventEmitter.addListener("ViroNodeEvent", (event) => {
+      this.handleNodeEvent(event);
+    });
+
+    // Listen for scene events
+    this.eventEmitter.addListener("ViroSceneEvent", (event) => {
+      this.handleSceneEvent(event);
+    });
+  }
+
+  /**
+   * Register a callback for JSI events
+   * @param {string} callbackId - The callback ID from JSI
+   * @param {function} callback - The JavaScript callback function
+   */
+  registerJSICallback(callbackId, callback) {
+    if (typeof callback === "function") {
+      this.callbackRegistry.set(callbackId, callback);
+      console.log(`[ViroEventsManager] Registered JSI callback: ${callbackId}`);
+    } else {
+      console.warn(
+        `[ViroEventsManager] Invalid callback for ID: ${callbackId}`
+      );
+    }
+  }
+
+  /**
+   * Unregister a JSI callback
+   * @param {string} callbackId - The callback ID to remove
+   */
+  unregisterJSICallback(callbackId) {
+    if (this.callbackRegistry.has(callbackId)) {
+      this.callbackRegistry.delete(callbackId);
+      console.log(
+        `[ViroEventsManager] Unregistered JSI callback: ${callbackId}`
+      );
+    }
+  }
+
+  /**
+   * Register a listener for node events
+   * @param {string} nodeId - The node ID
+   * @param {string} eventName - The event name
+   * @param {function} callback - The callback function
+   */
+  registerNodeEventListener(nodeId, eventName, callback) {
+    const key = `${nodeId}.${eventName}`;
+    this.listeners.set(key, callback);
+    console.log(`[ViroEventsManager] Registered node event listener: ${key}`);
+  }
+
+  /**
+   * Register a listener for scene events
+   * @param {string} sceneId - The scene ID
+   * @param {string} eventName - The event name
+   * @param {function} callback - The callback function
+   */
+  registerSceneEventListener(sceneId, eventName, callback) {
+    const key = `scene.${sceneId}.${eventName}`;
+    this.listeners.set(key, callback);
+    console.log(`[ViroEventsManager] Registered scene event listener: ${key}`);
+  }
+
+  /**
+   * Handle JSI callback events
+   * @private
+   */
+  handleJSICallback(event) {
+    const { callbackId, eventData, timestamp } = event;
+
+    console.log(
+      `[ViroEventsManager] Received JSI callback: ${callbackId}`,
+      eventData
+    );
+
+    const callback = this.callbackRegistry.get(callbackId);
+    if (callback) {
+      try {
+        callback(eventData);
+      } catch (error) {
+        console.error(
+          `[ViroEventsManager] Error executing JSI callback ${callbackId}:`,
+          error
+        );
+      }
+    } else {
+      console.warn(
+        `[ViroEventsManager] No callback registered for ID: ${callbackId}`
+      );
+    }
+  }
+
+  /**
+   * Handle node events
+   * @private
+   */
+  handleNodeEvent(event) {
+    const { nodeId, eventName, eventData, timestamp } = event;
+    const key = `${nodeId}.${eventName}`;
+
+    console.log(`[ViroEventsManager] Received node event: ${key}`, eventData);
+
+    const callback = this.listeners.get(key);
+    if (callback) {
+      try {
+        callback(eventData);
+      } catch (error) {
+        console.error(
+          `[ViroEventsManager] Error executing node event callback ${key}:`,
+          error
+        );
+      }
+    }
+  }
+
+  /**
+   * Handle scene events
+   * @private
+   */
+  handleSceneEvent(event) {
+    const { sceneId, eventName, eventData, timestamp } = event;
+    const key = `scene.${sceneId}.${eventName}`;
+
+    console.log(`[ViroEventsManager] Received scene event: ${key}`, eventData);
+
+    const callback = this.listeners.get(key);
+    if (callback) {
+      try {
+        callback(eventData);
+      } catch (error) {
+        console.error(
+          `[ViroEventsManager] Error executing scene event callback ${key}:`,
+          error
+        );
+      }
+    }
+  }
+
+  /**
+   * Check if the event system is ready
+   * @returns {boolean}
+   */
+  isEventSystemReady() {
+    try {
+      return ViroEventsTurboModule.isEventSystemReady();
+    } catch (error) {
+      console.error(
+        "[ViroEventsManager] Error checking event system status:",
+        error
+      );
+      return false;
+    }
+  }
+
+  /**
+   * Get the number of active listeners
+   * @returns {number}
+   */
+  getActiveListenerCount() {
+    try {
+      return ViroEventsTurboModule.getActiveListenerCount();
+    } catch (error) {
+      console.error("[ViroEventsManager] Error getting listener count:", error);
+      return 0;
+    }
+  }
+
+  /**
+   * Manually emit a JSI callback (for testing)
+   * @param {string} callbackId - The callback ID
+   * @param {object} eventData - The event data
+   */
+  emitJSICallback(callbackId, eventData = {}) {
+    try {
+      ViroEventsTurboModule.emitJSICallback(callbackId, eventData);
+    } catch (error) {
+      console.error("[ViroEventsManager] Error emitting JSI callback:", error);
+    }
+  }
+
+  /**
+   * Manually emit a node event (for testing)
+   * @param {string} nodeId - The node ID
+   * @param {string} eventName - The event name
+   * @param {object} eventData - The event data
+   */
+  emitNodeEvent(nodeId, eventName, eventData = {}) {
+    try {
+      ViroEventsTurboModule.emitNodeEvent(nodeId, eventName, eventData);
+    } catch (error) {
+      console.error("[ViroEventsManager] Error emitting node event:", error);
+    }
+  }
+
+  /**
+   * Manually emit a scene event (for testing)
+   * @param {string} sceneId - The scene ID
+   * @param {string} eventName - The event name
+   * @param {object} eventData - The event data
+   */
+  emitSceneEvent(sceneId, eventName, eventData = {}) {
+    try {
+      ViroEventsTurboModule.emitSceneEvent(sceneId, eventName, eventData);
+    } catch (error) {
+      console.error("[ViroEventsManager] Error emitting scene event:", error);
+    }
+  }
+
+  /**
+   * Clean up all listeners and callbacks
+   */
+  cleanup() {
+    console.log("[ViroEventsManager] Cleaning up event manager");
+
+    // Remove all event listeners
+    this.eventEmitter.removeAllListeners("ViroJSICallback");
+    this.eventEmitter.removeAllListeners("ViroNodeEvent");
+    this.eventEmitter.removeAllListeners("ViroSceneEvent");
+
+    // Clear registries
+    this.listeners.clear();
+    this.callbackRegistry.clear();
+
+    console.log("[ViroEventsManager] Event manager cleanup completed");
+  }
+}
+
+// Export singleton instance
+export default new ViroEventsManager();

package/fabric-interop/ViroFabricContainer.tsx

@@ -0,0 +1,273 @@
+/**
+ * ViroFabricContainer
+ *
+ * This is the main container component that Fabric manages directly.
+ * It serves as a viewport for the Viro rendering engine and delegates
+ * rendering to the existing native implementation.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import {
+  requireNativeComponent,
+  UIManager,
+  findNodeHandle,
+  Platform,
+  View,
+  Text,
+  NativeEventEmitter,
+  NativeModules,
+} from "react-native";
+
+// Check if New Architecture is enabled
+const isNewArchitectureEnabled = () => {
+  if (global.__turboModuleProxy == null) {
+    throw new Error(
+      "Viro: New Architecture is not enabled. This library requires React Native New Architecture. " +
+        "Please enable it in your app by following the instructions at: " +
+        "https://reactnative.dev/docs/new-architecture-intro"
+    );
+  }
+
+  // We're assuming the minimum supported version (0.76.9+) since this is a Fabric-only component
+  return true;
+};
+
+// Check if the component exists in UIManager
+const isFabricComponentAvailable = () => {
+  isNewArchitectureEnabled(); // This will throw if New Architecture is not enabled
+
+  if (
+    !UIManager.getViewManagerConfig ||
+    UIManager.getViewManagerConfig("ViroFabricContainerView") == null
+  ) {
+    throw new Error(
+      "ViroFabricContainerView is not available. Make sure you have installed the native module properly."
+    );
+  }
+
+  return true;
+};
+
+// Define the native component
+// @ts-ignore - TypeScript doesn't know about the props of the native component
+const NativeViroFabricContainer = requireNativeComponent<any>(
+  "ViroFabricContainerView"
+);
+
+// Props for the container
+export interface ViroFabricContainerProps {
+  // General props
+  debug?: boolean;
+  style?: React.CSSProperties;
+
+  // AR specific props
+  arEnabled?: boolean;
+  autofocus?: boolean;
+  worldAlignment?: "Gravity" | "GravityAndHeading" | "Camera";
+  videoQuality?: "High" | "Low";
+
+  // Event callbacks
+  onInitialized?: (success: boolean) => void;
+  onTrackingUpdated?: (state: any) => void;
+  onCameraTransformUpdate?: (transform: any) => void;
+  onARSessionFailed?: (error: string) => void;
+
+  // Scene management callbacks
+  onSceneStateChanged?: (event: { sceneId: string; state: string }) => void;
+  onMemoryWarning?: (event: { memoryStats: Record<string, any> }) => void;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroFabricContainer is the main component that hosts the Viro rendering engine.
+ * It creates a native view that the Viro renderer can draw on and manages the
+ * lifecycle of the Viro system.
+ */
+export const ViroFabricContainer: React.FC<ViroFabricContainerProps> = ({
+  debug = false,
+  arEnabled = false,
+  worldAlignment = "Gravity",
+  onInitialized,
+  onTrackingUpdated,
+  onCameraTransformUpdate,
+  onSceneStateChanged,
+  onMemoryWarning,
+  children,
+}) => {
+  // Reference to the native component
+  const containerRef = useRef<any>(null);
+
+  // Root node ID for the scene
+  const rootNodeId = useRef<string>("viro_root_scene");
+
+  // Event callback registry
+  const eventCallbacks = useRef<Record<string, (event: any) => void>>({});
+
+  // Set up event handling for JSI and fallback event emitter approach
+  useEffect(() => {
+    // Set up global event handler for JSI events
+    if (typeof global !== "undefined") {
+      // @ts-ignore - This property will be added by the native code
+      global.handleViroEvent = (callbackId: string, eventData: any) => {
+        // Find the callback in the registry and call it
+        const callback = eventCallbacks.current[callbackId];
+        if (callback) {
+          callback(eventData);
+        } else {
+          console.warn(`No callback found for ID: ${callbackId}`);
+        }
+      };
+    }
+
+    // Set up event emitter for fallback approach
+    const eventEmitter = new NativeEventEmitter(
+      NativeModules.ViroFabricManager
+    );
+
+    // Add the ViroEvent listener
+    const subscription = eventEmitter.addListener("ViroEvent", (event) => {
+      const { callbackId, data } = event;
+      const callback = eventCallbacks.current[callbackId];
+      if (callback) {
+        callback(data);
+      } else {
+        console.warn(
+          `No callback found for ID: ${callbackId} (via event emitter)`
+        );
+      }
+    });
+
+    return () => {
+      // Clean up event subscription
+      subscription.remove();
+
+      // Clean up global event handler
+      if (typeof global !== "undefined") {
+        // @ts-ignore - This property was added by us
+        delete global.handleViroEvent;
+      }
+    };
+  }, []);
+
+  // Initialize the Viro system when the component mounts
+  useEffect(() => {
+    if (containerRef.current && isFabricComponentAvailable()) {
+      const nodeHandle = findNodeHandle(containerRef.current);
+      if (!nodeHandle) {
+        console.error("Failed to get node handle for ViroFabricContainer");
+        return;
+      }
+
+      try {
+        // Use the codegenNativeCommands approach for New Architecture
+        const ViroFabricContainerCommands = UIManager.getViewManagerConfig(
+          "ViroFabricContainerView"
+        ).Commands;
+
+        if (!ViroFabricContainerCommands) {
+          console.error(
+            "ViroFabricContainerView commands not found in UIManager"
+          );
+          return;
+        }
+
+        // Call the native method to initialize
+        UIManager.dispatchViewManagerCommand(
+          nodeHandle,
+          ViroFabricContainerCommands.initialize,
+          [debug || false, arEnabled || false, worldAlignment || "Gravity"]
+        );
+      } catch (error) {
+        console.error("Failed to initialize ViroFabricContainer:", error);
+      }
+    }
+
+    // Cleanup when unmounting
+    return () => {
+      if (containerRef.current) {
+        const nodeHandle = findNodeHandle(containerRef.current);
+        if (!nodeHandle) return;
+
+        try {
+          // Use the same approach as initialize for cleanup
+          const ViroFabricContainerCommands = UIManager.getViewManagerConfig(
+            "ViroFabricContainerView"
+          ).Commands;
+
+          if (
+            !ViroFabricContainerCommands ||
+            !ViroFabricContainerCommands.cleanup
+          ) {
+            console.error(
+              "ViroFabricContainerView cleanup command not found in UIManager"
+            );
+            return;
+          }
+
+          // Call the native method to cleanup
+          UIManager.dispatchViewManagerCommand(
+            nodeHandle,
+            ViroFabricContainerCommands.cleanup,
+            []
+          );
+        } catch (error) {
+          console.error("Failed to cleanup ViroFabricContainer:", error);
+        }
+      }
+    };
+  }, [debug, arEnabled, worldAlignment]);
+
+  // Handle initialization event
+  const handleInitialized = (event: any) => {
+    if (onInitialized) {
+      onInitialized(event.nativeEvent.success);
+    }
+  };
+
+  // Handle tracking updated event
+  const handleTrackingUpdated = (event: any) => {
+    if (onTrackingUpdated) {
+      onTrackingUpdated(event.nativeEvent);
+    }
+  };
+
+  // Handle camera transform update event
+  const handleCameraTransformUpdate = (event: any) => {
+    if (onCameraTransformUpdate) {
+      onCameraTransformUpdate(event.nativeEvent);
+    }
+  };
+
+  // Handle scene state changed event
+  const handleSceneStateChanged = (event: any) => {
+    if (onSceneStateChanged) {
+      onSceneStateChanged(event.nativeEvent);
+    }
+  };
+
+  // Handle memory warning event
+  const handleMemoryWarning = (event: any) => {
+    if (onMemoryWarning) {
+      onMemoryWarning(event.nativeEvent);
+    }
+  };
+
+  // This will throw an error if the native component is not available or New Architecture is not enabled
+  isFabricComponentAvailable();
+
+  return (
+    <NativeViroFabricContainer
+      ref={containerRef}
+      style={{ flex: 1 }}
+      onInitialized={handleInitialized}
+      onTrackingUpdated={handleTrackingUpdated}
+      onCameraTransformUpdate={handleCameraTransformUpdate}
+      onSceneStateChanged={handleSceneStateChanged}
+      onMemoryWarning={handleMemoryWarning}
+    >
+      {children}
+    </NativeViroFabricContainer>
+  );
+};

package/fabric-interop/components/AR/ViroARPlane.tsx

@@ -0,0 +1,108 @@
+/**
+ * ViroARPlane
+ *
+ * Container for Viro Components anchored to a detected plane.
+ */
+
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { ViroNode } from "../ViroNode";
+import { useViroNode } from "../ViroUtils";
+import {
+  registerEventListener,
+  unregisterEventListener,
+} from "../../NativeViro";
+import { ViroCommonProps, ViroObjectProps } from "./ViroCommonProps";
+import { ViroAnchorFoundMap, ViroAnchorUpdatedMap } from "../Types/ViroEvents";
+
+type Props = ViroCommonProps &
+  ViroObjectProps & {
+    anchorId?: string;
+    minHeight?: number;
+    minWidth?: number;
+    alignment?:
+      | "Horizontal"
+      | "HorizontalUpward"
+      | "HorizontalDownward"
+      | "Vertical";
+    onAnchorFound?: (anchorMap: ViroAnchorFoundMap) => void;
+    onAnchorUpdated?: (anchorMap: ViroAnchorUpdatedMap) => void;
+    onAnchorRemoved?: () => void;
+  };
+
+/**
+ * Container for Viro Components anchored to a detected plane.
+ */
+export function ViroARPlane(props: Props): React.ReactElement {
+  const {
+    anchorId,
+    minHeight,
+    minWidth,
+    alignment,
+    onAnchorFound,
+    onAnchorUpdated,
+    onAnchorRemoved,
+    children,
+    ...rest
+  } = props;
+
+  // Create the node
+  const nodeProps = {
+    ...rest,
+    anchorId,
+    minHeight,
+    minWidth,
+    alignment,
+  };
+
+  const nodeId = useViroNode("arPlane", nodeProps);
+
+  // Set up event listeners
+  useEffect(() => {
+    const anchorFoundCallbackId = onAnchorFound
+      ? registerEventListener(nodeId, "onAnchorFound", (event) => {
+          onAnchorFound(event.anchorFoundMap);
+        })
+      : null;
+
+    const anchorUpdatedCallbackId = onAnchorUpdated
+      ? registerEventListener(nodeId, "onAnchorUpdated", (event) => {
+          onAnchorUpdated(event.anchorUpdatedMap);
+        })
+      : null;
+
+    const anchorRemovedCallbackId = onAnchorRemoved
+      ? registerEventListener(nodeId, "onAnchorRemoved", () => {
+          onAnchorRemoved();
+        })
+      : null;
+
+    // Clean up event listeners
+    return () => {
+      if (anchorFoundCallbackId) {
+        unregisterEventListener(nodeId, "onAnchorFound", anchorFoundCallbackId);
+      }
+      if (anchorUpdatedCallbackId) {
+        unregisterEventListener(
+          nodeId,
+          "onAnchorUpdated",
+          anchorUpdatedCallbackId
+        );
+      }
+      if (anchorRemovedCallbackId) {
+        unregisterEventListener(
+          nodeId,
+          "onAnchorRemoved",
+          anchorRemovedCallbackId
+        );
+      }
+    };
+  }, [nodeId, onAnchorFound, onAnchorUpdated, onAnchorRemoved]);
+
+  // Render children within this node
+  return (
+    <ViroNode viroTag={nodeId} position={[0, 0, 0]}>
+      {children}
+    </ViroNode>
+  );
+}