App crashes when ViroImage tries to load an image.
Avtrkrb opened this issue · 9 comments
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
- Review the documentation
- Search for existing issues in: ViroCommunity/viro
- Use the latest ViroReact release
Environment
- Development OS:
- Arch Linux (linux-zen kernel 6.7.2-zen1-2-zen)
- Device OS & Version:
- Android OS version: 14.0
- 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
- Device(s):
- OnePlus Nord 2T
- Samsung Galaxy S22 Ultra
@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.
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.
Thanks @Avtrkrb , @bobbyjcolley this has relation with #245
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
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.
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
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 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.