Open
Description
ViroReact Version: @reactvision/react-viro version ^2.43.0
React Native version: 0.77.1
Expo: Not being used
Getting the following error:
ARSession <0x114d6ad00>: ARSession is being deallocated without being paused. Please pause running sessions explicitly.app index.tsx
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';
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
setRotation(prev => [prev[0], prev[1] + rotationFactor, prev[2]]);
}
};
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}>
<ViroNode rotation={rotation} onRotate={handleRotate}>
<Viro3DObject
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 [showAr, setShowAr] = useState(true);
const arNavigatorRef = useRef<any>(null);
const handleClose = () => {
// Set a delay before executing the actions
setShowAr(false);
console.log(arNavigatorRef.current, '...cirrrent');
setTimeout(() => {
// console.log(arNavigatorRef, 'arNavigatorRef');
dispatch(setArView(false));
navigation.goBack();
}, 500); // 500 milliseconds delay (you can adjust this time)
};
return (
<View style={{flex: 1}}>
{showAr && (
<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',
},
});