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. 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: item.id} renderItem={({ item }) => ( handleWaypointSelect(item)} {item.name} )} />

{ setScanned(false); setQRData(null); }} />

); } else if (showARScene && selectedWaypoint) { return ( <ViroARSceneNavigator autofocus={true} initialScene={{ scene: () => ( <ARScene waypointsData={waypointsData} selectedWaypoint={selectedWaypoint} scaleFactor={scaleFactor} /> ), }} style={styles.f1} /> ); } else { return (

No waypoints data available for this QR code. { setScanned(false); setQRData(null); }} />

); } };

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

return (

); };

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; "