Crash when using ViroARPlaneSelector in Android

[tranminhnhat1005]

Requirements:

Please go through this checklist before opening a new issue

• [x] Review the documentation
• [x] Search for existing issues in: ViroCommunity/viro
• [x] Use the latest ViroReact release

Environment

Please provide the following information about your environment:

1. Development OS: Mac
2. Device OS & Version: Android OS version 11
3. Version: ViroReact version 2.41.6 and React Native version 0.74.4
4. Device(s): VSmart Aris

Description

I update from "@viro-community/react-viro": "2.23.3" to "@reactvision/react-viro": "2.41.6". The ViroARPlaneSelector not working because it tries to update width & height from the ViroQuad .

I remove these props and it works...! And the function _getARPlanes of ViroARPlaneSelector after edit is:

  _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 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}
              rotation={[-90, 0, 0]}
            />
          </ViroARPlane>
        );
      }
      return arPlanes;
    } else {
      return (
        <ViroARPlane
          key={_planePrefix + this.state.selectedSurface}
          {...this.props}
        ></ViroARPlane>
      );
    }
  }

Reproducible Demo

My using case:

      <ViroARPlaneSelector
        ref={refViroARPlaneSelector}
        minHeight={0.1}
        minWidth={0.1}
        alignment={Platform.OS === ANDROID ? 'HorizontalUpward' : 'Horizontal'}
        onPlaneSelected={onPlaneSelected}>
          <Viro3DObject
            ref={refProduct}
            type={'GLB'}
            source={{ uri }}
            rotation={productRt}
            scale={productSc}
            onDrag={onDrag}
            onPinch={onPinch}
            onRotate={onRotate}
          />
      </ViroARPlaneSelector>

[jefersonjuliani]

same here