@reactvision/react-viro 2.42.0 → 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/Utilities/ViroVersion.ts

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

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.0";

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.0";

package/dist/plugins/withViroIos.js

@@ -15,7 +15,7 @@ const withViroPods = (config) => {
             const root = newConfig.modRequest.platformProjectRoot;
             fs_1.default.readFile(`${root}/Podfile`, "utf-8", (err, data) => {
                 data = (0, insertLinesHelper_1.insertLinesHelper)(`  pod 'ViroReact', :path => '../node_modules/@reactvision/react-viro/ios'\n` +
-                    `  pod 'ViroKit', :path => '../node_modules/@reactvision/react-viro/ios/dist/ViroRenderer/'`, "post_install do |installer|", data, -1);
+                    `  pod 'ViroKit', :path => '../node_modules/@reactvision/react-viro/ios/dist/ViroRenderer/'\n`, "post_install do |installer|", data, -1);
                 fs_1.default.writeFile(`${root}/Podfile`, data, "utf-8", function (err) {
                     if (err)
                         console.log("Error writing Podfile");

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "version": "2.42.0",
+  "version": "2.43.0",
   "license": "MIT",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,8 +26,8 @@
     "after:release": "./prepare_release.sh"
   },
   "peerDependencies": {
-    "expo": "52.0.30",
-    "react-native": "0.76.0"
+    "expo": "~52.0.43",
+    "react-native": "0.76.9"
   },
   "peerDependenciesMeta": {
     "expo": {
@@ -52,7 +52,7 @@
   ],
   "dependencies": {
     "@expo/config-plugins": "^9.0.14",
-    "react": "^18.3.1",
+    "react": "18.3.1",
     "react-native-gradle-plugin": "^0.71.19"
   },
   "devDependencies": {
@@ -60,21 +60,21 @@
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.26.0",
     "@jest/globals": "^29.7.0",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
-    "@react-native/babel-preset": "0.77.0",
-    "@react-native/eslint-config": "0.77.0",
-    "@react-native/metro-config": "0.77.0",
-    "@react-native/typescript-config": "0.77.0",
+    "@react-native-community/cli": "^15.0.1",
+    "@react-native-community/cli-platform-android": "^15.0.1",
+    "@react-native-community/cli-platform-ios": "^15.0.1",
+    "@react-native/babel-preset": "^0.77.0",
+    "@react-native/eslint-config": "^0.77.0",
+    "@react-native/metro-config": "^0.77.0",
+    "@react-native/typescript-config": "^0.77.0",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^22.13.1",
     "@types/react": "^18.3.18",
     "@types/react-native": "^0.73.0",
     "babel-jest": "^29.7.0",
-    "expo": "52.0.30",
+    "expo": ">=52.0.0",
     "jest": "^29.7.0",
-    "react-native": "0.76.0",
+    "react-native": "0.76.9",
     "release-it": "^17.1.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.0"

package/android/gvr_common/build/.transforms/1f305c8102b4f1e133a87e936f1e9964/results.bin

@@ -1 +0,0 @@
-o/com.google.vr.cardboard

package/android/gvr_common/build/.transforms/671af4785a8109ab1e811c3e952ce8a0/results.bin

@@ -1 +0,0 @@
-o/jetified-sdk-common-1.180.0-api.jar

package/android/gvr_common/build/.transforms/7ef00283b562187d9050275ffa4b0660/results.bin

@@ -1 +0,0 @@
-i/res

package/android/gvr_common/build/.transforms/f19cf8825806cdc4e4891f0b3948f623/results.bin

@@ -1 +0,0 @@
-o/jetified-sdk-common-1.180.0.aar

package/android/gvr_common/build/.transforms/f243c80b103fba9462a0988ec6b80d5d/results.bin

@@ -1 +0,0 @@
-o/jetified-sdk-common-1.180.0

package/android/gvr_common/build/.transforms/f243c80b103fba9462a0988ec6b80d5d/transformed/jetified-sdk-common-1.180.0/AndroidManifest.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.google.vr.cardboard" >
-
-    <uses-sdk
-        android:minSdkVersion="16"
-        android:targetSdkVersion="19" />
-
-</manifest>

package/android/gvr_common/build/.transforms/f243c80b103fba9462a0988ec6b80d5d/transformed/jetified-sdk-common-1.180.0/R.txt

@@ -1,55 +0,0 @@
-int color alignment_marker_color 0x1
-int color white_transparent 0x1
-int dimen alignment_marker_height 0x1
-int dimen alignment_marker_thickness 0x1
-int dimen transition_bottom_bar_height 0x1
-int drawable quantum_ic_close_white_24 0x1
-int drawable quantum_ic_settings_white_24 0x1
-int drawable rippleable 0x1
-int drawable transition 0x1
-int id back_button 0x1
-int id divider 0x1
-int id transition_bottom_frame 0x1
-int id transition_frame 0x1
-int id transition_icon 0x1
-int id transition_question_text 0x1
-int id transition_switch_action 0x1
-int id transition_text 0x1
-int id transition_top_frame 0x1
-int id ui_alignment_marker 0x1
-int id ui_back_button 0x1
-int id ui_back_button_holder 0x1
-int id ui_settings_button 0x1
-int id ui_settings_button_holder 0x1
-int layout back_button 0x1
-int layout settings_button 0x1
-int layout transition_view 0x1
-int layout ui_layer 0x1
-int layout ui_layer_with_portrait_support 0x1
-int string back_button_content_description 0x1
-int string cancel_button 0x1
-int string dialog_button_got_it 0x1
-int string dialog_button_open_help_center 0x1
-int string dialog_message_incompatible_phone 0x1
-int string dialog_message_no_cardboard 0x1
-int string dialog_title 0x1
-int string dialog_title_incompatible_phone 0x1
-int string dialog_title_vr_core_not_enabled 0x1
-int string dialog_title_vr_core_not_installed 0x1
-int string dialog_title_warning 0x1
-int string dialog_vr_core_not_enabled 0x1
-int string dialog_vr_core_not_installed 0x1
-int string go_to_playstore_button 0x1
-int string go_to_vr_listeners_settings_button 0x1
-int string gvr_vr_mode_component 0x1
-int string no_browser_text 0x1
-int string place_your_phone_into_cardboard 0x1
-int string place_your_viewer_into_viewer_format 0x1
-int string settings_button_content_description 0x1
-int string setup_button 0x1
-int string switch_viewer_action 0x1
-int string switch_viewer_prompt 0x1
-int style GvrDialogTheme 0x1
-int style NoSystemUI 0x1
-int style UiButton 0x1
-int style VrActivityTheme 0x1

package/android/gvr_common/build/.transforms/f243c80b103fba9462a0988ec6b80d5d/transformed/jetified-sdk-common-1.180.0/proguard.txt

@@ -1,19 +0,0 @@
-# Proguard rules for commonly-shared libraries in gvr.
-
-# Note: this comes from //jcg/android/apps/common/proguard/annotations.flags
-# but cannot be used directly because it would require including a google3
-# Java dependency in VR Toolkit, which would break the gradle build.
--keepattributes *Annotation*
-# Keep natively accessed methods used by Cardboard.
-# TODO(b/28564144): remove when the old UsedByNative annotation is removed.
--keep class com.google.vr.cardboard.UsedByNative
--keep @com.google.vr.cardboard.UsedByNative class *
--keepclassmembers class * {
-    @com.google.vr.cardboard.UsedByNative *;
-}
-
-# These are part of the Java <-> native interfaces for GVR.
--keepclasseswithmembernames,includedescriptorclasses class com.google.vr.** {
-    native <methods>;
-}
-

package/android/gvr_common/build/.transforms/f243c80b103fba9462a0988ec6b80d5d/transformed/jetified-sdk-common-1.180.0/res/drawable/rippleable.xml

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  Background that displays a white transparent color when touched.
-  This does no actual rippling pre-21, but is overridden on 21 to use a RippleDrawable.
--->
-<selector xmlns:android="http://schemas.android.com/apk/res/android" >
-    <item
-        android:drawable="@color/white_transparent"
-        android:state_pressed="true"/>
-    <item android:drawable="@android:color/transparent"/>
-</selector>

package/android/gvr_common/build/.transforms/f243c80b103fba9462a0988ec6b80d5d/transformed/jetified-sdk-common-1.180.0/res/drawable-v21/rippleable.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  Background that ripples with a white transparent color when touched.
--->
-<ripple xmlns:android="http://schemas.android.com/apk/res/android"
-    android:color="@color/white_transparent">
-</ripple>

package/android/gvr_common/build/.transforms/f243c80b103fba9462a0988ec6b80d5d/transformed/jetified-sdk-common-1.180.0/res/layout/back_button.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Back button for portrait orientation with left-to-right locale -->
-<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
-  style="@style/UiButton"
-  android:src="@drawable/quantum_ic_close_white_24"
-  android:layout_alignParentRight="true"
-  android:layout_alignParentTop="true"/>
-

package/android/gvr_common/build/.transforms/f243c80b103fba9462a0988ec6b80d5d/transformed/jetified-sdk-common-1.180.0/res/layout/settings_button.xml

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Settings button for portrait orientation with left-to-right locale -->
-<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
-  style="@style/UiButton"
-  android:src="@drawable/quantum_ic_settings_white_24"
-  android:contentDescription="@string/settings_button_content_description"
-  android:layout_alignParentRight="true"
-  android:layout_alignParentBottom="true"/>
-