@reactvision/react-viro 2.42.0 → 2.43.1

package/fabric-interop/components/ViroGlobal.ts

@@ -0,0 +1,114 @@
+/**
+ * ViroGlobal
+ *
+ * A utility to provide type-safe access to the global NativeViro object.
+ */
+
+// Add global declaration for TypeScript
+declare global {
+  var NativeViro: any;
+}
+
+// Define the shape of the NativeViro object
+export interface NativeViroType {
+  // Node management
+  createViroNode: (
+    nodeId: string,
+    nodeType: string,
+    props: Record<string, any>
+  ) => void;
+  updateViroNode: (nodeId: string, props: Record<string, any>) => void;
+  deleteViroNode: (nodeId: string) => void;
+
+  // Scene hierarchy
+  addViroNodeChild: (parentId: string, childId: string) => void;
+  removeViroNodeChild: (parentId: string, childId: string) => void;
+
+  // Event handling
+  registerEventCallback: (
+    nodeId: string,
+    eventName: string,
+    callbackId: string
+  ) => void;
+  unregisterEventCallback: (
+    nodeId: string,
+    eventName: string,
+    callbackId: string
+  ) => void;
+
+  // Materials
+  createViroMaterial: (
+    materialName: string,
+    properties: Record<string, any>
+  ) => void;
+  updateViroMaterial: (
+    materialName: string,
+    properties: Record<string, any>
+  ) => void;
+
+  // Animations
+  createViroAnimation: (
+    animationName: string,
+    properties: Record<string, any>
+  ) => void;
+  executeViroAnimation: (
+    nodeId: string,
+    animationName: string,
+    options: Record<string, any>
+  ) => void;
+
+  // Scene Management
+  createViroScene: (
+    sceneId: string,
+    sceneType: string,
+    props: Record<string, any>
+  ) => void;
+  activateViroScene: (sceneId: string) => void;
+  deactivateViroScene: (sceneId: string) => void;
+  destroyViroScene: (sceneId: string) => void;
+  getViroSceneState: (sceneId: string) => string | null;
+
+  // Memory Management
+  getViroMemoryStats: () => Record<string, any> | null;
+  performViroMemoryCleanup: () => void;
+
+  // AR specific
+  setViroARPlaneDetection: (config: {
+    enabled?: boolean;
+    alignment?: string;
+    horizontal?: boolean;
+    vertical?: boolean;
+  }) => void;
+  setViroARImageTargets: (targets: Record<string, any>) => void;
+
+  // Scene navigator methods
+  recenterTracking: (nodeId: string) => void;
+  project: (
+    nodeId: string,
+    point: [number, number, number]
+  ) => Promise<[number, number, number]>;
+  unproject: (
+    nodeId: string,
+    point: [number, number, number]
+  ) => Promise<[number, number, number]>;
+
+  // Initialization
+  initialize: (config?: {
+    debug?: boolean;
+    arEnabled?: boolean;
+    worldAlignment?: string;
+  }) => Promise<boolean>;
+}
+
+// Get the NativeViro object with type safety
+export function getNativeViro(): NativeViroType | null {
+  if (typeof global !== "undefined" && global.NativeViro) {
+    return global.NativeViro as NativeViroType;
+  }
+  return null;
+}
+
+// Check if NativeViro is available
+export function isNativeViroAvailable(): boolean {
+  return getNativeViro() !== null;
+}

package/fabric-interop/components/ViroImage.tsx

@@ -0,0 +1,85 @@
+/**
+ * ViroImage
+ *
+ * A component for displaying 2D images in 3D space.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  useViroEventListeners,
+  convertCommonProps,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroImageProps extends ViroCommonProps {
+  // Image source
+  source: { uri: string } | number;
+
+  // Image properties
+  width?: number;
+  height?: number;
+  resizeMode?: "ScaleToFill" | "ScaleToFit" | "StretchToFill";
+  imageClipMode?: "None" | "ClipToBounds";
+  stereoMode?: "LeftRight" | "RightLeft" | "TopBottom" | "BottomTop" | "None";
+  format?: "RGBA8" | "RGB565";
+  mipmap?: boolean;
+
+  // Placeholder
+  placeholderSource?: { uri: string } | number;
+
+  // Materials
+  materials?: string | string[];
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+}
+
+/**
+ * ViroImage is a component for displaying 2D images in 3D space.
+ */
+export const ViroImage: React.FC<ViroImageProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    source: props.source,
+    width: props.width,
+    height: props.height,
+    resizeMode: props.resizeMode,
+    imageClipMode: props.imageClipMode,
+    stereoMode: props.stereoMode,
+    format: props.format,
+    mipmap: props.mipmap,
+    placeholderSource: props.placeholderSource,
+    materials: props.materials,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("image", 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,
+  });
+
+  // Image doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroLightingEnvironment.tsx

@@ -0,0 +1,63 @@
+/**
+ * ViroLightingEnvironment
+ *
+ * A component for setting up environment-based lighting using HDR images.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroLightingEnvironmentProps extends ViroCommonProps {
+  // Environment source
+  source: { uri: string } | number;
+
+  // Lighting properties
+  intensity?: number;
+  rotation?: [number, number, number];
+}
+
+/**
+ * ViroLightingEnvironment is a component for setting up environment-based lighting using HDR images.
+ * It provides realistic lighting and reflections based on a 360-degree HDR environment map.
+ */
+export const ViroLightingEnvironment: React.FC<ViroLightingEnvironmentProps> = (
+  props
+) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    source: props.source,
+    intensity: props.intensity,
+    rotation: props.rotation,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("lightingEnvironment", 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;
+};

package/fabric-interop/components/ViroMaterialVideo.tsx

@@ -0,0 +1,82 @@
+/**
+ * ViroMaterialVideo
+ *
+ * A component for using video as a material texture.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroMaterialVideoProps extends ViroCommonProps {
+  // Material name
+  material: string;
+
+  // Video source
+  source: { uri: string } | number;
+
+  // Video properties
+  paused?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  volume?: number;
+  stereoMode?: "LeftRight" | "RightLeft" | "TopBottom" | "BottomTop" | "None";
+
+  // Events
+  onLoadStart?: () => void;
+  onLoadEnd?: () => void;
+  onBufferStart?: () => void;
+  onBufferEnd?: () => void;
+  onFinish?: () => void;
+  onUpdateTime?: (currentTime: number, totalTime: number) => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * ViroMaterialVideo is a component for using video as a material texture.
+ * It allows video content to be applied as a texture to 3D objects.
+ */
+export const ViroMaterialVideo: React.FC<ViroMaterialVideoProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    material: props.material,
+    source: props.source,
+    paused: props.paused,
+    loop: props.loop,
+    muted: props.muted,
+    volume: props.volume,
+    stereoMode: props.stereoMode,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("materialVideo", 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;
+};

package/fabric-interop/components/ViroNode.tsx

@@ -0,0 +1,62 @@
+/**
+ * ViroNode
+ *
+ * A component that serves as a container for other Viro components.
+ * It doesn't render anything itself but provides a coordinate system for its children.
+ */
+
+import React, { useContext } from "react";
+import {
+  ViroContextProvider,
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroNodeProps extends ViroCommonProps {
+  // Node-specific props
+  renderingOrder?: number;
+  viroTag?: string;
+  physicsBody?: {
+    type: "Dynamic" | "Kinematic" | "Static";
+    mass?: number;
+    restitution?: number;
+    shape?: {
+      type: "Box" | "Sphere" | "Compound";
+      params?: number[];
+    };
+    friction?: number;
+    useGravity?: boolean;
+    enabled?: boolean;
+    velocity?: [number, number, number];
+    force?: {
+      value: [number, number, number];
+      position: [number, number, number];
+    };
+    torque?: [number, number, number];
+  };
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroNode is a component that serves as a container for other Viro components.
+ * It doesn't render anything itself but provides a coordinate system for its children.
+ */
+export const ViroNode: React.FC<ViroNodeProps> = (props) => {
+  // Parent will be determined by context automatically
+
+  // Convert common props to the format expected by the native code
+  const nativeProps = convertCommonProps(props);
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("node", nativeProps);
+
+  // Render children with this node as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroOmniLight.tsx

@@ -0,0 +1,66 @@
+/**
+ * ViroOmniLight
+ *
+ * A component for adding omnidirectional lighting to a scene.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroOmniLightProps extends ViroCommonProps {
+  // Light properties
+  color?: string;
+  intensity?: number;
+  temperature?: number;
+  attenuationStartDistance?: number;
+  attenuationEndDistance?: number;
+  influenceBitMask?: number;
+}
+
+/**
+ * ViroOmniLight is a component for adding omnidirectional lighting to a scene.
+ * Omni light is a type of light that illuminates objects in all directions
+ * from a single point, similar to a light bulb.
+ */
+export const ViroOmniLight: React.FC<ViroOmniLightProps> = (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,
+    attenuationStartDistance: props.attenuationStartDistance,
+    attenuationEndDistance: props.attenuationEndDistance,
+    influenceBitMask: props.influenceBitMask,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("omniLight", 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;
+};

package/fabric-interop/components/ViroOrbitCamera.tsx

@@ -0,0 +1,45 @@
+/**
+ * ViroOrbitCamera
+ *
+ * A component for orbital camera controls.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroOrbitCameraProps extends ViroCommonProps {
+  // Orbit properties
+  focalPoint?: [number, number, number];
+  distance?: number;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroOrbitCamera is a component for orbital camera controls.
+ * It allows the camera to orbit around a focal point.
+ */
+export const ViroOrbitCamera: React.FC<ViroOrbitCameraProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    focalPoint: props.focalPoint,
+    distance: props.distance,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("orbitCamera", nativeProps);
+
+  // Render children with this orbit camera as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroParticleEmitter.tsx

@@ -0,0 +1,111 @@
+/**
+ * ViroParticleEmitter
+ *
+ * A component for creating particle effects.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroParticleEmitterProps extends ViroCommonProps {
+  // Particle properties
+  duration?: number;
+  delay?: number;
+  loop?: boolean;
+  run?: boolean;
+  fixedToEmitter?: boolean;
+
+  // Particle image
+  image?: {
+    source: { uri: string } | number;
+    height?: number;
+    width?: number;
+    bloomThreshold?: number;
+  };
+
+  // Spawn properties
+  spawnBehavior?: {
+    particleLifetime?: [number, number];
+    emissionRatePerSecond?: [number, number];
+    emissionRatePerMeter?: [number, number];
+    spawnVolume?: {
+      shape: "box" | "sphere";
+      params?: [number, number, number];
+      spawnOnSurface?: boolean;
+    };
+    maxParticles?: number;
+  };
+
+  // Particle behavior
+  particleAppearance?: {
+    opacity?: [number, number];
+    rotation?: [number, number];
+    rotationSpeed?: [number, number];
+    scale?: [number, number, number, number];
+    color?: [number, number, number, number];
+  };
+
+  // Physics
+  particlePhysics?: {
+    velocity?: [number, number, number, number, number, number];
+    acceleration?: [number, number, number, number, number, number];
+    explosiveImpulse?: [number, number];
+  };
+
+  // Events
+  onFinish?: () => void;
+}
+
+/**
+ * ViroParticleEmitter is a component for creating particle effects.
+ * It provides a flexible system for creating various particle-based visual effects.
+ */
+export const ViroParticleEmitter: React.FC<ViroParticleEmitterProps> = (
+  props
+) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    duration: props.duration,
+    delay: props.delay,
+    loop: props.loop,
+    run: props.run,
+    fixedToEmitter: props.fixedToEmitter,
+    image: props.image,
+    spawnBehavior: props.spawnBehavior,
+    particleAppearance: props.particleAppearance,
+    particlePhysics: props.particlePhysics,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("particle", 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;
+};

package/fabric-interop/components/ViroPolygon.tsx

@@ -0,0 +1,72 @@
+/**
+ * ViroPolygon
+ *
+ * A component for rendering a 2D polygon in 3D space.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroPolygonProps extends ViroCommonProps {
+  // Polygon vertices
+  vertices: [number, number][];
+
+  // Holes in the polygon
+  holes?: [number, number][][];
+
+  // Materials
+  materials?: string | string[];
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+}
+
+/**
+ * ViroPolygon is a component for rendering a 2D polygon in 3D space.
+ * It allows you to create complex 2D shapes by specifying a list of vertices.
+ * You can also create holes in the polygon by specifying a list of hole vertices.
+ */
+export const ViroPolygon: React.FC<ViroPolygonProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    vertices: props.vertices,
+    holes: props.holes,
+    materials: props.materials,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("polygon", 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;
+};