iOS: Green indicator of camera don't close

[tobob]

Describe the bug When I'm using library I can see with green dot near front camera that is showing that I use Camera that is fine however it does not turn off when I turn off camera/screen with camera component

To Reproduce Steps to reproduce the behavior:

1. Use this library
2. Try to scan code
3. Use sample setup camera

      <Camera
         ref={cameraRef}
         style={styles.cameraContainer}
         scanBarcode
         cameraType={CameraType.Back}
         onReadCode={onCodeFound}
         onError={() => setHasPermission(false)}
       />

4. Tun on screen
5. Showing green indicator even after screen with camera is closed
6. Only putting app into background shut down this green idicator

Expected behavior On other apps like Instagram, when I stop using camera then this green indicator is stop showing

Smartphone (please complete the following information):

• Device: iPhone 13 Pro
• OS: 17.1.1

[tobob]

[tobob]

this can be problem, since potential users can think that my app is recording them and lost trust to app

[acherkanov]

if you're using https://reactnavigation.org/ for navigation. Just implement disabling camera with useFocusEffect or something like this:

1. const [isActive, setIsActive] = useState(false)
....
2. useEffect(() => {
  const focusUnsubscribe = navigation.addListener('focus', () => {
      setIsActive(true)
  })

  const blurUnsubscribe = navigation.addListener('blur', () => {
      setIsActive(false)
    })
  return () => {
      blurUnsubscribe()
    }
}, [navigation])
.....
3. return (
{isActive ? <Camera  .../>: null}
)

[tobob]

if you're using https://reactnavigation.org/ for navigation. Just implement disabling camera with useFocusEffect or something like this:

1. const [isActive, setIsActive] = useState(false)
....
2. useEffect(() => {
  const focusUnsubscribe = navigation.addListener('focus', () => {
      setIsActive(true)
  })

  const blurUnsubscribe = navigation.addListener('blur', () => {
      setIsActive(false)
    })
  return () => {
      blurUnsubscribe()
    }
}, [navigation])
.....
3. return (
{isActive ? <Camera  .../>: null}
)

@acherkanov I was trying it yesterday and it was not working, does it works for you?

[acherkanov]

if you're using https://reactnavigation.org/ for navigation. Just implement disabling camera with useFocusEffect or something like this:

1. const [isActive, setIsActive] = useState(false)
....
2. useEffect(() => {
  const focusUnsubscribe = navigation.addListener('focus', () => {
      setIsActive(true)
  })

  const blurUnsubscribe = navigation.addListener('blur', () => {
      setIsActive(false)
    })
  return () => {
      blurUnsubscribe()
    }
}, [navigation])
.....
3. return (
{isActive ? <Camera  .../>: null}
)

@acherkanov I was trying it yesterday and it was not working, does it works for you?

Correct, that works for me canera version: v14.0.0-beta13 rn version: 0.72.6

[tobob]

  const [isActive, setIsActive] = useState(true);
...

  const goBackWithCameraUnmount = () => {
    // handle problem with camera not unmounting
    // cousing problem with green camera indicator
    // that show up during working with app
    // that can potentially cause battery drain and security consents
    // from end users
    setIsActive(false);
    setTimeout(() => {
      navigation.goBack();
    }, 10);
  };

I did wrap my goBack method to this callback, and does not render camera if isActive is set to false