Visibility of Viro3dObject not changing dynamically

[fasihw01]

Environment

Please provide the following information about your environment:

1. Development OS: Windows 11
2. Device OS & Version: Android 11
3. Version: React Native 0.73.5 and React-Viro 2.41.1
4. Device(s): Sony Xperia 5 Mark 2

Description

I'm facing a problem where I want to hide the Viro3dobject on the basis of tracking. That if the tracking is available, set visibility to true else false when tracking is unavailable. I store the tracking value in a state called isTracking which changes value according to ViroTrackingStateConstants.TRACKING_NORMAL and .TRACKING_UNAVAILABLE. The state changes perfectly but the 3d object doesn't hide when tracking is unavailable. if the isTracking state was false initially, then the visibility of 3dobject will remain false even after the isTracking state gets updated. I want it to change visibility dynamically.

Reproducible Demo

  const { item } = route.params;
  const arSceneRef = useRef(null);
  const [text, setText] = useState("Please Wait...");
  const [isTracking, setIsTracking] = useState(true);
  const [modelLoaded, setModelLoaded] = useState(false);
  const [loading, setLoading] = useState(false);
  const apiUrl = process.env.EXPO_PUBLIC_API_URL;

  ViroAnimations.registerAnimations({
    loopRotate: {
      properties: {
        rotateY: "+=45",
      },
      duration: 1000,
    },
  });

  function handleBack() {
    navigation.dispatch(CommonActions.goBack());
  }

  async function requestPermissions() {
    const cameraPermission = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Camera Permission",
        message: "This app needs access to your camera to take screenshots.",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK",
      }
    );

    const writePermission = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      {
        title: "Write Storage Permission",
        message: "This app needs access to your storage to save screenshots.",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK",
      }
    );

    return (
      cameraPermission === PermissionsAndroid.RESULTS.GRANTED &&
      writePermission === PermissionsAndroid.RESULTS.GRANTED
    );
  }

  function onInitialized(state, reason) {
    if (state == ViroTrackingStateConstants.TRACKING_NORMAL) {
      setIsTracking(true);
      console.log("true");
    } else if (state == ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      setText("Please Wait!");
      setIsTracking(false);
    } else if (
      state == ViroTrackingStateConstants.TRACKING_REASON_INSUFFICIENT_FEATURES
    ) {
      setIsTracking(false);
      setText("Wipe your camera lense. Unable to Focus");
    }
  }
  function scene() {
    return (
      <ViroARScene onTrackingUpdated={onInitialized}>
        {item && (
          <>
            <ViroAmbientLight color="#ffffff" />
            <Viro3DObject
              source={{ uri: item.item.model }}
              position={[0, 0, -2]}
              scale={[0.2, 0.2, 0.2]}
              type="GLB"
              onLoadStart={() => setModelLoaded(false)}
              onLoadEnd={() => setModelLoaded(true)}
              animation={{
                name: "loopRotate",
                run: true,
                loop: true,
              }}
              highAccuracyEvents={false}
              visible={isTracking}
            />
          </>
        )}
      </ViroARScene>
    );
  }

  return (
    <React.Fragment>
      {loading ||
        (!modelLoaded && (
          <View
            style={{
              width: "100%",
              height: "100%",
              flex: 1,
              alignItems: "center",
              justifyContent: "center",
              position: "absolute",
              zIndex: 1,
              backgroundColor: "rgba(38, 38, 38,0.3)",
            }}
          >
            <ActivityIndicator size="large" color={"white"} />
          </View>
        ))}
      <ViroARSceneNavigator
        ref={arSceneRef}
        autofocus={true}
        initialScene={{ scene }}
        style={styles.f1}
        //key={`arScene_${isTracking}_${modelLoaded}`}
      />

      <Image source={require("../assets/bg-cam.png")} style={styles.bgCam} />
      <TouchableOpacity onPress={} style={styles.captureButton}>
        <Image source={require("../assets/cam.png")} style={styles.cam} />
      </TouchableOpacity>
      <View style={styles.map}>
        <Map litemode={true} />
      </View>
      <TouchableRipple onPress={handleBack} style={styles.bottom}>
        <Image source={require("../assets/back.png")} />
      </TouchableRipple>
    </React.Fragment>
  );
};