App crashes when ViroImage tries to load an image.

[Avtrkrb]

Description

App crashes with the following error when a ViroARScene is initialized with ViroImage. The function is being called properly as console prints debug statements & props being passed to the scene. App is built with expo & running in a custom dev client.

This is behaviour is observed irrespective of loading a local image or an image from a url.

 LOG  Initializing AR...
 LOG  MyARScene props: {"arSceneNavigator": {"jump": [Function jump], "pop": [Function pop], "popN": [Function popN], "project": [Function _project], "push": [Function push], "replace": [Function replace], "resetARSession": [Function _resetARSession], "setWorldOrigin": [Function _setWorldOrigin], "startVideoRecording": [Function _startVideoRecording], "stopVideoRecording": [Function _stopVideoRecording], "takeScreenshot": [Function _takeScreenshot], "unproject": [Function _unproject], "viroAppProps": undefined}, "sceneNavigator": {"jump": [Function jump], "pop": [Function pop], "popN": [Function popN], "project": [Function _project], "push": [Function push], "replace": [Function replace], "resetARSession": [Function _resetARSession], "setWorldOrigin": [Function _setWorldOrigin], "startVideoRecording": [Function _startVideoRecording], "stopVideoRecording": [Function _stopVideoRecording], "takeScreenshot": [Function _takeScreenshot], "unproject": [Function _unproject], "viroAppProps": undefined}, "source": "http://xxx.xxx.xxx.xxx/xxxxx/xxxx.jpg"}
 LOG  ArSceneNavigator props: {"jump": [Function jump], "pop": [Function pop], "popN": [Function popN], "project": [Function _project], "push": [Function push], "replace": [Function replace], "resetARSession": [Function _resetARSession], "setWorldOrigin": [Function _setWorldOrigin], "startVideoRecording": [Function _startVideoRecording], "stopVideoRecording": [Function _stopVideoRecording], "takeScreenshot": [Function _takeScreenshot], "unproject": [Function _unproject], "viroAppProps": undefined}
 LOG  Image source: http://xxx.xxx.xxx.xxx/xxxxx/xxxx.jpg
 ERROR  Your app just crashed. See the error below.
java.lang.IncompatibleClassChangeError: Found interface com.facebook.imagepipeline.image.CloseableBitmap, but class was expected (declaration of 'com.facebook.imagepipeline.image.CloseableBitmap' appears in /data/app/~~fS3hmjZoZP9CIviJO2unTQ==/com.example.app-jZ0719qUsfse_xwV_ZjwVA==/base.apk)
  com.viromedia.bridge.utility.ImageDownloader$1.onNewResultImpl(ImageDownloader.java:155)
  com.facebook.datasource.BaseDataSubscriber.onNewResult(BaseDataSubscriber.java:51)
  com.facebook.datasource.AbstractDataSource$1.run(AbstractDataSource.java:200)
  java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
  java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:644)
  com.facebook.imagepipeline.core.PriorityThreadFactory.newThread$lambda$0(PriorityThreadFactory.kt:37)
  com.facebook.imagepipeline.core.PriorityThreadFactory.$r8$lambda$IPp7Vm9a1KDy8D4770JTjI9qOG4(Unknown Source:0)
  com.facebook.imagepipeline.core.PriorityThreadFactory$$ExternalSyntheticLambda0.run(Unknown Source:4)
  java.lang.Thread.run(Thread.java:1012)
 LOG  onInitialized 1 1
 LOG  TRACKING_UNAVAILABLE 1

Reproducible Demo

Fresh expo-create-app with just ViroARScene, ViroImage & ViroARSceneNavigator. ViroARSceneNavigator is successfully able to call the ARScene function as both print debug & tracking initialization console logs. When ViroARScene is being rendered, the app crashes. The remote image URL is valid since the image opens in browser.

Code:

import {
  ViroARScene,
  ViroARSceneNavigator,
  ViroImage,
} from '@viro-community/react-viro';

import React, { useState, useEffect } from 'react';
import {StyleSheet, TouchableOpacity} from 'react-native';
import { handleTrackingUpdated } from '../utils/handleTrackingUpdated';
import { scale } from '../utils'
import { MaterialIcons } from '@expo/vector-icons'

const ArScene = (props: any) => {
  console.log('Initializing AR...');
  console.log('MyARScene props:', props);
  console.log('ArSceneNavigator props:', props.arSceneNavigator);
  console.log('Image source:', props.source);

  const [imageAnchor, setImageAnchor] = useState(null);

  const onPlaneSelected = (anchor: any, planeType: any) => {
    if (planeType === 'Vertical') {
      console.log('Vertical plane selected:', anchor);
      setImageAnchor(anchor);
    }
  };

  return (
    // @ts-expect-error TS(2769): No overload matches this call.
    <ViroARScene onTrackingUpdated={handleTrackingUpdated} onPlaneSelected={onPlaneSelected}>
          <ViroImage
            source={{uri: props.source}}
            position={[0, 0, -4]}
            scale={[0.4572, 0.6096, 1]}
            onDrag={(dragToPos, source) => {
              if (imageAnchor) {
                // @ts-expect-error TS(2345): Argument of type 'number[]' is not assignable to p... Remove this comment to see the full error message
                setImageAnchor([imageAnchor[0], dragToPos[1], imageAnchor[2]]);
              }
            }}
            dragType='FixedToWorld'
          />
    </ViroARScene>
  );
};

export const MyARScene = ({
  navigation,
  route
}: any) => {

  console.log("MyARScene\n");

  const [isNavigatorMounted, setNavigatorMounted] = useState(true);
  const source = route.params.source;

  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', () => {
      setNavigatorMounted(false);
    });
    return unsubscribe;
  }, [navigation]);

  const backButtonHandler = () => {
    navigation.goBack();
  };

  return isNavigatorMounted ? (
    <>
    <ViroARSceneNavigator
      autofocus={true}
      hdrEnabled={true}
      pbrEnabled={true}
      shadowsEnabled={true}
      initialScene={{
          // @ts-expect-error TS(2322): Type '(props: any) => React.JSX.Element' is not as... Remove this comment to see the full error message
        scene: ArScene,
        passProps: {source: source}
      }}
      style={styles.f1}
    />
    <TouchableOpacity
      style={styles.backButtonContainer}
      onPress={backButtonHandler}>
      <MaterialIcons
              name="arrow-back-ios"
              size={scale(30)}
              color="#FFF"
      />
    </TouchableOpacity>
    </>
  ): null;
};

var styles = StyleSheet.create({
  f1: {flex: 1},
  backButtonContainer: {
    position: 'absolute',
    top: 35, // Move the backButtonContainer down by 20 pixels
    left: 0,
    backgroundColor: 'transparent',
    padding: 15,
    zIndex: 1000, // Ensure the button is above other elements
  },
});

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

1. Development OS:
   • Arch Linux (linux-zen kernel 6.7.2-zen1-2-zen)
2. Device OS & Version:
   • Android OS version: 14.0
3. Versions:
   • "@viro-community/react-viro": "^2.23.1"
   • "react": "18.2.0"
   • "react-native": "0.73.2"
   • "expo": "~50.0.5"
   • NodeJS: v18.19.0
   • yarn: 1.22.21
4. Device(s):
   • OnePlus Nord 2T
   • Samsung Galaxy S22 Ultra

@robertjcolley

[linear[bot]]

XR-166 App crashes when ViroImage tries to load an image.

[Avtrkrb]

@robertjcolley I was able to resolve this. I have to make a few change to viro package, will be submitting a pull request, please review & accept it.

[Avtrkrb]

The issue arises because fresco was recently updated from 2.5.0 -> 3.1.3. I believe they have made some changes as there was a similar issue in expo that affected expo sdk 49 & 50.

[agallardoysla]

Thanks @Avtrkrb , @bobbyjcolley this has relation with https://github.com/NativeVision/viro/issues/245

[ThuggerHacks]

Viro app crashes when added ViroSound/ ViroVideo/ ViroSpacialSounf or anything related to audio and/or video, here is the code snippet I was testing:

import { StyleSheet } from "react-native";
import {
  ViroARScene,
  ViroTrackingStateConstants,
  ViroARSceneNavigator,
  ViroTrackingReason,
  ViroSound,
} from "@viro-community/react-viro";

const HelloWorldSceneAR = () => {
  const [text, setText] = useState("Initializing AR...");
  // const [showBox, setShowBox] = useState(false);

  function onInitialized(state: any, reason: ViroTrackingReason) {
    console.log("guncelleme", state, reason);
    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
      setText("Hello World!");
    } else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      // Handle loss of tracking
    }
  }

  return (
    <ViroARScene onTrackingUpdated={onInitialized}>

    <ViroSound
      source={{uri: "http://192.168.0.148:9800/uploads/1705791646779-aabef5ba998a0f49.mp3"}}
    />
    </ViroARScene>
  );
};

export default () => {
  return (
    <ViroARSceneNavigator
      autofocus={true}
      initialScene={{
        scene: HelloWorldSceneAR,
      }}
      style={styles.f1}
    />
  );
};

var styles = StyleSheet.create({
  f1: { flex: 1 },
  helloWorldTextStyle: {
    fontFamily: "Arial",
    fontSize: 30,
    color: "#ffffff",
    textAlignVertical: "center",
    textAlign: "center",
  },
});

There are no error logs

[Avtrkrb]

Viro app crashes when added ViroSound/ ViroVideo/ ViroSpacialSounf or anything related to audio and/or video, here is the code snippet I was testing:

import { StyleSheet } from "react-native";
import {
  ViroARScene,
  ViroTrackingStateConstants,
  ViroARSceneNavigator,
  ViroTrackingReason,
  ViroSound,
} from "@viro-community/react-viro";

const HelloWorldSceneAR = () => {
  const [text, setText] = useState("Initializing AR...");
  // const [showBox, setShowBox] = useState(false);

  function onInitialized(state: any, reason: ViroTrackingReason) {
    console.log("guncelleme", state, reason);
    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
      setText("Hello World!");
    } else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      // Handle loss of tracking
    }
  }

  return (
    <ViroARScene onTrackingUpdated={onInitialized}>

    <ViroSound
      source={{uri: "http://192.168.0.148:9800/uploads/1705791646779-aabef5ba998a0f49.mp3"}}
    />
    </ViroARScene>
  );
};

export default () => {
  return (
    <ViroARSceneNavigator
      autofocus={true}
      initialScene={{
        scene: HelloWorldSceneAR,
      }}
      style={styles.f1}
    />
  );
};

var styles = StyleSheet.create({
  f1: { flex: 1 },
  helloWorldTextStyle: {
    fontFamily: "Arial",
    fontSize: 30,
    color: "#ffffff",
    textAlignVertical: "center",
    textAlign: "center",
  },
});

There are no error logs

@ThuggerHacks will try this & fix it in my linked pr if I can get to the bottom of the error. Thanks for this.

[ThuggerHacks]

Viro app crashes when added ViroSound/ ViroVideo/ ViroSpacialSounf or anything related to audio and/or video, here is the code snippet I was testing:

import { StyleSheet } from "react-native";
import {
  ViroARScene,
  ViroTrackingStateConstants,
  ViroARSceneNavigator,
  ViroTrackingReason,
  ViroSound,
} from "@viro-community/react-viro";

const HelloWorldSceneAR = () => {
  const [text, setText] = useState("Initializing AR...");
  // const [showBox, setShowBox] = useState(false);

  function onInitialized(state: any, reason: ViroTrackingReason) {
    console.log("guncelleme", state, reason);
    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
      setText("Hello World!");
    } else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      // Handle loss of tracking
    }
  }

  return (
    <ViroARScene onTrackingUpdated={onInitialized}>

    <ViroSound
      source={{uri: "http://192.168.0.148:9800/uploads/1705791646779-aabef5ba998a0f49.mp3"}}
    />
    </ViroARScene>
  );
};

export default () => {
  return (
    <ViroARSceneNavigator
      autofocus={true}
      initialScene={{
        scene: HelloWorldSceneAR,
      }}
      style={styles.f1}
    />
  );
};

var styles = StyleSheet.create({
  f1: { flex: 1 },
  helloWorldTextStyle: {
    fontFamily: "Arial",
    fontSize: 30,
    color: "#ffffff",
    textAlignVertical: "center",
    textAlign: "center",
  },
});

There are no error logs

@ThuggerHacks will try this & fix it in my linked pr if I can get to the bottom of the error. Thanks for this.

Right, anything just update us

[jasj]

i have the same issue, using expo

"dependencies": { "@viro-community/react-viro": "^2.23.1", "expo": "~50.0.4", "expo-dev-client": "~3.3.8", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "0.73.2", "expo-asset": "~9.0.2", "metro-config": "~0.80.4"

}

when i tried this

ARTrackingTargetsModule.createTargets

Your app just crashed. See the error below. java.lang.IncompatibleClassChangeError: Found interface com.facebook.imagepipeline.image.CloseableBitmap, but class was expected (declaration of 'com.facebook.imagepipeline.image.CloseableBitmap'

looks like a problem with old version of Fresco

[Avtrkrb]

i have the same issue, using expo

"dependencies": { "@viro-community/react-viro": "^2.23.1", "expo": "~50.0.4", "expo-dev-client": "~3.3.8", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "0.73.2", "expo-asset": "~9.0.2", "metro-config": "~0.80.4"

}

when i tried this

ARTrackingTargetsModule.createTargets

Your app just crashed. See the error below. java.lang.IncompatibleClassChangeError: Found interface com.facebook.imagepipeline.image.CloseableBitmap, but class was expected (declaration of 'com.facebook.imagepipeline.image.CloseableBitmap'

looks like a problem with old version of Fresco

I have an open pr that resolves this. Waiting on the maintainers to review & approve.

@robertjcolley @cjmcassar