Crash on iOS, when a Viro component being unmounted

[ariel-bentu]

Steps to reproduce:

1. Start a fresh react-native app:

npx @react-native-community/cli init ViroBug --version 0.76
cd ViroBug
npm i @reactvision/react-viro

2. Modify Podfile

  pod 'ViroReact', :path => '../node_modules/@reactvision/react-viro/ios/'
  pod 'ViroKit', :path => '../node_modules/@reactvision/react-viro/ios/dist/ViroRenderer/'

3. Install pods:

cd iOS
pod install

4. Replace the App.tsx with this code:

import { Viro3DSceneNavigator, ViroAmbientLight, ViroBox, ViroCamera, ViroMaterials, ViroNode, ViroQuad, ViroScene, ViroSpotLight } from "@reactvision/react-viro";
import { forwardRef, useImperativeHandle, useRef, useState } from "react";
import { Button, SafeAreaView, View } from "react-native";


export default function App() {
    const sceneRef = useRef<any>(undefined);

    return (
        <SafeAreaView style={{ flex: 1 }} >
            <Button title="reload" onPress={() => sceneRef.current?.recreate()}></Button>

            <Viro3DSceneNavigator
                initialScene={{
                    scene: Scene1,

                    passProps: {
                        ref: sceneRef,
                    }
                }}
            />
        </SafeAreaView>
    );
}

export const Scene1 = forwardRef(({ }: any, ref: any) => {
    const [revision, setRevision] = useState<number>(0)

    useImperativeHandle(ref, () => ({
        recreate: () => {
            console.log("recreating scene")
            setRevision(prev => prev + 1)
        },
    }));

    return (
        <ViroScene key={revision}>
            {/* <ViroCamera active position={[0, 5, 2]} rotation={[-60, 0, 0]} /> */}
            <ViroAmbientLight color="#FFFFFF" intensity={500} />
            <ViroBox></ViroBox>
        </ViroScene>
    )
});

5. Run the app on your device, and after it loads press the "reload" button

Result

app crashes with "EXC_BAD_ACCESS" at [_contentView removeFromSuperview];

// File: RCTViewComponentView.mm
...
- (void)setContentView:(UIView *)contentView
{
  if (_contentView) {
    [_contentView removeFromSuperview]; // here
  }
...

Notes:

• this also happens for inner Viro objects such as Viro3DObject.
• it happens more on real device, but often also on SImulator/ Mac (designed for iPad)
• It happens on version react-native 0.76, but I tried also 0.77 and 0.77.1 and still the same
• I tried on 0.78 rc 5 - and encountered a blocker (which I did not investigate) about old react element being rendered... so gave up on that release check

[watanabeyu]

same error

[ardasnturk]

Same error
#317

[elliottking]

Same error

[jerryCh254]

issue is fixed now.??

[ardasnturk]

issue is fixed now.??

No 😔

[jerryCh254]

can you please help me
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',
},
});

[jerryCh254]

???

[oliedis]

This issue was resolved in version 2.43.0

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

[ariel-bentu]

Still happens with 2.43.0.
"react-native": "0.77.1"
destination: tested on iPhone device , or MyMac (Designed for iPhone)

I run the same setup as described in the beginning of this thread, and it crashes

(cannot re-open the issue due to permission)

[oliedis]

@ariel-bentu I've repopened the issue