App Crashes on iOS, but Works Fine on Android #1018
Description
I'm facing an issue where the app works perfectly fine on Android, but crashes on iOS. The crash seems to happen when trying to render an AR scene using react-viro.
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} from '/assets';/shared/services/utils/responsive';
import {RF} from '
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
setRotation(prev => [prev[0], prev[1] + rotationFactor, prev[2]]);
}
};
return (
<ViroAmbientLight color={"#aaaaaa"} />
<ViroSpotLight innerAngle={5} outerAngle={90} direction={[0,-1,-.2]} position={[0, 3, 1]} color="#ffffff" castsShadow={true} />
<Viro3DObject
source={modelSource}
position={[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 onExitViro = useCallback(() => {
dispatch(setArView(false)); // Dispatch to set AR view as false
navigation.goBack(); // Navigate back after exiting AR view
}, [dispatch, navigation]);
const handleClose = () => {
onExitViro(); // Call onExitViro when closing
};
return (
<View style={{flex: 1}}>
<ViroARSceneNavigator
ref={arNavigatorRef}
autofocus={true}
initialScene={{scene: HelloWorldSceneAR}}
style={styles.f1}
/>
<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',
},
});