@reactvision/react-viro 2.42.0 → 2.43.1

package/README.md

@@ -1,6 +1,6 @@
 <p align="center" style="background-color: #CCCCCC;">
-  <a href="https://www.reactvision.org/">
-    <img src="../viro/public/icons/NVLogo.png">
+  <a href="https://www.reactvision.xyz/">
+    <img src="https://jjhxsdfjbcyrgmbjocnp.supabase.co/storage/v1/object/public/Downloads/ReactVision/rv-logo-icon.png" alt="react vision logo" width="120px" height="120px">
   </a>
 </p>
 
@@ -25,7 +25,7 @@ ViroReact is a library for developers to rapidly build augmented reality (AR) an
 
 # Documentation
 
-[Documentation can be found here!](https://viro-community.readme.io/docs/overview). Currently, the documentation has some issues with code samples and broken links. If you would like to help fix these issues, either submit an edit or [get in touch](https://discord.gg/H3ksm5NhzT)!
+[Documentation can be found here](https://viro-community.readme.io/docs/overview). While we do our best to keep all documentation up to date you may come across issues with broken links or outdated code samples If you do come across any issues please do let us know by either submitting an edit or [get in touch on Discord.](https://discord.gg/H3ksm5NhzT)
 
 ## Getting Started
 
@@ -37,19 +37,25 @@ If you are starting a fresh project with ViroReact, consider cloning one of our
 
 # Examples
 
-See our [Example projects](https://viro-community.readme.io/docs/examples) page. These are a little old (~2019) but are a great reference point for how to use bits of the library.
+Check out the [examples](./examples) directory for sample code demonstrating how to use ViroReact with automatic architecture detection and other features.
+
+You can also see our [Example projects](https://viro-community.readme.io/docs/examples) page. These are a little old (~2019) but are a great reference point for how to use bits of the library.
 
 # Need help? Or want to contribute?
 
+Whether you're looking for support with building your AR or VR application or you want to contribute to ViroReact, the best way to contact our team is via Discord. If you need more hands-on support with a project, you can visit our documentation site, where we have a [list of trusted partners whom you can hire to help with your project](https://viro-community.readme.io/docs/hire-a-viro-react-expert).
+
 <a href="https://discord.gg/H3ksm5NhzT">
    <img src="https://discordapp.com/api/guilds/774471080713781259/widget.png?style=banner2" alt="Discord Banner 2"/>
 </a>
 
 # A little history...
 
-ViroReact was originaly developed by the [Viro Media](http://www.viromedia.com/) company, but was open sourced in 2019. In late 2020 the Viro Community was formed to help maintain and move the project onwards, updating it so it could run with modern versions of react native, and start to add in new features. ReactVision now focuses on the project full time making sure the codebase is updated and ready for the future of XR / Spatial Computing.
+ViroReact was originally developed by the [Viro Media](http://www.viromedia.com/), but was open-sourced in 2019. In late 2020, the Viro Community was formed to help maintain and move the project onwards, updating it so it could run with modern versions of React Native, and start to add in new features.
+
+Following years of support, in 2025, [Morrow acquired ReactVision](https://www.themorrow.digital/blog/morrow-acquires-reactvision-and-viroreact-library) to help accelerate its development and give it the resources needed to enable ReactVision to capture the rapidly growing demand for ViroReact. ReactVision now has a team working full-time to help ensure the codebase is updated and ready for the future of XR / Spatial Computing. Our vision is to enable React Native developers to build AR and VR applications that can run across all XR devices (smartphones, smart glasses, and headsets) off of a single React Native codebase.
 
-We, as a community, owe a great debt to Viro Media and the people who developed this library originally. We hope to make them proud as it continues to develop and grow in the Viro Community.
+We, as a community, owe a great debt to Viro Media and the people who developed this library originally. We hope to make them proud as it continues to develop and grow within ReactVision.
 
 # Supporters
 

package/components/AR/ViroARPlaneSelector.tsx

@@ -68,52 +68,91 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
   }
 
   _getARPlanes() {
-    if (this.state.selectedSurface == -1) {
-      let arPlanes: JSX.Element[] = [];
-      let numPlanes = this.props.maxPlanes || _maxPlanes;
-      for (let i = 0; i < numPlanes; i++) {
-        let foundARPlane = this.state.foundARPlanes[i];
-        let surfaceWidth = foundARPlane ? foundARPlane.width : 0;
-        let surfaceHeight = foundARPlane ? foundARPlane.height : 0;
-        let surfacePosition = foundARPlane ? foundARPlane.center : [0, 0, 0];
-        arPlanes.push(
-          <ViroARPlane
-            key={_planePrefix + i}
-            minWidth={this.props.minWidth}
-            minHeight={this.props.minHeight}
-            alignment={this.props.alignment}
-            onAnchorUpdated={this._onARPlaneUpdated(i)}
-          >
-            <ViroQuad
-              materials={"ViroARPlaneSelector_Translucent"}
-              onClickState={(clickState, position, source) =>
-                this._getOnClickSurface(i, { clickState, position, source })
-              }
-              position={surfacePosition}
-              width={surfaceWidth}
-              height={surfaceHeight}
-              rotation={[-90, 0, 0]}
-            />
-          </ViroARPlane>
-        );
-      }
-      return arPlanes;
-    } else {
-      return (
+    // Always render a fixed number of planes, controlling visibility instead of conditional rendering
+    let arPlanes: JSX.Element[] = [];
+    let numPlanes = this.props.maxPlanes || _maxPlanes;
+
+    // Create all plane slots (both detected and placeholder)
+    for (let i = 0; i < numPlanes; i++) {
+      // Determine if this is the selected plane
+      const isSelected = this.state.selectedSurface === i;
+
+      // Get real plane data if available, or use defaults
+      const foundARPlane = this.state.foundARPlanes[i];
+      const hasPlaneData = !!foundARPlane;
+
+      // Extract plane data or use defaults
+      const surfaceWidth = hasPlaneData ? foundARPlane.width || 0.5 : 0.5;
+      const surfaceHeight = hasPlaneData ? foundARPlane.height || 0.5 : 0.5;
+      const surfacePosition = hasPlaneData
+        ? foundARPlane.center || [0, 0, 0]
+        : [0, 0, 0];
+      const anchorId = hasPlaneData
+        ? (foundARPlane as any).anchorId
+        : undefined;
+
+      // Determine visibility based on selection state
+      // - In selection mode (selectedSurface === -1): show all planes
+      // - In selected mode: only show the selected plane
+      const isVisible = this.state.selectedSurface === -1 || isSelected;
+
+      arPlanes.push(
         <ViroARPlane
-          key={_planePrefix + this.state.selectedSurface}
-          {...this.props}
-        ></ViroARPlane>
+          key={_planePrefix + i}
+          minWidth={this.props.minWidth || 0.5}
+          minHeight={this.props.minHeight || 0.5}
+          alignment={this.props.alignment}
+          anchorId={anchorId}
+          onAnchorFound={(anchor) => {
+            // If we find an anchor, update our plane data
+            this._onARPlaneUpdated(i)(anchor);
+          }}
+          onAnchorUpdated={this._onARPlaneUpdated(i)}
+        >
+          {/* Always render both the quad and children, controlling only visibility */}
+          <ViroQuad
+            materials={"ViroARPlaneSelector_Translucent"}
+            onClickState={(clickState, position, source) =>
+              this._getOnClickSurface(i, { clickState, position, source })
+            }
+            position={surfacePosition}
+            width={surfaceWidth}
+            height={surfaceHeight}
+            rotation={[-90, 0, 0]}
+            opacity={isSelected ? 0 : isVisible ? 1 : 0}
+          />
+
+          {/* Wrap children in a ViroNode to control visibility if children exist */}
+          {this.props.children && (
+            <ViroNode opacity={isSelected ? 1 : 0}>
+              {this.props.children}
+            </ViroNode>
+          )}
+        </ViroARPlane>
       );
     }
+
+    return arPlanes;
   }
 
   _getOnClickSurface = (index: number, event: ViroClickStateEvent) => {
     if (event.clickState < 3) {
       return;
     }
-    this.setState({ selectedSurface: index });
-    this._onPlaneSelected(this.state.foundARPlanes[index]);
+
+    // Get the plane data before updating state to avoid race conditions
+    const selectedPlane = this.state.foundARPlanes[index];
+    if (!selectedPlane) {
+      console.warn(
+        "ViroARPlaneSelector: Cannot select plane - plane data not found"
+      );
+      return;
+    }
+
+    // Update state and call callback with the captured data
+    this.setState({ selectedSurface: index }, () => {
+      this._onPlaneSelected(selectedPlane);
+    });
   };
 
   _onARPlaneUpdated = (index: number) => {

package/components/Utilities/ViroVersion.ts

@@ -1 +1 @@
-export const VIRO_VERSION = "2.42.0";
+export const VIRO_VERSION = "2.43.1";

package/dist/components/AR/ViroARPlaneSelector.d.ts

@@ -37,7 +37,7 @@ export declare class ViroARPlaneSelector extends React.Component<Props, State> {
         arPlaneSizes: number[];
     };
     render(): React.JSX.Element;
-    _getARPlanes(): React.JSX.Element | JSX.Element[];
+    _getARPlanes(): JSX.Element[];
     _getOnClickSurface: (index: number, event: ViroClickStateEvent) => void;
     _onARPlaneUpdated: (index: number) => (updateMap: ViroPlaneUpdatedMap) => void;
     _onPlaneSelected: (updateMap: ViroPlaneUpdatedMap) => void;

package/dist/components/AR/ViroARPlaneSelector.js

@@ -69,30 +69,58 @@ class ViroARPlaneSelector extends React.Component {
         return <ViroNode_1.ViroNode>{this._getARPlanes()}</ViroNode_1.ViroNode>;
     }
     _getARPlanes() {
-        if (this.state.selectedSurface == -1) {
-            let arPlanes = [];
-            let numPlanes = this.props.maxPlanes || _maxPlanes;
-            for (let i = 0; i < numPlanes; i++) {
-                let foundARPlane = this.state.foundARPlanes[i];
-                let surfaceWidth = foundARPlane ? foundARPlane.width : 0;
-                let surfaceHeight = foundARPlane ? foundARPlane.height : 0;
-                let surfacePosition = foundARPlane ? foundARPlane.center : [0, 0, 0];
-                arPlanes.push(<ViroARPlane_1.ViroARPlane key={_planePrefix + i} minWidth={this.props.minWidth} minHeight={this.props.minHeight} alignment={this.props.alignment} onAnchorUpdated={this._onARPlaneUpdated(i)}>
-            <ViroQuad_1.ViroQuad materials={"ViroARPlaneSelector_Translucent"} onClickState={(clickState, position, source) => this._getOnClickSurface(i, { clickState, position, source })} position={surfacePosition} width={surfaceWidth} height={surfaceHeight} rotation={[-90, 0, 0]}/>
-          </ViroARPlane_1.ViroARPlane>);
-            }
-            return arPlanes;
-        }
-        else {
-            return (<ViroARPlane_1.ViroARPlane key={_planePrefix + this.state.selectedSurface} {...this.props}></ViroARPlane_1.ViroARPlane>);
+        // Always render a fixed number of planes, controlling visibility instead of conditional rendering
+        let arPlanes = [];
+        let numPlanes = this.props.maxPlanes || _maxPlanes;
+        // Create all plane slots (both detected and placeholder)
+        for (let i = 0; i < numPlanes; i++) {
+            // Determine if this is the selected plane
+            const isSelected = this.state.selectedSurface === i;
+            // Get real plane data if available, or use defaults
+            const foundARPlane = this.state.foundARPlanes[i];
+            const hasPlaneData = !!foundARPlane;
+            // Extract plane data or use defaults
+            const surfaceWidth = hasPlaneData ? foundARPlane.width || 0.5 : 0.5;
+            const surfaceHeight = hasPlaneData ? foundARPlane.height || 0.5 : 0.5;
+            const surfacePosition = hasPlaneData
+                ? foundARPlane.center || [0, 0, 0]
+                : [0, 0, 0];
+            const anchorId = hasPlaneData
+                ? foundARPlane.anchorId
+                : undefined;
+            // Determine visibility based on selection state
+            // - In selection mode (selectedSurface === -1): show all planes
+            // - In selected mode: only show the selected plane
+            const isVisible = this.state.selectedSurface === -1 || isSelected;
+            arPlanes.push(<ViroARPlane_1.ViroARPlane key={_planePrefix + i} minWidth={this.props.minWidth || 0.5} minHeight={this.props.minHeight || 0.5} alignment={this.props.alignment} anchorId={anchorId} onAnchorFound={(anchor) => {
+                    // If we find an anchor, update our plane data
+                    this._onARPlaneUpdated(i)(anchor);
+                }} onAnchorUpdated={this._onARPlaneUpdated(i)}>
+          {/* Always render both the quad and children, controlling only visibility */}
+          <ViroQuad_1.ViroQuad materials={"ViroARPlaneSelector_Translucent"} onClickState={(clickState, position, source) => this._getOnClickSurface(i, { clickState, position, source })} position={surfacePosition} width={surfaceWidth} height={surfaceHeight} rotation={[-90, 0, 0]} opacity={isSelected ? 0 : isVisible ? 1 : 0}/>
+
+          {/* Wrap children in a ViroNode to control visibility if children exist */}
+          {this.props.children && (<ViroNode_1.ViroNode opacity={isSelected ? 1 : 0}>
+              {this.props.children}
+            </ViroNode_1.ViroNode>)}
+        </ViroARPlane_1.ViroARPlane>);
         }
+        return arPlanes;
     }
     _getOnClickSurface = (index, event) => {
         if (event.clickState < 3) {
             return;
         }
-        this.setState({ selectedSurface: index });
-        this._onPlaneSelected(this.state.foundARPlanes[index]);
+        // Get the plane data before updating state to avoid race conditions
+        const selectedPlane = this.state.foundARPlanes[index];
+        if (!selectedPlane) {
+            console.warn("ViroARPlaneSelector: Cannot select plane - plane data not found");
+            return;
+        }
+        // Update state and call callback with the captured data
+        this.setState({ selectedSurface: index }, () => {
+            this._onPlaneSelected(selectedPlane);
+        });
     };
     _onARPlaneUpdated = (index) => {
         return (updateMap) => {

package/dist/components/Utilities/ViroVersion.d.ts

@@ -1 +1 @@
-export declare const VIRO_VERSION = "2.42.0";
+export declare const VIRO_VERSION = "2.43.1";

package/dist/components/Utilities/ViroVersion.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VIRO_VERSION = void 0;
-exports.VIRO_VERSION = "2.42.0";
+exports.VIRO_VERSION = "2.43.1";

package/dist/dynamic-index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Viro React Native - New Architecture Required
+ *
+ * This library requires React Native's New Architecture (Fabric) to be enabled.
+ * Legacy architecture support has been removed as of version 2.43.1.
+ */
+declare global {
+    var nativeFabricUIManager: any;
+    var __turboModuleProxy: any;
+}
+export {};

package/dist/dynamic-index.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+ * Viro React Native - New Architecture Required
+ *
+ * This library requires React Native's New Architecture (Fabric) to be enabled.
+ * Legacy architecture support has been removed as of version 2.43.1.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// Strict New Architecture validation
+function validateNewArchitecture() {
+    // Check for New Architecture indicators
+    const hasFabricUIManager = !!global.nativeFabricUIManager;
+    const hasTurboModules = !!global.__turboModuleProxy;
+    if (!hasFabricUIManager && !hasTurboModules) {
+        throw new Error("ViroReact: New Architecture (Fabric) is required but not detected.\n\n" +
+            "This library requires React Native 0.76.9+ with New Architecture enabled.\n" +
+            "Please enable New Architecture in your app:\n\n" +
+            "1. Set 'newArchEnabled=true' in android/gradle.properties\n" +
+            "2. Set 'RCT_NEW_ARCH_ENABLED=1' in ios/.xcode.env\n" +
+            "3. Ensure you're using React Native 0.76.9 or higher\n\n" +
+            "For more information, visit: https://reactnative.dev/docs/new-architecture-intro");
+    }
+    console.log("ViroReact: New Architecture (Fabric) detected ✓");
+}
+// Validate New Architecture on module load
+validateNewArchitecture();
+// Export fabric-interop components directly
+module.exports = require("./fabric-interop");

package/dist/examples/AutoDetectionExample.d.ts

@@ -0,0 +1,10 @@
+/**
+ * AutoDetectionExample
+ *
+ * This example demonstrates how to use ViroReact with automatic architecture detection.
+ * The library will automatically detect whether your app is using the New Architecture (Fabric)
+ * and use the appropriate implementation.
+ */
+import React from "react";
+declare const AutoDetectionExample: () => React.JSX.Element;
+export default AutoDetectionExample;

package/dist/examples/AutoDetectionExample.js

@@ -0,0 +1,91 @@
+"use strict";
+/**
+ * AutoDetectionExample
+ *
+ * This example demonstrates how to use ViroReact with automatic architecture detection.
+ * The library will automatically detect whether your app is using the New Architecture (Fabric)
+ * and use the appropriate implementation.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_viro_1 = require("@reactvision/react-viro");
+// Define the AR scene component
+const ARScene = () => {
+    const [text, setText] = react_1.default.useState("Initializing AR...");
+    // Handle tracking state updates
+    const onTrackingUpdated = (state) => {
+        if (state.state === react_viro_1.ViroTrackingStateConstants.TRACKING_NORMAL) {
+            setText("Hello Viro!");
+        }
+        else if (state.state === react_viro_1.ViroTrackingStateConstants.TRACKING_NONE) {
+            setText("Tracking lost. Please point the camera at a flat surface.");
+        }
+    };
+    return (<react_viro_1.ViroARScene onTrackingUpdated={onTrackingUpdated}>
+      {/* A simple 3D box floating 1 meter in front of the user */}
+      <react_viro_1.ViroBox position={[0, 0, -1]} scale={[0.1, 0.1, 0.1]} materials={["grid"]}/>
+
+      {/* Text above the box */}
+      <react_viro_1.ViroText text={text} position={[0, 0.1, -1]} scale={[0.1, 0.1, 0.1]} style={{ color: "#ffffff", fontWeight: "bold", textAlign: "center" }}/>
+    </react_viro_1.ViroARScene>);
+};
+// Main app component
+const AutoDetectionExample = () => {
+    const [arStarted, setArStarted] = react_1.default.useState(false);
+    const startAR = () => {
+        setArStarted(true);
+    };
+    if (arStarted) {
+        return (<react_viro_1.ViroARSceneNavigator initialScene={{
+                scene: ARScene,
+            }} style={styles.arView}/>);
+    }
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.Text style={styles.title}>ViroReact Auto-Detection Example</react_native_1.Text>
+      <react_native_1.Text style={styles.description}>
+        This example uses the automatic architecture detection feature. The
+        library will automatically use the appropriate implementation based on
+        whether your app has the New Architecture enabled.
+      </react_native_1.Text>
+      <react_native_1.TouchableOpacity style={styles.button} onPress={startAR}>
+        <react_native_1.Text style={styles.buttonText}>Start AR</react_native_1.Text>
+      </react_native_1.TouchableOpacity>
+    </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 20,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: "bold",
+        marginBottom: 20,
+    },
+    description: {
+        fontSize: 16,
+        textAlign: "center",
+        marginBottom: 30,
+    },
+    button: {
+        backgroundColor: "#1E88E5",
+        paddingHorizontal: 30,
+        paddingVertical: 15,
+        borderRadius: 8,
+    },
+    buttonText: {
+        color: "white",
+        fontSize: 18,
+        fontWeight: "bold",
+    },
+    arView: {
+        flex: 1,
+    },
+});
+exports.default = AutoDetectionExample;

package/dist/fabric-interop/NativeViro.d.ts

@@ -0,0 +1,42 @@
+/**
+ * NativeViro - JSI Bridge Functions
+ *
+ * This module provides direct JSI functions to communicate with the native Viro implementation.
+ * These functions bypass the React Native bridge and codegen, providing direct access to
+ * the existing native implementation.
+ */
+export type ViroNodeProps = Record<string, any>;
+export type ViroNodeType = "box" | "sphere" | "text" | "image" | "animatedImage" | "animatedComponent" | "object" | "scene" | "arScene" | "camera" | "arCamera" | "orbitCamera" | "light" | "ambientLight" | "directionalLight" | "spotLight" | "omniLight" | "sound" | "soundField" | "spatialSound" | "video" | "materialVideo" | "portal" | "portalScene" | "plane" | "arPlane" | "arImageMarker" | "arObjectMarker" | "quad" | "polygon" | "polyline" | "geometry" | "particle" | "flexView" | "surface" | "360Image" | "360Video" | "skyBox" | "lightingEnvironment" | "button" | "controller" | "node";
+export type ViroEventCallback = (event: any) => void;
+export declare const generateNodeId: () => string;
+export declare const generateCallbackId: () => string;
+export declare function handleViroEvent(callbackId: string, event: any): void;
+export declare function registerEventListener(nodeId: string, eventName: string, callback: ViroEventCallback): string;
+export declare function unregisterEventListener(nodeId: string, eventName: string, callbackId: string): void;
+export declare function initializeViro(config?: {
+    debug?: boolean;
+    arEnabled?: boolean;
+    worldAlignment?: string;
+}): Promise<boolean>;
+export declare function createScene(sceneId: string, sceneType: string, props?: ViroNodeProps): void;
+export declare function activateScene(sceneId: string): void;
+export declare function deactivateScene(sceneId: string): void;
+export declare function destroyScene(sceneId: string): void;
+export declare function getSceneState(sceneId: string): string | null;
+export declare function getMemoryStats(): Record<string, any> | null;
+export declare function performMemoryCleanup(): void;
+export declare function createNode(nodeId: string, nodeType: ViroNodeType, props?: ViroNodeProps): void;
+export declare function updateNode(nodeId: string, props: ViroNodeProps): void;
+export declare function deleteNode(nodeId: string): void;
+export declare function addChild(parentId: string, childId: string): void;
+export declare function removeChild(parentId: string, childId: string): void;
+export declare function createMaterial(materialName: string, properties: Record<string, any>): void;
+export declare function updateMaterial(materialName: string, properties: Record<string, any>): void;
+export declare function createAnimation(animationName: string, properties: Record<string, any>): void;
+export declare function executeAnimation(nodeId: string, animationName: string, options?: Record<string, any>): void;
+export declare function setARPlaneDetection(config: {
+    enabled?: boolean;
+    alignment?: string;
+}): void;
+export declare function setARImageTargets(targets: Record<string, any>): void;
+export declare function isViroJSIAvailable(): boolean;