AR VIRO iOS - объект режется при перемещении телефона

Question

Проблема. Я пытаюсь разместить объект в AR, используя приведенный ниже код. Я могу разместить их, но кажется, что они обрезаются, если я перемещаю телефон. кто-нибудь сталкивался с проблемой раньше..? Может кто-нибудь указать мне, что случилось?

Ниже приведены версии, которые я использую

"react-viro": "2.17.0",

"реагировать": "16.8.3",

"react-native": "0.59.9"

Пытаюсь разместить объект в AR

<ViroNode position={position} dragType="FixedToWorld" onDrag={() => {}}>
{/* Spotlight to cast light on the object and a shadow on the surface, see
the Viro documentation for more info on lights & shadows */}
<ViroSpotLight
innerAngle={5}
outerAngle={45}
direction={[0, -1, -0.2]}
position={position}
color="#ffffff"
castsShadow={true}
influenceBitMask={2}
shadowMapSize={2048}
shadowNearZ={2}
shadowFarZ={5}
shadowOpacity={0.7}
/>
{_3dObject}

let _3dObject = streetViewPoints.map((data, index) => {
console.log("data" + JSON.stringify(data[index]));
let correction_factor = data.meter / 250;
let positions = [data.coordinates[0].x * 0.2, data.coordinates[0].y, -5];

  this.name;
  if (data.name.length > 13) {
     this.name = data.name.substring(0, 11) + "...";
  } else {
    this.name = data.name;
  }

  this.mainOuterContainer = 12.3;
  this.imageSize = 14.5;
  this.textSizeL = 180;
  this.textSizeS = 150;
  this.flexItemHeight = 3.9;
  this.itemHeight = 25;
  this.itemWidth = 25;
  this.textWidth = 15;
  this.offertextWidth = 20;
  this.subtextWidth = 10;

 let offerText = "Not available for now"


this.meter = Number.parseFloat(data.meter);


 if (Number(this.meter) > 120) {
if (Number(this.meter) > 200) {

  positions = [
    data.coordinates[0].x * correction_factor,
    data.coordinates[0].y,
    -10
  ];

 } else {

  positions = [
    data.coordinates[0].x * correction_factor,
    data.coordinates[0].y,
    -5
  ];

}
  } else {

if (Number(this.meter) > 70) {

  positions = [data.coordinates[0].x, data.coordinates[0].y, -4];
} else {

  positions = [data.coordinates[0].x, data.coordinates[0].y, -4];
}
}


ViroMaterials.createMaterials({
circle: {
  shininess: 2.0,
  lightingModel: "Blinn",
  diffuseTexture: require("../../assets/images/check_box_unchecked.png")
}
  });
   return (
<ViroFlexView
  dragType="FixedToPlane"
  key={index}
  width={this.mainOuterContainer}
  height={this.mainOuterContainer}
  transformBehaviors={["billboardY"]}
  position={positions}
  // scale={[0.01, 0.01, 0.01]}
  style={{ flexDirection: "row" }}
>
  <ViroFlexView style={{ flexDirection: "row" }}>
    <ViroImage
      key={index}
      width={this.imageSize}
      height={this.imageSize}
      dragType="FixedToPlane"
      source={require(".path to that image)  }
      scale={[1.2, 1.2, 1.2]}
      type="VRX"
      lightReceivingBitMask={3}
      shadowCastingBitMask={2}
      transformBehaviors={["billboardY"]}
      resources={[
        require("path to that image"),

      ]}
    />
  </ViroFlexView>


    <ViroFlexView
      width={this.itemWidth}
      height={1.1}
      //materials="circle"
      style={{}}
    >
      <ViroFlexView
        style={{
          backgroundColor: "#FFF",
          flexDirection: "row",
          justifyContent: "space-between",
          padding: 0.3
        }}
        height={this.flexItemHeight}
      >
        <ViroText
          text={this.name}
          outerStroke={{
            type: "Outline",
            width: this.subtextWidth,
            color: "#FFFFFF80"
            // color: "red"
          }}
          textAlign="left"
          textAlignVertical="top"
          textLineBreakMode="Justify"
          textClipMode="ClipToBounds"
          color="black"
          width={this.textWidth}
          height={this.itemHeight}
          style={{
            fontFamily: "Arial",
            fontSize: this.textSizeL,
            fontWeight: "600",
            fontStyle: "normal",
            color: "black",
            backgroundColor: "red"
          }}
        />

        <ViroText
          text={
            Number.parseFloat(data.total_rating).toPrecision(2) + "/5"
          }
          textAlign="right"
          textAlignVertical="top"
          textLineBreakMode="Justify"
          textClipMode="ClipToBounds"
          color="black"
          width={this.subtextWidth}
          height={this.itemHeight}
          outerStroke={{
            type: "Outline",
            width: 3,
            color: "#FFFFFF80"
          }}
          style={{
            fontFamily: "Arial",
            fontSize: this.textSizeL,
            fontWeight: "normal",
            color: "black",
            marginRight: 12,
            marginLeft: this.itemWidth
          }}
        />
      </ViroFlexView>
      <ViroFlexView
        style={{
          backgroundColor: "#ffffff",
          padding: 0.3
        }}
        height={this.flexItemHeight}
      >
        <ViroText
          text={offerText}
          textAlign="left"
          textAlignVertical="top"
          textLineBreakMode="Justify"
          textClipMode="ClipToBounds"
          outerStroke={{
            type: "Outline",
            width: 2,
            color: "#00000080"
          }}
          width={this.offertextWidth}
          height={this.itemHeight}
          style={{
            fontFamily: "Arial",
            fontSize: this.textSizeS,
            fontWeight: "normal",
            fontStyle: "italic",
            color: "#ed1c24"

        />
      </ViroFlexView>
    </ViroFlexView>
  )}

</ViroFlexView>
);
});