Expo ReactViro - ios app crashing whenever position is added to reactvision/react-viro component

[HaugaardThomas]

Requirements:

Please go through this checklist before opening a new issue

• [ *] Review the documentation
• [ *] Search for existing issues in: ViroCommunity/viro
• [ *] Use the latest ViroReact release

Environment

Please provide the following information about your environment:

1. Development OS: Windows
2. Device OS & Version: IOS 12 17.6.1
3. Version: ViroReact version 2.41.6 & Expo 50.0.21 & RN 0.73.6
4. Device(s): All devices

Description

Expo ReactViro - ios app crashing whenever position is added to reactvision/react-viro component. I have also tried SDK 51, still doesnt seem to work.

Reproducible Demo

my package.json: "
{
"name": "client",
"version": "1.0.0",
"scripts": {
"start": "expo start --tunnel",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"@react-native-async-storage/async-storage": "1.21.0",
"@react-native-picker/picker": "2.6.1",
"@react-navigation/bottom-tabs": "^6.5.8",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"@react-navigation/stack": "^6.3.17",
"@reactvision/react-viro": "^2.41.6",
"axios": "^1.5.0",
"dotenv": "^16.3.1",
"expo": "^50.0.21",
"expo-asset": "~9.0.2",
"expo-camera": "^15.0.16",
"expo-dev-client": "~3.3.12",
"expo-splash-screen": "~0.26.5",
"express": "^4.18.2",
"moment": "^2.30.1",
"mongodb": "^6.0.0",
"mongoose": "^7.5.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.73.6",
"react-native-camera": "^4.2.1",
"react-native-elements": "^3.4.3",
"react-native-gesture-handler": "~2.14.0",
"react-native-modal": "^13.0.1",
"react-native-permissions": "^5.1.0",
"react-native-reanimated": "~3.6.2",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"react-native-web": "~0.19.10",
"three": "^0.170.0"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"babel-plugin-module-resolver": "^5.0.2"
},
"private": true
}
"

My file with Viro: "
// ARScreen.js
import React, { useState, useEffect } from 'react';
import { Camera, CameraType, CameraView } from 'expo-camera';
import {
ViroARScene,
ViroARSceneNavigator,
ViroMaterials,
ViroText,
} from '@reactvision/react-viro';
import { StyleSheet, View, Text, TouchableOpacity, FlatList, Button } from 'react-native';

ViroMaterials.createMaterials({
line: {
diffuseColor: '#ff0000',
},
});

const ARScreen = () => {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
const [qrData, setQRData] = useState(null);
const [waypointsData, setWaypointsData] = useState(null);
const [selectedWaypoint, setSelectedWaypoint] = useState(null);
const [showARScene, setShowARScene] = useState(false);

useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);

const handleBarCodeScanned = ({ type, data }) => {
console.log('Scanned QR Code Data:', data);
setScanned(true);
setQRData(data);

const dataFromQR = getWaypointsForQRData(data);
setWaypointsData(dataFromQR);

};

const getWaypointsForQRData = (data) => {
if (data === 'https://qr.link/oXjACN') {
return {
waypoints: [
{ id: 'waypoint_1', name: 'Meeting Room' },
{ id: 'waypoint_2', name: 'Office', coordinates: { x: -2, y: 0, z: -4 } },
],
connectors: [
{ id: 'connector_1', waypointStartId: 'waypoint_1', waypointEndId: 'waypoint_2' },
],
};
} else if (data === 'qr_code_2') {
return {
waypoints: [
{ id: 'waypoint_3', name: 'Lobby', coordinates: { x: 0, y: 0, z: -2 } },
{ id: 'waypoint_4', name: 'Cafeteria', coordinates: { x: 3, y: 0, z: -5 } },
],
connectors: [
{ id: 'connector_2', waypointStartId: 'waypoint_3', waypointEndId: 'waypoint_4' },
],
};
} else {
return null;
}
};

const handleWaypointSelect = (waypoint) => {
setSelectedWaypoint(waypoint);
setShowARScene(true);
};

const scaleFactor = 0.1;

if (hasPermission === null) {
return (

Requesting camera permission...

);
}
if (hasPermission === false) {
return (

No access to camera.
<Button title="Allow Camera" onPress={() => Camera.requestCameraPermissionsAsync()} />

);
}

if (!scanned) {
return (
<View style={{ flex: 1 }}>
<CameraView
style={{ flex: 1 }}
barcodeScannerEnabled
onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
>

Scan a QR Code



);
} else if (waypointsData && !selectedWaypoint && !showARScene) {
return (

Select a Waypoint:
<FlatList
data={waypointsData.waypoints}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.menuItem}
onPress={() => handleWaypointSelect(item)}
>
{item.name}

)}
/>
<Button
title="Scan Again"
onPress={() => {
setScanned(false);
setQRData(null);
}}
/>

);
} else if (showARScene && selectedWaypoint) {
return (
<ViroARSceneNavigator
autofocus={true}
initialScene={{
scene: () => (

),
}}
style={styles.f1}
/>
);
} else {
return (

No waypoints data available for this QR code.
<Button
title="Scan Again"
onPress={() => {
setScanned(false);
setQRData(null);
}}
/>

);
}
};

const ARScene = ({ waypointsData, selectedWaypoint, scaleFactor }) => {

return (

<ViroText
text="Hello World"
position={[0, 0, -5]}

  />
</ViroARScene>

);
};

const styles = StyleSheet.create({
f1: {
flex: 1,
},
camera: {
flex: 1,
},
helloWorldTextStyle: {
fontFamily: 'Arial',
fontSize: 30,
color: '#ffffff',
textAlignVertical: 'center',
textAlign: 'center',
},
markerTextStyle: {
fontFamily: 'Arial',
fontSize: 20,
color: '#00ff00',
textAlignVertical: 'center',
textAlign: 'center',
},
menuContainer: {
flex: 1,
padding: 16,
backgroundColor: '#fff',
},
menuTitle: {
fontSize: 24,
marginBottom: 16,
},
menuItem: {
padding: 12,
backgroundColor: '#eee',
marginBottom: 8,
},
menuItemText: {
fontSize: 18,
},
scannerOverlay: {
position: 'absolute',
bottom: 50,
left: 0,
right: 0,
alignItems: 'center',
},
scannerText: {
fontSize: 24,
color: '#fff',
},
centered: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});

export default ARScreen;
"

[StefanSmudja]

Got the exact same issue here, Expo 52 & RN 0.76.5