viro
viro copied to clipboard
NativeVision
Crash on iOS, when a Viro component being unmounted
Steps to reproduce:
- Start a fresh react-native app:
npx @react-native-community/cli init ViroBug --version 0.76
cd ViroBug
npm i @reactvision/react-viro
- Modify Podfile
pod 'ViroReact', :path => '../node_modules/@reactvision/react-viro/ios/'
pod 'ViroKit', :path => '../node_modules/@reactvision/react-viro/ios/dist/ViroRenderer/'
- Install pods:
cd iOS
pod install
- 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>
)
});
- 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
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 ( <ViroARScene> <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); }}> <ViroNode rotation={rotation} onRotate={handleRotate}> <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" /> </ViroNode> </ViroARPlaneSelector> </ViroARScene> ); };
export default function ArComponent() {
const navigation = useNavigation();
const dispatch = useDispatch();
const arNavigatorRef = useRef
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', }, });
This issue was resolved in version 2.43.0
Full release details: https://viro-community.readme.io/changelog/viroreact-2430-whats-new
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)
This is issue is on the to-do list. We're hoping to have a patch released for it next week.
Hey, we also need this fixed. It forces us to keep it mounted for now which kinda sucks. Also, it makes it so that every hot reload of the app crashes it. Please please fix
This is issue is on the to-do list. We're hoping to have a patch released for it next week.
it's alreay 1 month gone, we didn't get any update from viro-react. can somebody fix this issue, previous version also not working form 2.41.3~2.43.0, not a single version is working. Please update the codebase.
Multiple users reported this issue as resolved in 2.43.2, the current release on main so this issue was closed. However, there were some other issues raised in 2.43.2 which is why this version wasn't released on NPM.
