Merge upstream develop

Author: github-actions[bot]

apps/polycentric/app.config.ts

@@ -65,13 +65,6 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     ],
     'expo-font',
     'expo-web-browser',
-    [
-      'react-native-vision-camera',
-      {
-        cameraPermissionText: '$(PRODUCT_NAME) needs access to your Camera.',
-        enableLocation: false,
-      },
-    ],
     [
       'expo-dev-client',
       {

apps/polycentric/package.json

@@ -67,12 +67,14 @@
     "react-native": "0.83.9",
     "react-native-draggable-flatlist": "^4.0.3",
     "react-native-gesture-handler": "~2.30.1",
+    "react-native-nitro-image": "^0.15.1",
+    "react-native-nitro-modules": "^0.35.9",
     "react-native-qrcode-svg": "^6.3.21",
     "react-native-reanimated": "~4.2.3",
     "react-native-safe-area-context": "5.8.0",
     "react-native-screens": "~4.23.0",
     "react-native-toast-message": "^2.3.3",
-    "react-native-vision-camera": "^4.7.3",
+    "react-native-vision-camera": "^5.0.0",
     "react-native-web": "~0.21.2",
     "react-native-webview": "13.16.1",
     "react-native-worklets": "0.7.2",

apps/polycentric/src/common/lib/camera/useCameraPermission.tsx

@@ -1,50 +1,18 @@
-import { useState, useEffect } from 'react';
-import { Camera } from 'react-native-vision-camera';
+import { useCameraPermission as useVisionCameraPermission } from 'react-native-vision-camera';
 
 export interface UseCameraPermissionReturn {
   hasPermission: boolean | null;
-  isLoading: boolean;
   requestPermission: () => Promise<boolean>;
-  checkPermission: () => void;
+  canRequestPermission: boolean;
 }
 
 export function useCameraPermission(): UseCameraPermissionReturn {
-  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const checkPermission = () => {
-    try {
-      const status = Camera.getCameraPermissionStatus();
-      setHasPermission(status === 'granted');
-    } catch (error) {
-      console.error('Error checking camera permission:', error);
-      setHasPermission(false);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const requestPermission = async (): Promise<boolean> => {
-    try {
-      const status = await Camera.requestCameraPermission();
-      const granted = status === 'granted';
-      setHasPermission(granted);
-      return granted;
-    } catch (error) {
-      console.error('Error requesting camera permission:', error);
-      setHasPermission(false);
-      return false;
-    }
-  };
-
-  useEffect(() => {
-    checkPermission();
-  }, []);
+  const { hasPermission, requestPermission, canRequestPermission } =
+    useVisionCameraPermission();
 
   return {
     hasPermission,
-    isLoading,
     requestPermission,
-    checkPermission,
+    canRequestPermission,
   };
 }

apps/polycentric/src/common/lib/camera/useQRScanner.tsx

@@ -1,5 +1,10 @@
 import { useState, useCallback } from 'react';
-import { useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
+import {
+  isScannedCode,
+  useCameraDevice,
+  useObjectOutput,
+} from 'react-native-vision-camera';
+import type { ScannedObject } from 'react-native-vision-camera';
 import { useCameraPermission } from './useCameraPermission';
 
 export type QRScanResult =
@@ -15,20 +20,19 @@ export interface UseQRScannerOptions {
 export interface UseQRScannerReturn {
   device: ReturnType<typeof useCameraDevice>;
   hasPermission: boolean | null;
-  isLoading: boolean;
   requestPermission: () => Promise<boolean>;
   isActive: boolean;
   setIsActive: (active: boolean) => void;
   scannedData: QRScanResult | null;
-  codeScanner: ReturnType<typeof useCodeScanner>;
+  objectOutput: ReturnType<typeof useObjectOutput>;
 }
 
 export function useQRScanner(
   options: UseQRScannerOptions = {},
 ): UseQRScannerReturn {
   const { parseJSON = false, onScan, onError } = options;
 
-  const { hasPermission, isLoading, requestPermission } = useCameraPermission();
+  const { hasPermission, requestPermission } = useCameraPermission();
   const device = useCameraDevice('back');
   const [isActive, setIsActive] = useState(false);
   const [scannedData, setScannedData] = useState<QRScanResult | null>(null);
@@ -49,12 +53,10 @@ export function useQRScanner(
     [parseJSON],
   );
 
-  const handleCodeScanned = useCallback(
-    (codes: any[]) => {
-      if (codes.length === 0) return;
-
-      const code = codes[0];
-      const rawValue = code.value;
+  const handleObjectsScanned = useCallback(
+    (objects: ScannedObject[]) => {
+      const code = objects.find(isScannedCode);
+      const rawValue = code?.value;
 
       if (!rawValue) return;
 
@@ -80,19 +82,18 @@ export function useQRScanner(
     [parseQRData, onScan, onError],
   );
 
-  const codeScanner = useCodeScanner({
-    codeTypes: ['qr'],
-    onCodeScanned: handleCodeScanned,
+  const objectOutput = useObjectOutput({
+    types: ['qr'],
+    onObjectsScanned: handleObjectsScanned,
   });
 
   return {
     device,
     hasPermission,
-    isLoading,
     requestPermission,
     isActive,
     setIsActive,
     scannedData,
-    codeScanner,
+    objectOutput,
   };
 }

apps/polycentric/src/features/identity-pairing/components/PairIdentityCamera.tsx

@@ -4,9 +4,10 @@ import { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 import {
   Camera,
+  isScannedCode,
   useCameraDevice,
   useCameraPermission,
-  useCodeScanner,
+  useObjectOutput,
 } from 'react-native-vision-camera';
 import { PairIdentityManualEntry } from './PairIdentityManualEntry';
 
@@ -26,11 +27,11 @@ export function PairIdentityCamera({
   const { theme } = useTheme();
   const scannedRef = useRef(false);
 
-  const codeScanner = useCodeScanner({
-    codeTypes: ['qr'],
-    onCodeScanned: (codes) => {
+  const objectOutput = useObjectOutput({
+    types: ['qr'],
+    onObjectsScanned: (objects) => {
       if (scannedRef.current) return;
-      const qrCode = codes[0];
+      const qrCode = objects.find(isScannedCode);
       if (qrCode?.value) {
         scannedRef.current = true;
         const { code, server } = parseInput(qrCode.value);
@@ -73,7 +74,7 @@ export function PairIdentityCamera({
             <Camera
               device={device}
               isActive={true}
-              codeScanner={codeScanner}
+              outputs={[objectOutput]}
               style={{ flex: 1 }}
             />
           </View>