@reactvision/react-viro 2.41.6 → 2.43.0

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/AR/ViroARScene.tsx

@@ -47,7 +47,7 @@ import { ViroBase } from "../ViroBase";
 import { ViroCamera } from "../ViroCamera";
 import { ViroTrackingStateConstants } from "../ViroConstants";
 import { ViroCommonProps } from "./ViroCommonProps";
-import { ViroTelemetry } from "../Telemetry/ViroTelemetry";
+import { ViroOrbitCamera } from "components/ViroOrbitCamera";
 
 const ViroCameraModule = NativeModules.ViroCameraModule;
 
@@ -394,7 +394,7 @@ export class ViroARScene extends ViroBase<Props> {
     return (
       <ViroSceneContext.Provider
         value={{
-          cameraDidMount: (camera: ViroCamera) => {
+          cameraDidMount: (camera: ViroCamera | ViroOrbitCamera) => {
             if (camera.props.active) {
               NativeModules.VRTCameraModule.setSceneCamera(
                 findNodeHandle(this),
@@ -402,7 +402,7 @@ export class ViroARScene extends ViroBase<Props> {
               );
             }
           },
-          cameraWillUnmount: (camera: ViroCamera) => {
+          cameraWillUnmount: (camera: ViroCamera | ViroOrbitCamera) => {
             if (camera.props.active) {
               NativeModules.VRTCameraModule.removeSceneCamera(
                 findNodeHandle(this),
@@ -410,7 +410,10 @@ export class ViroARScene extends ViroBase<Props> {
               );
             }
           },
-          cameraDidUpdate: (camera: ViroCamera, active: boolean) => {
+          cameraDidUpdate: (
+            camera: ViroCamera | ViroOrbitCamera,
+            active: boolean
+          ) => {
             if (active) {
               NativeModules.VRTCameraModule.setSceneCamera(
                 findNodeHandle(this),

package/components/AR/ViroARSceneNavigator.tsx

@@ -27,7 +27,7 @@ import {
   ViroScene,
   ViroSceneDictionary,
 } from "../Types/ViroUtils";
-import { ViroTelemetry } from "../Telemetry/ViroTelemetry";
+
 
 const ViroARSceneNavigatorModule = NativeModules.VRTARSceneNavigatorModule;
 
@@ -80,7 +80,6 @@ export class ViroARSceneNavigator extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    ViroTelemetry.recordTelemetry("INIT", { ar: true });
     let initialSceneTag = this.props.initialSceneKey;
     if (initialSceneTag == null) {
       initialSceneTag = this.getRandomTag();

package/components/Utilities/ViroVersion.ts

@@ -1 +1 @@
-export const VIRO_VERSION = "2.41.6";
+export const VIRO_VERSION = "2.43.0";

package/components/Viro3DSceneNavigator.tsx

@@ -25,7 +25,7 @@ import {
   ViroSceneDictionary,
 } from "./Types/ViroUtils";
 import { ViroScene } from "./ViroScene";
-import { ViroTelemetry } from "./Telemetry/ViroTelemetry";
+
 const Viro3DSceneNavigatorModule = NativeModules.VRT3DSceneNavigatorModule;
 
 var mathRandomOffset = 0;

package/components/ViroCamera.tsx

@@ -46,6 +46,7 @@ type State = {
 export class ViroCamera extends React.Component<Props, State> {
   _component: any;
   static contextType?: React.Context<any> | undefined = ViroSceneContext;
+  declare context: React.ContextType<typeof ViroSceneContext>;
 
   componentDidMount() {
     this.context.cameraDidMount(this);

package/components/ViroOrbitCamera.tsx

@@ -29,6 +29,7 @@ export class ViroOrbitCamera extends React.Component<Props> {
   _component: ViroNativeRef = null;
 
   static contextType?: React.Context<any> | undefined = ViroSceneContext;
+  declare context: React.ContextType<typeof ViroSceneContext>;
 
   componentDidMount() {
     this.context.cameraDidMount(this);

package/components/ViroScene.tsx

@@ -31,6 +31,7 @@ import {
 import { ViroBase } from "./ViroBase";
 import { ViroCamera } from "./ViroCamera";
 import { ViroSceneContext } from "./ViroSceneContext";
+import { ViroOrbitCamera } from "./ViroOrbitCamera";
 
 type Props = ViroCommonProps & {
   onPlatformUpdate?: (platformInfo: ViroPlatformInfo) => void;
@@ -185,7 +186,7 @@ export class ViroScene extends ViroBase<Props> {
     return (
       <ViroSceneContext.Provider
         value={{
-          cameraDidMount: (camera: ViroCamera) => {
+          cameraDidMount: (camera: ViroCamera | ViroOrbitCamera) => {
             if (camera.props.active) {
               NativeModules.VRTCameraModule.setSceneCamera(
                 findNodeHandle(this),
@@ -193,7 +194,7 @@ export class ViroScene extends ViroBase<Props> {
               );
             }
           },
-          cameraWillUnmount: (camera: ViroCamera) => {
+          cameraWillUnmount: (camera: ViroCamera | ViroOrbitCamera) => {
             if (camera.props.active) {
               NativeModules.VRTCameraModule.removeSceneCamera(
                 findNodeHandle(this),
@@ -201,7 +202,10 @@ export class ViroScene extends ViroBase<Props> {
               );
             }
           },
-          cameraDidUpdate: (camera: ViroCamera, active: boolean) => {
+          cameraDidUpdate: (
+            camera: ViroCamera | ViroOrbitCamera,
+            active: boolean
+          ) => {
             if (active) {
               NativeModules.VRTCameraModule.setSceneCamera(
                 findNodeHandle(this),

package/components/ViroSceneContext.tsx

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { ViroCamera } from "./ViroCamera";
+import { ViroOrbitCamera } from "./ViroOrbitCamera";
 
 export const ViroSceneContext = React.createContext({
-  cameraDidMount: (camera: ViroCamera) => {
+  cameraDidMount: (camera: ViroCamera | ViroOrbitCamera) => {
     console.log("ViroSceneContext.cameraDidMount: " + camera);
   },
-  cameraWillUnmount: (camera: ViroCamera) => {
+  cameraWillUnmount: (camera: ViroCamera | ViroOrbitCamera) => {
     console.log("ViroSceneContext.cameraWillUnmount: " + camera);
   },
-  cameraDidUpdate: (camera: ViroCamera, active: boolean) => {
+  cameraDidUpdate: (camera: ViroCamera | ViroOrbitCamera, active: boolean) => {
     console.log(
       "ViroSceneContext.cameraDidUpdate: " + camera + " active: " + active
     );

package/components/ViroSceneNavigator.tsx

@@ -25,7 +25,7 @@ import { ViroExitViroEvent } from "./Types/ViroEvents";
 import { Viro3DPoint } from "./Types/ViroUtils";
 import { ViroSceneDictionary } from "./Types/ViroUtils";
 import { ViroScene } from "./ViroScene";
-import { ViroTelemetry } from "./Telemetry/ViroTelemetry";
+
 var ViroSceneNavigatorModule = NativeModules.VRTSceneNavigatorModule;
 
 var mathRandomOffset = 0;

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

@@ -3,5 +3,5 @@ import { ViewProps } from "react-native";
 import { ViroCamera } from "../ViroCamera";
 export declare class ViroARCamera extends React.Component<ViewProps> {
     _component: ViroCamera | null;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/dist/components/AR/ViroARCamera.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViroARCamera = void 0;
 const React = __importStar(require("react"));

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

@@ -8,7 +8,7 @@
  *
  * @providesModule ViroARImageMarker
  */
-/// <reference types="react" />
+import * as React from "react";
 import { NativeSyntheticEvent } from "react-native";
 import { ViroARAnchorFoundEvent, ViroARAnchorRemovedEvent, ViroARAnchorUpdatedEvent } from "../Types/ViroEvents";
 import { ViroBase } from "../ViroBase";
@@ -19,5 +19,5 @@ export declare class ViroARImageMarker extends ViroBase<{}> {
     _onAnchorFound: (event: NativeSyntheticEvent<ViroARAnchorFoundEvent>) => void;
     _onAnchorUpdated: (event: NativeSyntheticEvent<ViroARAnchorUpdatedEvent>) => void;
     _onAnchorRemoved: (_event: NativeSyntheticEvent<ViroARAnchorRemovedEvent>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/dist/components/AR/ViroARImageMarker.js

@@ -25,13 +25,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViroARImageMarker = void 0;
 const React = __importStar(require("react"));

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

@@ -8,8 +8,8 @@
  *
  * @providesModule ViroARObjectMarker
  */
-/// <reference types="react" />
 import { ViroBase } from "../ViroBase";
+import * as React from "react";
 import { NativeSyntheticEvent } from "react-native";
 import { ViroARAnchorFoundEvent, ViroARAnchorRemovedEvent, ViroARAnchorUpdatedEvent } from "../Types/ViroEvents";
 type Props = {};
@@ -20,6 +20,6 @@ export declare class ViroARObjectMarker extends ViroBase<Props> {
     _onAnchorFound(event: NativeSyntheticEvent<ViroARAnchorFoundEvent>): void;
     _onAnchorUpdated(event: NativeSyntheticEvent<ViroARAnchorUpdatedEvent>): void;
     _onAnchorRemoved(_event: NativeSyntheticEvent<ViroARAnchorRemovedEvent>): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/components/AR/ViroARObjectMarker.js

@@ -25,13 +25,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViroARObjectMarker = void 0;
 const ViroBase_1 = require("../ViroBase");

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

@@ -8,9 +8,9 @@
  *
  * @providesModule ViroARPlane
  */
-/// <reference types="react" />
 import { ViroARAnchorFoundEvent, ViroARAnchorRemovedEvent, ViroARAnchorUpdatedEvent } from "../Types/ViroEvents";
 import { ViroBase } from "../ViroBase";
+import * as React from "react";
 import { NativeSyntheticEvent } from "react-native";
 type Props = {
     anchorId?: string;
@@ -25,6 +25,6 @@ export declare class ViroARPlane extends ViroBase<Props> {
     _onAnchorFound: (event: NativeSyntheticEvent<ViroARAnchorFoundEvent>) => void;
     _onAnchorUpdated: (event: NativeSyntheticEvent<ViroARAnchorUpdatedEvent>) => void;
     _onAnchorRemoved: (_event: NativeSyntheticEvent<ViroARAnchorRemovedEvent>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/components/AR/ViroARPlane.js

@@ -25,13 +25,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViroARPlane = void 0;
 const ViroBase_1 = require("../ViroBase");

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

@@ -33,11 +33,11 @@ export declare class ViroARPlaneSelector extends React.Component<Props, State> {
     _component: ViroNativeRef;
     state: {
         selectedSurface: number;
-        foundARPlanes: any[];
+        foundARPlanes: ViroARPlaneType[];
         arPlaneSizes: number[];
     };
-    render(): JSX.Element;
-    _getARPlanes(): JSX.Element | JSX.Element[];
+    render(): React.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

@@ -25,13 +25,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViroARPlaneSelector = void 0;
 const React = __importStar(require("react"));
@@ -59,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/AR/ViroARScene.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { NativeSyntheticEvent } from "react-native";
 import { ViroAmbientLightInfo, ViroAmbientLightUpdateEvent, ViroARAnchorFoundEvent, ViroARAnchorRemovedEvent, ViroARAnchorUpdatedEvent, ViroARPointCloud, ViroARPointCloudUpdateEvent, ViroCameraARHitTest, ViroCameraARHitTestEvent, ViroCameraTransform, ViroCameraTransformEvent, ViroPlatformInfo, ViroPlatformUpdateEvent, ViroTrackingReason, ViroTrackingState, ViroTrackingUpdatedEvent } from "../Types/ViroEvents";
 import { Viro3DPoint, ViroPhysicsWorld, ViroRay, ViroScale, ViroSoundRoom, ViroSource } from "../Types/ViroUtils";
@@ -67,6 +67,6 @@ export declare class ViroARScene extends ViroBase<Props> {
         up: any[];
     }>;
     getCameraPositionAsync: () => Promise<any>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};