Fix additional lifecycle bugs: countdown timer leak, PreviewScreen unmount state updates, CameraView ready loops

src/screens/CameraScreen.tsx

@@ -94,6 +94,7 @@ export default function CameraScreen({
   const usbCameraRef = useRef<UsbCameraRef>(null);
   const expoCameraRef = useRef<any>(null);
   const burstTimerRef = useRef<any>(null);
+  const countdownTimerRef = useRef<any>(null);
   const isCancelledRef = useRef<boolean>(false);
 
   // Reanimated countdown pulse animation
@@ -159,11 +160,12 @@ export default function CameraScreen({
   useEffect(() => {
     return () => {
       if (burstTimerRef.current) clearTimeout(burstTimerRef.current);
+      if (countdownTimerRef.current) clearTimeout(countdownTimerRef.current);
     };
   }, []);
 
   // Set safe picture size to avoid OOM
-  const handleCameraReady = async () => {
+  const handleCameraReady = useCallback(async () => {
     if (expoCameraRef.current) {
       try {
         const sizes = await expoCameraRef.current.getAvailablePictureSizes();
@@ -188,18 +190,24 @@ export default function CameraScreen({
             setPictureSize(optimal.size);
           } else if (parsedSizes.length > 0) {
             setPictureSize(parsedSizes[parsedSizes.length - 1].size);
+          } else {
+            setPictureSize('fallback');
           }
+        } else {
+          setPictureSize('fallback');
         }
       } catch (e) {
         console.warn('Failed to fetch picture sizes:', e);
+        setPictureSize('fallback');
       }
     }
-  };
+  }, []);
 
   // Cancel capture process
   const handleLocalCancel = async () => {
     isCancelledRef.current = true;
     if (burstTimerRef.current) clearTimeout(burstTimerRef.current);
+    if (countdownTimerRef.current) clearTimeout(countdownTimerRef.current);
     
     // Clean up any temp files from a partially completed burst
     for (const uri of burstUris) {
@@ -229,14 +237,20 @@ export default function CameraScreen({
       return;
     }
 
+    // Delay start until safe picture size is negotiated (or fallback is set)
+    // Only applies to built-in camera, USB camera ignores pictureSize
+    if (pictureSize === undefined && !isUsbConnected) {
+      console.log('Waiting for pictureSize negotiation...');
+      return;
+    }
+
     startCountdown();
 
     return () => {};
-  }, [countdownDuration, isIdle]);
+  }, [countdownDuration, isIdle, pictureSize, isUsbConnected]);
 
   const startCountdown = () => {
     isCancelledRef.current = false;
-    let timer: any;
     let count = countdownDuration;
 
     setCountdown(count);
@@ -248,20 +262,17 @@ export default function CameraScreen({
       if (count > 1) {
         count -= 1;
         setCountdown(count);
-        timer = setTimeout(runTimer, 1000);
+        countdownTimerRef.current = setTimeout(runTimer, 1000);
       } else if (count === 1) {
         setCountdown('smile');
         setIsCapturing(true);
-        timer = setTimeout(() => {
+        countdownTimerRef.current = setTimeout(() => {
           capture();
         }, 800);
       }
     };
 
-    timer = setTimeout(runTimer, 1000);
+    countdownTimerRef.current = setTimeout(runTimer, 1000);
-
-    // Store timer for cleanup
-    burstTimerRef.current = timer;
   };
 
   // 4. Capture photo function
@@ -552,7 +563,7 @@ export default function CameraScreen({
               ref={expoCameraRef}
               style={styles.cameraPreview}
               facing="front"
-              pictureSize={pictureSize}
+              pictureSize={pictureSize === 'fallback' ? undefined : pictureSize}
               onCameraReady={handleCameraReady}
             />
           )}

src/screens/PreviewScreen.tsx

@@ -3,11 +3,11 @@ import {
   StyleSheet,
   Text,
   View,
+  Image,
   TouchableOpacity,
   ActivityIndicator,
 } from 'react-native';
 import ViewShot from 'react-native-view-shot';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
@@ -72,6 +72,14 @@ export default function PreviewScreen({
 
   // Sticker state
   const [stickers, setStickers] = useState<StickerData[]>([]);
+  const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
+
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
   const [selectedStickerId, setSelectedStickerId] = useState<string | null>(null);
   const [showStickerTray, setShowStickerTray] = useState<boolean>(false);
 
@@ -214,6 +222,7 @@ export default function PreviewScreen({
     try {
       setStatusMessage('Bild wird generiert...');
       const printUri = await captureComposite(currentPhoto);
+      if (!mountedRef.current) return;
 
       setStatusMessage('Druckauftrag wird an Drucker gesendet...');
       await printImageLocal(printUri, {
@@ -223,13 +232,16 @@ export default function PreviewScreen({
 
       setStatusMessage('Wird in Galerie gespeichert...');
       await saveToGallery(printUri);
+      if (!mountedRef.current) return;
 
       setStatusMessage('Druck erfolgreich! Viel Spaß! 🎉');
       setTimeout(() => {
+        if (!mountedRef.current) return;
         setIsProcessing(false);
         onReset();
       }, 2000);
     } catch (error: any) {
+      if (!mountedRef.current) return;
       console.error('Printing failed:', error);
       alert('Fehler: ' + error.message);
       setIsProcessing(false);
@@ -243,16 +255,20 @@ export default function PreviewScreen({
     setStatusMessage('Bild wird generiert...');
     try {
       const saveUri = await captureComposite(currentPhoto);
+      if (!mountedRef.current) return;
 
       setStatusMessage('Wird in Galerie gespeichert...');
       await saveToGallery(saveUri);
+      if (!mountedRef.current) return;
 
       setStatusMessage('Erfolgreich gespeichert!');
       setTimeout(() => {
+        if (!mountedRef.current) return;
         setIsProcessing(false);
         onReset();
       }, 1500);
     } catch (error: any) {
+      if (!mountedRef.current) return;
       console.error('Saving failed:', error);
       alert('Fehler: ' + error.message);
       setIsProcessing(false);
@@ -272,13 +288,17 @@ export default function PreviewScreen({
     setStatusMessage('Wird gespeichert...');
     try {
       const capturedUri = await captureComposite(state.currentPhoto);
+      if (!mountedRef.current) return;
       await saveToGallery(capturedUri);
+      if (!mountedRef.current) return;
       setStatusMessage('Erfolgreich gespeichert!');
       setTimeout(() => {
+        if (!mountedRef.current) return;
         setIsProcessing(false);
         state.onReset();
       }, 1000);
     } catch (error) {
+      if (!mountedRef.current) return;
       console.error('Auto-saving on exit failed:', error);
       setIsProcessing(false);
       state.onReset();
@@ -307,9 +327,12 @@ export default function PreviewScreen({
       setStatusMessage('Wird vor dem Wiederholen gespeichert...');
       try {
         const capturedUri = await captureComposite(currentPhoto);
+        if (!mountedRef.current) return;
         await saveToGallery(capturedUri);
-      } catch (error) {
+        if (!mountedRef.current) return;
-        console.error('Auto-saving before retake failed:', error);
+      } catch (e) {
+        if (!mountedRef.current) return;
+        console.error('Failed to auto-save before retake:', e);
       }
       setIsProcessing(false);
     }
@@ -326,11 +349,12 @@ export default function PreviewScreen({
               {photoUris.slice(-3).map((uri, idx) => (
                 <Image 
                   key={idx} 
-                  source={uri} 
+                  source={{ uri }} 
                   style={styles.stripImage} 
-                  contentFit="cover" 
+                  resizeMode="cover"
+                  resizeMethod="resize"
                   onLoad={() => logger.log(`Image loaded successfully: ${uri}`)}
-                  onError={(e) => logger.error(`Image load failed: ${uri}`, e)}
+                  onError={(e) => logger.error(`Image load failed: ${uri}`, e.nativeEvent?.error || e)}
                 />
               ))}
             </View>
@@ -347,11 +371,12 @@ export default function PreviewScreen({
               {photoUris.slice(-4).map((uri, idx) => (
                 <Image 
                   key={idx} 
-                  source={uri} 
+                  source={{ uri }} 
                   style={styles.gridImage} 
-                  contentFit="cover" 
+                  resizeMode="cover"
+                  resizeMethod="resize"
                   onLoad={() => logger.log(`Grid Image loaded successfully: ${uri}`)}
-                  onError={(e) => logger.error(`Grid Image load failed: ${uri}`, e)}
+                  onError={(e) => logger.error(`Grid Image load failed: ${uri}`, e.nativeEvent?.error || e)}
                 />
               ))}
             </View>
@@ -367,11 +392,12 @@ export default function PreviewScreen({
               {photoUris.slice(-2).map((uri, idx) => (
                 <Image 
                   key={idx} 
-                  source={uri} 
+                  source={{ uri }} 
                   style={styles.duoImage} 
-                  contentFit="cover" 
+                  resizeMode="cover"
+                  resizeMethod="resize"
                   onLoad={() => logger.log(`Duo Image loaded successfully: ${uri}`)}
-                  onError={(e) => logger.error(`Duo Image load failed: ${uri}`, e)}
+                  onError={(e) => logger.error(`Duo Image load failed: ${uri}`, e.nativeEvent?.error || e)}
                 />
               ))}
             </View>
@@ -384,11 +410,12 @@ export default function PreviewScreen({
         return (
           <View style={styles.singleCanvas}>
             <Image
-              source={currentPhoto}
+              source={{ uri: currentPhoto }}
               style={styles.singleImage}
-              contentFit="cover"
+              resizeMode="cover"
+              resizeMethod="resize"
               onLoad={() => logger.log(`Single Image loaded successfully: ${currentPhoto}`)}
-              onError={(e) => logger.error(`Single Image load failed: ${currentPhoto}`, e)}
+              onError={(e) => logger.error(`Single Image load failed: ${currentPhoto}`, e.nativeEvent?.error || e)}
             />
           </View>
         );