@reactvision/react-viro 2.43.1 → 2.43.3

package/fabric-interop/examples/ComprehensiveExample.tsx

@@ -1,441 +0,0 @@
-/**
- * ComprehensiveExample
- *
- * A comprehensive example demonstrating the updated fabric-interop system with:
- * - Multiple component types (3D primitives, lights, text, images)
- * - Scene management and lifecycle
- * - Property system with individual setters
- * - Event system with JSI + fallback
- * - Memory management integration
- * - Material and animation management
- */
-
-import React, { useState, useEffect } from "react";
-import { View, Text, Button, StyleSheet, Alert } from "react-native";
-import {
-  ViroFabricContainer,
-  ViroScene,
-  ViroBox,
-  ViroSphere,
-  ViroText,
-  ViroImage,
-  ViroQuad,
-  ViroAmbientLight,
-  ViroDirectionalLight,
-  ViroSound,
-  createMaterial,
-  createAnimation,
-  executeAnimation,
-  getMemoryStats,
-  performMemoryCleanup,
-} from "../index";
-
-export const ComprehensiveExample: React.FC = () => {
-  const [sceneActive, setSceneActive] = useState(false);
-  const [memoryStats, setMemoryStats] = useState<Record<string, any> | null>(
-    null
-  );
-  const [selectedObject, setSelectedObject] = useState<string | null>(null);
-
-  // Initialize materials and animations when component mounts
-  useEffect(() => {
-    // Create materials for different objects
-    createMaterial("redMaterial", {
-      diffuseColor: "#FF0000",
-      shininess: 2.0,
-      lightingModel: "Lambert",
-    });
-
-    createMaterial("blueMaterial", {
-      diffuseColor: "#0000FF",
-      shininess: 2.0,
-      lightingModel: "Lambert",
-    });
-
-    createMaterial("greenMaterial", {
-      diffuseColor: "#00FF00",
-      shininess: 2.0,
-      lightingModel: "Lambert",
-    });
-
-    createMaterial("textMaterial", {
-      diffuseColor: "#FFFFFF",
-      shininess: 1.0,
-      lightingModel: "Lambert",
-    });
-
-    createMaterial("imageMaterial", {
-      diffuseTexture: {
-        uri: "https://via.placeholder.com/512x512/FF6B6B/FFFFFF?text=Viro",
-      },
-      lightingModel: "Lambert",
-    });
-
-    // Create animations
-    createAnimation("spinAnimation", {
-      properties: {
-        rotateY: "+=360",
-      },
-      duration: 2000,
-      easing: "Linear",
-    });
-
-    createAnimation("pulseAnimation", {
-      properties: {
-        scaleX: 1.5,
-        scaleY: 1.5,
-        scaleZ: 1.5,
-      },
-      duration: 1000,
-      easing: "EaseInEaseOut",
-    });
-
-    createAnimation("bounceAnimation", {
-      properties: {
-        positionY: "+=0.5",
-      },
-      duration: 800,
-      easing: "Bounce",
-    });
-
-    createAnimation("colorChangeAnimation", {
-      properties: {
-        materialDiffuseColor: "#FFFF00",
-      },
-      duration: 1500,
-      easing: "EaseInEaseOut",
-    });
-  }, []);
-
-  // Handle scene initialization
-  const handleSceneInitialized = (success: boolean) => {
-    console.log("Scene initialized:", success);
-    setSceneActive(success);
-
-    if (success) {
-      Alert.alert("Success", "Comprehensive Viro scene initialized!");
-    } else {
-      Alert.alert("Error", "Failed to initialize Viro scene");
-    }
-  };
-
-  // Handle object interactions
-  const handleObjectClick = (objectName: string, objectType: string) => {
-    setSelectedObject(objectName);
-    Alert.alert(
-      "Object Clicked",
-      `${objectType} "${objectName}" was clicked!`,
-      [
-        {
-          text: "Spin",
-          onPress: () =>
-            executeAnimation(objectName, "spinAnimation", {
-              run: true,
-              loop: false,
-            }),
-        },
-        {
-          text: "Pulse",
-          onPress: () =>
-            executeAnimation(objectName, "pulseAnimation", {
-              run: true,
-              loop: false,
-            }),
-        },
-        {
-          text: "Bounce",
-          onPress: () =>
-            executeAnimation(objectName, "bounceAnimation", {
-              run: true,
-              loop: false,
-            }),
-        },
-        { text: "OK", style: "cancel" },
-      ]
-    );
-  };
-
-  const handleObjectHover = (objectName: string, isHovering: boolean) => {
-    console.log(`${objectName} hover:`, isHovering);
-    if (isHovering) {
-      executeAnimation(objectName, "pulseAnimation", {
-        run: true,
-        loop: false,
-      });
-    }
-  };
-
-  // Memory management
-  const checkMemoryStats = () => {
-    const stats = getMemoryStats();
-    setMemoryStats(stats);
-
-    if (stats) {
-      Alert.alert(
-        "Memory Statistics",
-        `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\n` +
-          `Textures: ${stats.textureCount || 0}\n` +
-          `Materials: ${stats.materialCount || 0}`
-      );
-    } else {
-      Alert.alert("Memory Stats", "Memory statistics not available");
-    }
-  };
-
-  const cleanupMemory = () => {
-    performMemoryCleanup();
-    Alert.alert("Memory Cleanup", "Memory cleanup performed successfully");
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Comprehensive Viro Example</Text>
-      <Text style={styles.subtitle}>
-        All Components • New Architecture • Complete Integration
-      </Text>
-
-      <View style={styles.controls}>
-        <Button
-          title="Memory Stats"
-          onPress={checkMemoryStats}
-          disabled={!sceneActive}
-        />
-        <Button
-          title="Cleanup"
-          onPress={cleanupMemory}
-          disabled={!sceneActive}
-        />
-      </View>
-
-      {selectedObject && (
-        <View style={styles.selection}>
-          <Text style={styles.selectionText}>Selected: {selectedObject}</Text>
-        </View>
-      )}
-
-      {memoryStats && (
-        <View style={styles.stats}>
-          <Text style={styles.statsTitle}>Memory Stats:</Text>
-          <Text>
-            Scenes: {memoryStats.totalScenes || 0} | Nodes:{" "}
-            {memoryStats.managedNodes || 0}
-          </Text>
-          <Text>
-            Memory: {memoryStats.usedMemoryMB?.toFixed(1) || "N/A"} MB
-          </Text>
-        </View>
-      )}
-
-      <ViroFabricContainer
-        style={styles.viroContainer}
-        debug={true}
-        arEnabled={false}
-        worldAlignment="Gravity"
-        onInitialized={handleSceneInitialized}
-        onMemoryWarning={(event) => {
-          Alert.alert(
-            "Memory Warning",
-            `Usage: ${event.memoryStats.usedMemoryMB?.toFixed(1)} MB`
-          );
-        }}
-      >
-        <ViroScene
-          onSceneLoadStart={() => console.log("Comprehensive scene loading...")}
-          onSceneLoadEnd={() => console.log("Comprehensive scene loaded!")}
-        >
-          {/* Lighting Setup */}
-          <ViroAmbientLight color="#404040" intensity={0.4} />
-          <ViroDirectionalLight
-            color="#FFFFFF"
-            direction={[0, -1, -0.2]}
-            intensity={1.0}
-            castsShadow={true}
-          />
-
-          {/* 3D Primitives Row */}
-          <ViroBox
-            position={[-2, 0, -4]}
-            scale={[0.4, 0.4, 0.4]}
-            materials={["redMaterial"]}
-            onClick={() => handleObjectClick("redBox", "Box")}
-            onHover={(isHovering) => handleObjectHover("redBox", isHovering)}
-            canClick={true}
-            canHover={true}
-          />
-
-          <ViroSphere
-            position={[0, 0, -4]}
-            radius={0.3}
-            materials={["blueMaterial"]}
-            onClick={() => handleObjectClick("blueSphere", "Sphere")}
-            onHover={(isHovering) =>
-              handleObjectHover("blueSphere", isHovering)
-            }
-            canClick={true}
-            canHover={true}
-          />
-
-          <ViroBox
-            position={[2, 0, -4]}
-            scale={[0.4, 0.4, 0.4]}
-            materials={["greenMaterial"]}
-            onClick={() => handleObjectClick("greenBox", "Box")}
-            onHover={(isHovering) => handleObjectHover("greenBox", isHovering)}
-            canClick={true}
-            canHover={true}
-          />
-
-          {/* Text Elements */}
-          <ViroText
-            text="Viro Fabric Interop"
-            position={[0, 1.5, -3]}
-            scale={[0.5, 0.5, 0.5]}
-            materials={["textMaterial"]}
-            fontSize={20}
-            fontWeight="bold"
-            textAlign="center"
-            onClick={() => handleObjectClick("titleText", "Text")}
-            canClick={true}
-          />
-
-          <ViroText
-            text="Click objects to interact!"
-            position={[0, -1.5, -3]}
-            scale={[0.3, 0.3, 0.3]}
-            materials={["textMaterial"]}
-            fontSize={16}
-            textAlign="center"
-            onClick={() => handleObjectClick("instructionText", "Text")}
-            canClick={true}
-          />
-
-          {/* Image and Quad */}
-          <ViroQuad
-            position={[-1.5, 1, -3]}
-            width={0.8}
-            height={0.8}
-            materials={["imageMaterial"]}
-            onClick={() => handleObjectClick("imageQuad", "Image Quad")}
-            canClick={true}
-          />
-
-          <ViroImage
-            position={[1.5, 1, -3]}
-            width={0.8}
-            height={0.8}
-            source={{
-              uri: "https://via.placeholder.com/512x512/4ECDC4/FFFFFF?text=Image",
-            }}
-            onClick={() => handleObjectClick("viroImage", "Image")}
-            canClick={true}
-          />
-
-          {/* Animated Objects */}
-          <ViroSphere
-            position={[0, 0.8, -2]}
-            radius={0.15}
-            materials={["redMaterial"]}
-            animation={{
-              name: "spinAnimation",
-              run: true,
-              loop: true,
-            }}
-            onClick={() => handleObjectClick("spinningOrb", "Spinning Orb")}
-            canClick={true}
-          />
-
-          {/* Sound (invisible but interactive) */}
-          <ViroSound
-            position={[0, 0, -3]}
-            source={{
-              uri: "https://www.soundjay.com/misc/sounds/bell-ringing-05.wav",
-            }}
-            paused={true}
-            volume={0.5}
-            onClick={() => {
-              Alert.alert("Sound", "Sound component clicked!");
-              // Note: Sound playback would be controlled through native props
-            }}
-            canClick={true}
-          />
-        </ViroScene>
-      </ViroFabricContainer>
-
-      <View style={styles.footer}>
-        <Text style={styles.footerText}>
-          Status: {sceneActive ? "Active" : "Loading..."}
-        </Text>
-        <Text style={styles.footerText}>
-          Components: Box • Sphere • Text • Image • Quad • Lights • Sound
-        </Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#f5f5f5",
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: "bold",
-    textAlign: "center",
-    marginTop: 20,
-    marginBottom: 5,
-    color: "#333",
-  },
-  subtitle: {
-    fontSize: 14,
-    textAlign: "center",
-    color: "#666",
-    marginBottom: 15,
-  },
-  controls: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    paddingHorizontal: 20,
-    marginBottom: 10,
-  },
-  selection: {
-    backgroundColor: "#4ECDC4",
-    margin: 10,
-    padding: 8,
-    borderRadius: 5,
-    alignItems: "center",
-  },
-  selectionText: {
-    color: "#fff",
-    fontWeight: "bold",
-  },
-  stats: {
-    backgroundColor: "#fff",
-    margin: 10,
-    padding: 10,
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: "#ddd",
-  },
-  statsTitle: {
-    fontWeight: "bold",
-    marginBottom: 5,
-    color: "#333",
-  },
-  viroContainer: {
-    flex: 1,
-    backgroundColor: "#000",
-  },
-  footer: {
-    backgroundColor: "#333",
-    padding: 10,
-  },
-  footerText: {
-    color: "#fff",
-    textAlign: "center",
-    fontSize: 12,
-  },
-});

package/fabric-interop/examples/SimpleARExample.tsx

@@ -1,95 +0,0 @@
-/**
- * SimpleARExample
- *
- * A simple example of using the Viro Fabric interop layer for AR.
- */
-
-import React, { useEffect } from "react";
-import {
-  ViroARSceneNavigator,
-  ViroARScene,
-  ViroBox,
-  ViroText,
-  ViroMaterials,
-  ViroARTrackingTargets,
-  ViroARImageMarker,
-} from "../components";
-
-// Register materials
-ViroMaterials.registerMaterials({
-  grid: {
-    diffuseColor: "#0000FF",
-    diffuseTexture: require("./assets/grid_bg.jpg"),
-  },
-  text: {
-    diffuseColor: "#FFFFFF",
-  },
-});
-
-// Register AR tracking targets
-ViroARTrackingTargets.registerTargets({
-  logo: {
-    source: require("./assets/viro_logo.png"),
-    orientation: "Up",
-    physicalWidth: 0.1, // 10cm
-  },
-});
-
-// Main AR scene component
-const ARScene = () => {
-  // Handle tracking state updates
-  const onTrackingUpdated = (state: { state: string; reason?: string }) => {
-    console.log("Tracking state updated:", state);
-  };
-
-  // Handle anchor found event
-  const onAnchorFound = () => {
-    console.log("Anchor found!");
-  };
-
-  return (
-    <ViroARScene onTrackingUpdated={onTrackingUpdated}>
-      {/* A simple 3D box floating 1 meter in front of the user */}
-      <ViroBox
-        position={[0, 0, -1]}
-        scale={[0.1, 0.1, 0.1]}
-        materials={["grid"]}
-      />
-
-      {/* Text above the box */}
-      <ViroText
-        text="Hello Viro!"
-        position={[0, 0.1, -1]}
-        scale={[0.1, 0.1, 0.1]}
-        color="#FFFFFF"
-        fontWeight="bold"
-        materials={["text"]}
-      />
-
-      {/* Image marker that places content when detected */}
-      <ViroARImageMarker target="logo" onAnchorFound={onAnchorFound}>
-        <ViroBox
-          position={[0, 0.1, 0]}
-          scale={[0.05, 0.05, 0.05]}
-          materials={["grid"]}
-        />
-      </ViroARImageMarker>
-    </ViroARScene>
-  );
-};
-
-// Main app component
-export const SimpleARExample = () => {
-  return (
-    <ViroARSceneNavigator
-      initialScene={{
-        scene: ARScene,
-      }}
-      style={{ flex: 1 }}
-      worldAlignment="Gravity"
-      planeDetection={{ horizontal: true, vertical: true }}
-    />
-  );
-};
-
-export default SimpleARExample;

package/fabric-interop/global.d.ts

@@ -1,14 +0,0 @@
-/**
- * Global type declarations for Viro Fabric Interop
- */
-
-declare global {
-  var registerViroEventCallback:
-    | ((callbackId: string, handler: any) => void)
-    | undefined;
-  var handleViroEvent:
-    | ((callbackId: string, eventData: any) => void)
-    | undefined;
-}
-
-export {};

package/fabric-interop/index.ts

@@ -1,107 +0,0 @@
-/**
- * Viro Fabric Interop Layer
- *
- * This module provides compatibility between React Native's New Architecture (Fabric)
- * and the existing Viro implementation without requiring codegen.
- */
-
-export * from "./ViroFabricContainer";
-
-// Export components explicitly to ensure they're found by validation
-export {
-  ViroNode,
-  ViroScene,
-  ViroARScene,
-  ViroFlexView,
-  ViroBox,
-  ViroSphere,
-  Viro3DObject,
-  ViroGeometry,
-  ViroQuad,
-  ViroPolygon,
-  ViroPolyline,
-  ViroSurface,
-  ViroText,
-  ViroImage,
-  ViroVideo,
-  ViroAnimatedImage,
-  Viro360Image,
-  Viro360Video,
-  ViroSkyBox,
-  ViroPortal,
-  ViroPortalScene,
-  ViroAmbientLight,
-  ViroDirectionalLight,
-  ViroSpotLight,
-  ViroOmniLight,
-  ViroLightingEnvironment,
-  ViroCamera,
-  ViroOrbitCamera,
-  ViroSound,
-  ViroSoundField,
-  ViroSpatialSound,
-  ViroButton,
-  ViroController,
-  ViroSpinner,
-  ViroParticleEmitter,
-  ViroAnimatedComponent,
-  ViroMaterialVideo,
-  ViroSceneNavigator,
-  ViroVRSceneNavigator,
-  ViroARSceneNavigator,
-  Viro3DSceneNavigator,
-  ViroARCamera,
-  ViroARPlane,
-  ViroARPlaneSelector,
-  ViroARImageMarker,
-  ViroARObjectMarker,
-  ViroAnimations,
-  ViroMaterials,
-  ViroARTrackingTargets,
-} from "./components";
-
-// Export utilities
-export * from "./components/ViroUtils";
-
-// Export specific functions from NativeViro to avoid conflicts
-export {
-  generateNodeId,
-  generateCallbackId,
-  handleViroEvent,
-  registerEventListener,
-  unregisterEventListener,
-  initializeViro,
-  createScene,
-  activateScene,
-  deactivateScene,
-  destroyScene,
-  getSceneState,
-  getMemoryStats,
-  performMemoryCleanup,
-  createNode,
-  updateNode,
-  deleteNode,
-  addChild,
-  removeChild,
-  createMaterial,
-  createAnimation,
-  setARPlaneDetection,
-  setARImageTargets,
-  isViroJSIAvailable,
-  type ViroNodeProps,
-  type ViroNodeType,
-  type ViroEventCallback,
-} from "./NativeViro";
-
-// Re-export executeAnimation and updateMaterial with different names to avoid conflicts
-export {
-  executeAnimation as executeNativeAnimation,
-  updateMaterial as updateNativeMaterial,
-} from "./NativeViro";
-
-// Also export the original names for backward compatibility
-export { executeAnimation, updateMaterial } from "./NativeViro";
-
-// Export event management utilities
-export { default as ViroEventsManager } from "./ViroEventsManager";
-export type { Spec as ViroEventsTurboModuleSpec } from "./specs/ViroEventsTurboModule";

package/fabric-interop/metro.config.js

@@ -1,12 +0,0 @@
-const { getDefaultConfig } = require("expo/metro-config");
-
-/** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(__dirname);
-
-// Add resolver for fabric-interop
-config.resolver.platforms = ["ios", "android"];
-
-// Make sure to include the parent directory for proper resolution
-config.watchFolders = [__dirname, "../ios", "../android"];
-
-module.exports = config;

package/fabric-interop/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "@reactvision/viro-fabric",
-  "version": "1.0.0",
-  "description": "Fabric interop layer for ReactVision",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsc",
-    "validate": "node scripts/validate-build.js",
-    "postbuild": "npm run validate",
-    "prepare": "npm run build"
-  },
-  "keywords": [
-    "react-native",
-    "viro",
-    "ar",
-    "vr",
-    "fabric",
-    "new-architecture"
-  ],
-  "author": "ReactVision",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-native": ">=0.74.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-native": "^0.74.0",
-    "typescript": "^5.0.0"
-  },
-  "files": [
-    "dist",
-    "ios",
-    "android",
-    "README.md",
-    "LICENSE"
-  ]
-}