@reactvision/react-viro 2.42.0 → 2.43.1

package/fabric-interop/components/ViroARObjectMarker.tsx

@@ -0,0 +1,100 @@
+/**
+ * ViroARObjectMarker
+ *
+ * A component for detecting and tracking 3D objects in the real world.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroARObjectMarkerProps extends ViroCommonProps {
+  // Object marker properties
+  target: string;
+
+  // Visual properties
+  visible?: boolean;
+  opacity?: number;
+
+  // Events
+  onAnchorFound?: () => void;
+  onAnchorUpdated?: () => void;
+  onAnchorRemoved?: () => void;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroARObjectMarker is a component for detecting and tracking 3D objects in the real world.
+ * It allows you to attach virtual content to real-world objects, such as toys, furniture, or other physical items.
+ */
+export const ViroARObjectMarker: React.FC<ViroARObjectMarkerProps> = (
+  props
+) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    target: props.target,
+    visible: props.visible,
+    opacity: props.opacity,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("arObjectMarker", nativeProps);
+
+  // Register event handlers
+  React.useEffect(() => {
+    const nativeViro = getNativeViro();
+    if (!nativeViro) return;
+
+    const eventHandlers = [
+      { name: "onAnchorFound", handler: props.onAnchorFound },
+      { name: "onAnchorUpdated", handler: props.onAnchorUpdated },
+      { name: "onAnchorRemoved", handler: props.onAnchorRemoved },
+    ];
+
+    // Register all event handlers and store callback IDs for cleanup
+    const registeredCallbacks = eventHandlers
+      .filter(({ handler }) => !!handler)
+      .map(({ name, handler }) => {
+        const callbackId = `${nodeId}_${name}`;
+
+        // Register the callback in the global registry
+        if (typeof global !== "undefined" && global.registerViroEventCallback) {
+          global.registerViroEventCallback(callbackId, handler);
+        }
+
+        // Register with native code
+        nativeViro.registerEventCallback(nodeId, name, callbackId);
+        return { name, callbackId };
+      });
+
+    // Cleanup when unmounting
+    return () => {
+      const nativeViro = getNativeViro();
+      if (!nativeViro) return;
+
+      // Unregister all event handlers
+      registeredCallbacks.forEach(({ name, callbackId }) => {
+        nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+      });
+    };
+  }, [
+    nodeId,
+    props.onAnchorFound,
+    props.onAnchorUpdated,
+    props.onAnchorRemoved,
+  ]);
+
+  // Render children with this AR object marker as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroARPlane.tsx

@@ -0,0 +1,120 @@
+/**
+ * ViroARPlane
+ *
+ * A component for rendering AR planes detected by the AR system.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroARPlaneProps extends ViroCommonProps {
+  // Plane properties
+  alignment?: "Horizontal" | "Vertical";
+  minHeight?: number;
+  minWidth?: number;
+
+  // Visual properties
+  visible?: boolean;
+  opacity?: number;
+
+  // Materials
+  materials?: string | string[];
+
+  // Events
+  onAnchorFound?: () => void;
+  onAnchorUpdated?: () => void;
+  onAnchorRemoved?: () => void;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroARPlane is a component for rendering AR planes detected by the AR system.
+ * It represents a real-world surface detected by the AR system, such as a floor, table, or wall.
+ */
+export const ViroARPlane: React.FC<ViroARPlaneProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    alignment: props.alignment,
+    minHeight: props.minHeight,
+    minWidth: props.minWidth,
+    visible: props.visible,
+    opacity: props.opacity,
+    materials: props.materials,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("arPlane", nativeProps);
+
+  // Register event handlers
+  React.useEffect(() => {
+    const nativeViro = getNativeViro();
+    if (!nativeViro) return;
+
+    const eventHandlers = [
+      { name: "onAnchorFound", handler: props.onAnchorFound },
+      { name: "onAnchorUpdated", handler: props.onAnchorUpdated },
+      { name: "onAnchorRemoved", handler: props.onAnchorRemoved },
+      { name: "onHover", handler: props.onHover },
+      { name: "onClick", handler: props.onClick },
+      { name: "onClickState", handler: props.onClickState },
+      { name: "onTouch", handler: props.onTouch },
+      { name: "onDrag", handler: props.onDrag },
+      { name: "onPinch", handler: props.onPinch },
+      { name: "onRotate", handler: props.onRotate },
+    ];
+
+    // Register all event handlers and store callback IDs for cleanup
+    const registeredCallbacks = eventHandlers
+      .filter(({ handler }) => !!handler)
+      .map(({ name, handler }) => {
+        const callbackId = `${nodeId}_${name}`;
+
+        // Register the callback in the global registry
+        if (typeof global !== "undefined" && global.registerViroEventCallback) {
+          global.registerViroEventCallback(callbackId, handler);
+        }
+
+        // Register with native code
+        nativeViro.registerEventCallback(nodeId, name, callbackId);
+        return { name, callbackId };
+      });
+
+    // Cleanup when unmounting
+    return () => {
+      const nativeViro = getNativeViro();
+      if (!nativeViro) return;
+
+      // Unregister all event handlers
+      registeredCallbacks.forEach(({ name, callbackId }) => {
+        nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+      });
+    };
+  }, [
+    nodeId,
+    props.onAnchorFound,
+    props.onAnchorUpdated,
+    props.onAnchorRemoved,
+    props.onHover,
+    props.onClick,
+    props.onClickState,
+    props.onTouch,
+    props.onDrag,
+    props.onPinch,
+    props.onRotate,
+  ]);
+
+  // Render children with this AR plane as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroARScene.tsx

@@ -0,0 +1,127 @@
+/**
+ * ViroARScene
+ *
+ * A specialized scene for AR content that uses the device's camera as a background.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroARSceneProps extends ViroCommonProps {
+  // AR-specific props
+  anchorDetectionTypes?: ("PlanesHorizontal" | "PlanesVertical" | "Faces")[];
+  planeDetectionEnabled?: boolean;
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+
+  // Physics props
+  physicsWorld?: {
+    gravity?: [number, number, number];
+  };
+
+  // Post-processing props
+  postProcessEffects?: string[];
+
+  // Event callbacks
+  onTrackingUpdated?: (event: any) => void;
+  onAmbientLightUpdate?: (event: any) => void;
+  onPlatformUpdate?: (event: any) => void;
+  onCameraTransformUpdate?: (event: any) => void;
+  onAnchorFound?: (event: any) => void;
+  onAnchorUpdated?: (event: any) => void;
+  onAnchorRemoved?: (event: any) => void;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroARScene is a specialized scene for AR content that uses the device's camera as a background.
+ */
+export const ViroARScene: React.FC<ViroARSceneProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    anchorDetectionTypes: props.anchorDetectionTypes,
+    planeDetectionEnabled: props.planeDetectionEnabled,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+    physicsWorld: props.physicsWorld,
+    postProcessEffects: props.postProcessEffects,
+    onTrackingUpdated: props.onTrackingUpdated ? true : undefined,
+    onAmbientLightUpdate: props.onAmbientLightUpdate ? true : undefined,
+    onPlatformUpdate: props.onPlatformUpdate ? true : undefined,
+    onCameraTransformUpdate: props.onCameraTransformUpdate ? true : undefined,
+    onAnchorFound: props.onAnchorFound ? true : undefined,
+    onAnchorUpdated: props.onAnchorUpdated ? true : undefined,
+    onAnchorRemoved: props.onAnchorRemoved ? true : undefined,
+  };
+
+  // Create the AR scene node - this is a root node, so no parent
+  const nodeId = useViroNode("arScene", nativeProps);
+
+  // Register event handlers
+  React.useEffect(() => {
+    const nativeViro = getNativeViro();
+    if (!nativeViro) return;
+
+    // Register event handlers if provided
+    const eventHandlers = [
+      { name: "onTrackingUpdated", handler: props.onTrackingUpdated },
+      { name: "onAmbientLightUpdate", handler: props.onAmbientLightUpdate },
+      { name: "onPlatformUpdate", handler: props.onPlatformUpdate },
+      {
+        name: "onCameraTransformUpdate",
+        handler: props.onCameraTransformUpdate,
+      },
+      { name: "onAnchorFound", handler: props.onAnchorFound },
+      { name: "onAnchorUpdated", handler: props.onAnchorUpdated },
+      { name: "onAnchorRemoved", handler: props.onAnchorRemoved },
+    ];
+
+    // Register all event handlers
+    const registeredCallbacks = eventHandlers
+      .filter(({ handler }) => !!handler)
+      .map(({ name, handler }) => {
+        const callbackId = `${nodeId}_${name}`;
+        nativeViro.registerEventCallback(nodeId, name, callbackId);
+        return { name, callbackId };
+      });
+
+    // Cleanup when unmounting
+    return () => {
+      const nativeViro = getNativeViro();
+      if (!nativeViro) return;
+
+      // Unregister all event handlers
+      registeredCallbacks.forEach(({ name, callbackId }) => {
+        nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+      });
+    };
+  }, [
+    nodeId,
+    props.onTrackingUpdated,
+    props.onAmbientLightUpdate,
+    props.onPlatformUpdate,
+    props.onCameraTransformUpdate,
+    props.onAnchorFound,
+    props.onAnchorUpdated,
+    props.onAnchorRemoved,
+  ]);
+
+  // Render children with this scene as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};
+
+// Import ViroContextProvider at the top level to avoid circular dependencies
+import { ViroContextProvider } from "./ViroUtils";

package/fabric-interop/components/ViroARSceneNavigator.tsx

@@ -0,0 +1,82 @@
+/**
+ * ViroARSceneNavigator
+ *
+ * A component for rendering AR scenes.
+ */
+
+import React, { useState, useEffect } from "react";
+import { ViroFabricContainer } from "../ViroFabricContainer";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroARSceneNavigatorProps {
+  // Scene properties
+  initialScene: {
+    scene: React.ComponentType<any>;
+  };
+
+  // AR properties
+  autofocus?: boolean;
+  worldAlignment?: "Gravity" | "GravityAndHeading" | "Camera";
+  videoQuality?: "High" | "Low";
+
+  // Plane detection
+  planeDetection?: {
+    horizontal?: boolean;
+    vertical?: boolean;
+  };
+
+  // Events
+  onTrackingUpdated?: (event: { state: string; reason?: string }) => void;
+  onARSessionFailed?: (error: string) => void;
+
+  // Style
+  style?: React.CSSProperties;
+}
+
+/**
+ * ViroARSceneNavigator is a component for rendering AR scenes.
+ * It provides a container for AR scenes and handles the AR session lifecycle.
+ */
+export const ViroARSceneNavigator: React.FC<ViroARSceneNavigatorProps> = (
+  props
+) => {
+  // Initialize AR session
+  useEffect(() => {
+    const nativeViro = getNativeViro();
+    if (!nativeViro) return;
+
+    // Initialize Viro (no API key needed)
+    nativeViro.initialize();
+
+    // Set plane detection
+    if (props.planeDetection) {
+      nativeViro.setViroARPlaneDetection({
+        horizontal: props.planeDetection.horizontal ?? false,
+        vertical: props.planeDetection.vertical ?? false,
+      });
+    }
+
+    // Cleanup when unmounting
+    return () => {
+      // Cleanup code here
+    };
+  }, [props.planeDetection]);
+
+  // Create the scene component
+  const SceneComponent = props.initialScene.scene;
+
+  // Render the AR scene
+  return (
+    <ViroFabricContainer
+      style={props.style}
+      arEnabled={true}
+      autofocus={props.autofocus}
+      worldAlignment={props.worldAlignment}
+      videoQuality={props.videoQuality}
+      onTrackingUpdated={props.onTrackingUpdated}
+      onARSessionFailed={props.onARSessionFailed}
+    >
+      <SceneComponent />
+    </ViroFabricContainer>
+  );
+};

package/fabric-interop/components/ViroAmbientLight.tsx

@@ -0,0 +1,62 @@
+/**
+ * ViroAmbientLight
+ *
+ * A component for adding ambient lighting to a scene.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  useViroEventListeners,
+  convertCommonProps,
+} from "./ViroUtils";
+
+export interface ViroAmbientLightProps extends ViroCommonProps {
+  // Light properties
+  color?: string;
+  intensity?: number;
+  temperature?: number;
+  influenceBitMask?: number;
+}
+
+/**
+ * ViroAmbientLight is a component for adding ambient lighting to a scene.
+ * Ambient light is a type of light that illuminates all objects in the scene equally,
+ * regardless of their position or orientation.
+ */
+export const ViroAmbientLight: React.FC<ViroAmbientLightProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    color: props.color,
+    intensity: props.intensity,
+    temperature: props.temperature,
+    influenceBitMask: props.influenceBitMask,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("ambientLight", nativeProps);
+
+  // Register event handlers using our new event system
+  useViroEventListeners(nodeId, {
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onClickState: props.onClickState,
+    onTouch: props.onTouch,
+    onScroll: props.onScroll,
+    onSwipe: props.onSwipe,
+    onDrag: props.onDrag,
+    onPinch: props.onPinch,
+    onRotate: props.onRotate,
+    onFuse:
+      typeof props.onFuse === "function"
+        ? props.onFuse
+        : props.onFuse?.callback,
+    onCollision: props.onCollision,
+    onTransformUpdate: props.onTransformUpdate,
+  });
+
+  // Ambient light doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroAnimatedComponent.tsx

@@ -0,0 +1,91 @@
+/**
+ * ViroAnimatedComponent
+ *
+ * A component wrapper for adding animations to Viro components.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroAnimatedComponentProps extends ViroCommonProps {
+  // Animation properties
+  animation?: {
+    name?: string;
+    delay?: number;
+    loop?: boolean;
+    onStart?: () => void;
+    onFinish?: () => void;
+    run?: boolean;
+    interruptible?: boolean;
+  };
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroAnimatedComponent is a wrapper for adding animations to Viro components.
+ * It provides animation capabilities to its children.
+ */
+export const ViroAnimatedComponent: React.FC<ViroAnimatedComponentProps> = (
+  props
+) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    animation: props.animation,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("animatedComponent", nativeProps);
+
+  // Register animation event handlers
+  React.useEffect(() => {
+    const nativeViro = getNativeViro();
+    if (!nativeViro || !props.animation) return;
+
+    const eventHandlers = [
+      { name: "onAnimationStart", handler: props.animation.onStart },
+      { name: "onAnimationFinish", handler: props.animation.onFinish },
+    ];
+
+    // Register all event handlers and store callback IDs for cleanup
+    const registeredCallbacks = eventHandlers
+      .filter(({ handler }) => !!handler)
+      .map(({ name, handler }) => {
+        const callbackId = `${nodeId}_${name}`;
+
+        // Register the callback in the global registry
+        if (typeof global !== "undefined" && global.registerViroEventCallback) {
+          global.registerViroEventCallback(callbackId, handler);
+        }
+
+        // Register with native code
+        nativeViro.registerEventCallback(nodeId, name, callbackId);
+        return { name, callbackId };
+      });
+
+    // Cleanup when unmounting
+    return () => {
+      const nativeViro = getNativeViro();
+      if (!nativeViro) return;
+
+      // Unregister all event handlers
+      registeredCallbacks.forEach(({ name, callbackId }) => {
+        nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+      });
+    };
+  }, [nodeId, props.animation?.onStart, props.animation?.onFinish]);
+
+  // Render children with this animated component as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroAnimatedImage.tsx

@@ -0,0 +1,81 @@
+/**
+ * ViroAnimatedImage
+ *
+ * A component for displaying animated images.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroAnimatedImageProps extends ViroCommonProps {
+  // Image source
+  source: { uri: string }[] | number[];
+
+  // Animation properties
+  loop?: boolean;
+  delay?: number;
+  visible?: boolean;
+  opacity?: number;
+  width?: number;
+  height?: number;
+
+  // Material properties
+  materials?: string | string[];
+
+  // Events
+  onLoadStart?: () => void;
+  onLoadEnd?: () => void;
+  onError?: (error: string) => void;
+  onFinish?: () => void;
+}
+
+/**
+ * ViroAnimatedImage is a component for displaying animated images.
+ * It can be used to create simple animations by cycling through a series of images.
+ */
+export const ViroAnimatedImage: React.FC<ViroAnimatedImageProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    source: props.source,
+    loop: props.loop,
+    delay: props.delay,
+    visible: props.visible,
+    opacity: props.opacity,
+    width: props.width,
+    height: props.height,
+    materials: props.materials,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("animatedImage", nativeProps);
+
+  
+  // Register event handlers using our new event system
+  useViroEventListeners(nodeId, {
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onClickState: props.onClickState,
+    onTouch: props.onTouch,
+    onScroll: props.onScroll,
+    onSwipe: props.onSwipe,
+    onDrag: props.onDrag,
+    onPinch: props.onPinch,
+    onRotate: props.onRotate,
+    onFuse:
+      typeof props.onFuse === "function"
+        ? props.onFuse
+        : props.onFuse?.callback,
+    onCollision: props.onCollision,
+    onTransformUpdate: props.onTransformUpdate,
+  });
+
+  // Component doesn't have children, so just return null
+  return null;
+};