Expo ReactViro - ios app crashing whenever position is added to reactvisionreact-viro component - Stack Overflow

admin管理员组

文章数量:1122832

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.

This is what I got

**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
}

app.json

{
  "expo": {
    "name": "client",
    "slug": "client",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSPhotoLibraryUsageDescription": "Allow $(PRODUCT_NAME) to access your photos",
        "NSPhotoLibraryAddUsageDescription": "Allow $(PRODUCT_NAME) to save photos",
        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to use your camera",
        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to use your microphone"
      },
      "bundleIdentifier": "com.thomashaugaard.messeapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.thomashaugaard.messeapp"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "17d1ea66-c1fd-4614-b9e0-734fb99e38ab"
      }
    },
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
          "recordAudioAndroid": true
        }
      ],
      "@reactvision/react-viro"
    ]
  }
}

This is where i have my Viro ar:

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 === '/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 (
      <View style={styles.centered}>
        <Text>Requesting camera permission...</Text>
      </View>
    );
  }
  if (hasPermission === false) {
    return (
      <View style={styles.centered}>
        <Text>No access to camera.</Text>
        <Button title="Allow Camera" onPress={() => Camera.requestCameraPermissionsAsync()} />
      </View>
    );
  }

  if (!scanned) {
    return (
      <View style={{ flex: 1 }}>
        <CameraView
        style={{ flex: 1 }}
          barcodeScannerEnabled
          onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
        >
          <View style={styles.scannerOverlay}>
            <Text style={styles.scannerText}>Scan a QR Code</Text>
          </View>
        </CameraView>
      </View>
    );
  } else if (waypointsData && !selectedWaypoint && !showARScene) {
    return (
      <View style={styles.menuContainer}>
        <Text style={styles.menuTitle}>Select a Waypoint:</Text>
        <FlatList
          data={waypointsData.waypoints}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <TouchableOpacity
              style={styles.menuItem}
              onPress={() => handleWaypointSelect(item)}
            >
              <Text style={styles.menuItemText}>{item.name}</Text>
            </TouchableOpacity>
          )}
        />
        <Button
          title="Scan Again"
          onPress={() => {
            setScanned(false);
            setQRData(null);
          }}
        />
      </View>
    );
  } else if (showARScene && selectedWaypoint) {
    return (
      <ViroARSceneNavigator
        autofocus={true}
        initialScene={{
          scene: () => (
            <ARScene
              waypointsData={waypointsData}
              selectedWaypoint={selectedWaypoint}
              scaleFactor={scaleFactor}
            />
          ),
        }}
        style={styles.f1}
      />
    );
  } else {
    return (
      <View style={styles.menuContainer}>
        <Text style={styles.menuTitle}>No waypoints data available for this QR code.</Text>
        <Button
          title="Scan Again"
          onPress={() => {
            setScanned(false);
            setQRData(null);
          }}
        />
      </View>
    );
  }
};


const ARScene = ({ waypointsData, selectedWaypoint, scaleFactor }) => {
  
  return (
    <ViroARScene>
      <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;

I dont know why this issue happens if anyone have any idea I would appreciate the help

本文标签： Expo ReactViroios app crashing whenever position is added to reactvisionreactviro componentStack Overflow