Crash on Plane Selection in ViroARPlaneSelector (EXC_BAD_ACCESS)

[jerryCh254]

The app crashes with a Thread 1: EXC_BAD_ACCESS (code=1, address=...) error when I click/tap on a detected AR plane surface using ViroARPlaneSelector. The crash happens on iOS while rendering a 3D object

Platform: iOS

Device: ios device

React Native version: 0.77.1

@reactvision/react-viro version: 2.42.0

import React, {useCallback, useEffect, useRef, useState} from 'react';
import {
ViroARScene,
ViroARSceneNavigator,
Viro3DObject,
ViroAmbientLight,
ViroARPlaneSelector,
ViroMaterials,
ViroBox,
ViroText,
ViroSpotLight,
ViroNode,
} from '@reactvision/react-viro';
import {
AppState,
Image,
Platform,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {crossing, iosmodel, iosmodel2} from '/assets';
import {RF} from '/shared/services/utils/responsive';
import {useDispatch} from 'react-redux';
import {setArView} from '~/shared/redux';
// ViroMaterials.createMaterials({
// debugRed: {
// diffuseColor: '#ff0000',
// },
// });

const HelloWorldSceneAR = () => {
const modelSource =
Platform.OS === 'android'
? {uri: 'file:///android_asset/sofa.glb'}
: iosmodel;
const [rotation, setRotation] = useState<[number, number, number]>([0, 0, 0]);

const handleRotate = (
rotateState: number,
rotationFactor: number,
source: any,
) => {
if (rotateState === 3) {
// Finished rotating, update rotation only if necessary
setRotation(prev => {
if (prev[1] !== prev[1] + rotationFactor) {
return [prev[0], prev[1] + rotationFactor, prev[2]];
}
return prev;
});
}
};

return (

<ViroAmbientLight color={'#aaaaaa'} />
<ViroSpotLight
innerAngle={5}
outerAngle={90}
direction={[0, -1, -0.2]}
position={[0, 3, 1]}
color="#ffffff"
castsShadow={true}
/>
<ViroARPlaneSelector
maxPlanes={1}
onPlaneSelected={plane => {
console.log('Plane selected:', plane);
}}>

<Viro3DObject
source={
Platform.OS === 'android'
? {uri: 'file:///android_asset/sofa.glb'}
: iosmodel2
}
// source={modelSource}
position={[0, 0.1, 0]}
scale={[2, 2, 2]}
type="GLB"
/>



);
};

export default function ArComponent() {
const navigation = useNavigation();
const dispatch = useDispatch();
const arNavigatorRef = useRef(null);
// const handleClose = () => {
// dispatch(setArView(false));
// navigation.goBack();
// };

const handleClose = useCallback(() => {
dispatch(setArView(false));
navigation.goBack();
}, [dispatch, navigation]);

// Cleanup AR Scene when the component unmounts
useEffect(() => {
return () => {
if (arNavigatorRef.current) {
// Clean up AR resources if necessary
arNavigatorRef.current.dispose();
}
};
}, []);
return (
<View style={{flex: 1}}>
<ViroARSceneNavigator
ref={arNavigatorRef}
autofocus={true}
initialScene={{scene: HelloWorldSceneAR}}
style={styles.f1}
viroAppProps={{
cameraPosition: [0, 1, 3], // Position of the AR camera
lighting: {ambientIntensity: 0.8, directionalIntensity: 0.7}, // Example lighting adjustments
enablePlaneDetection: true, // Enable automatic plane detection
}}
/>

  <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
    <Image
      source={crossing}
      style={{width: RF(24), height: RF(24), resizeMode: 'contain'}}
    />
  </TouchableOpacity>
</View>

);
}

const styles = StyleSheet.create({
f1: {flex: 1},
closeButton: {
position: 'absolute',
top: 40,
right: 20,
zIndex: 100,
backgroundColor: '#fff',
borderRadius: 4,
padding: 5,
},
helloWorldTextStyle: {
fontFamily: 'Arial',
fontSize: 30,
color: '#ffffff',
textAlignVertical: 'center',
textAlign: 'center',
},
});

[oliedis]

This was resolved in 2.43.0

Full release notes: https://viro-community.readme.io/changelog/viroreact-2430-whats-new