🐛 [iOS] Camera always alive even after Camera component is unmounted

[ibrahim-ytl]

What's happening?

When I unmount the Camera component. The device camera is still active behind the scene. Below is the screenshot and video.

[Video]

[Image]

Reproduceable Code

import { useEffect, useState } from 'react';
import { Pressable, StyleSheet, Text, View } from "react-native"
import { Camera, useCameraDevice, useCameraPermission } from "react-native-vision-camera"

export function VisionCamera() {
    const device = useCameraDevice('back')
    const { hasPermission, requestPermission } = useCameraPermission()
    const [isCameraActive, setIsCameraActive] = useState(true)

    useEffect(() => {
        requestPermission()
    }, [])


    const onToggleCamera = () => {
        setIsCameraActive(!isCameraActive)
    }
  
    if (!hasPermission) return <Text>No camera permission</Text>
    if (device == null) return <Text>No camera device</Text>


    return (
        <View style={{ flex: 1 }}>
            {isCameraActive && (
                <Camera
                    style={StyleSheet.absoluteFill}
                    device={device}
                    isActive={isCameraActive}
                />
            )}

            <View style={{ backgroundColor: isCameraActive ? 'red' : 'green', position: 'absolute', bottom: 24, zIndex: 999, alignSelf: 'center' }}>
                <Pressable style={{ padding: 16 }} onPress={onToggleCamera}>
                    <Text style={{ color: 'white', fontWeight: 'bold', fontSize: 24 }}>
                        {isCameraActive ? 'Stop Camera' : 'Start Camera'}
                    </Text>
                </Pressable>
            </View>
        </View>
    )
  }

Relevant log output

NA

Camera Device

{
  "minZoom": 1,
  "maxExposure": 8,
  "supportsLowLightBoost": false,
  "position": "back",
  "hasTorch": true,
  "isMultiCam": false,
  "hardwareLevel": "full",
  "supportsRawCapture": false,
  "supportsFocus": true,
  "neutralZoom": 1,
  "physicalDevices": [
    "wide-angle-camera"
  ],
  "maxZoom": 16,
  "minExposure": -8,
  "name": "Back Camera",
  "hasFlash": true,
  "minFocusDistance": 12,
  "id": "com.apple.avfoundation.avcapturedevice.built-in_video:0",
  "sensorOrientation": "portrait",
  "formats": []
}

Device

iPhone XS

VisionCamera Version

4.5.3

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Additional information

• [X] I am using Expo
• [ ] I have enabled Frame Processors (react-native-worklets-core)
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar issues in this repository and found none.

[maintenance-hans[bot]]

Guten Tag, Hans here! 🍻

Thanks for your detailed report! It looks like you have a valid concern with the Camera component still being active after unmounting, but I need to point out that you haven't provided any relevant logs. For issues like this, mrousavy will need to see logs from Xcode to better understand what's happening.

You can gather logs by running your app in Xcode and checking the console output. If you share those logs, it will greatly help in troubleshooting the issue. Also, it would be beneficial if you could check whether you can reproduce this issue in the VisionCamera Example app, as that info is quite essential.

Feel free to update the issue with the logs, and we'll look into it further!

Note: If you think I made a mistake, please ping @mrousavy to take a look.

[ibrahim-ytl]

Please help me take a look. I have also provided the reproduceable code. @mrousavy

[mrousavy]

No. You didn't provide logs, which is the most important detail here. Can't help you.

[jkaufman]

I believe this is a dupe of this issue. Below is a patch to 4.5.3 to work around the behavior:

diff --git a/node_modules/react-native-vision-camera/ios/React/CameraView.swift b/node_modules/react-native-vision-camera/ios/React/CameraView.swift
index 6b85538..0cbfd44 100644
--- a/node_modules/react-native-vision-camera/ios/React/CameraView.swift
+++ b/node_modules/react-native-vision-camera/ios/React/CameraView.swift
@@ -278,7 +278,9 @@ public final class CameraView: UIView, CameraSessionDelegate, PreviewViewDelegat
     }
 
     // Prevent phone from going to sleep
-    UIApplication.shared.isIdleTimerDisabled = isActive
+    // Remove this line and instead rely on expo keep-awake.
+    // See: https://github.com/mrousavy/react-native-vision-camera/issues/3041#issuecomment-2263720909
+    // UIApplication.shared.isIdleTimerDisabled = isActive
   }
 
   func updatePreview() {

[ibrahim-ytl]

I believe this is a dupe of this issue. Below is a patch to 4.5.3 to work around the behavior:

diff --git a/node_modules/react-native-vision-camera/ios/React/CameraView.swift b/node_modules/react-native-vision-camera/ios/React/CameraView.swift
index 6b85538..0cbfd44 100644
--- a/node_modules/react-native-vision-camera/ios/React/CameraView.swift
+++ b/node_modules/react-native-vision-camera/ios/React/CameraView.swift
@@ -278,7 +278,9 @@ public final class CameraView: UIView, CameraSessionDelegate, PreviewViewDelegat
     }
 
     // Prevent phone from going to sleep
-    UIApplication.shared.isIdleTimerDisabled = isActive
+    // Remove this line and instead rely on expo keep-awake.
+    // See: https://github.com/mrousavy/react-native-vision-camera/issues/3041#issuecomment-2263720909
+    // UIApplication.shared.isIdleTimerDisabled = isActive
   }
 
   func updatePreview() {

this patch does not work. The main reason that the isActive need to be false first before the component unmounted. If the isActive state never change to false before navigating away, the green dot will be there.

ref: https://github.com/mrousavy/react-native-vision-camera/issues/3041#issuecomment-2401622720

[ibrahim-ytl]

Look like this same exact issue still exist until now: https://github.com/mrousavy/react-native-vision-camera/issues/905

By the way, since I am using react-navigation. The workaround is to delay the goBack navigations.

const onPressClose = () => {
  setIsCameraActive(false)
  setTimeout(() => goBack(), 10);
}

Side note: Thanks for the awesome library. ❤️