Android: Torch stops working after going back from another screen 🐛

[rkostrab]

What were you trying to do?

On Android...

1. I want to show camera screen with torch='on'
2. Then I want to navigate (using react-navigation) from camera screen to another screen (let's say TestScreen)
3. When I go back to camera screen from Test screen, then torch isn't starting

This scenario is useful to someone who wants to take a picture, then go to preview screen and then wants to go back to camera screen. I've create full app code to replicate error scenario.

Reproduceable Code

import { View, ActivityIndicator, Button, Text } from 'react-native';
import React from 'react';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import { NavigationContainer, useIsFocused } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const CameraScreen = ({ navigation }) => {
  const isScreenFocused = useIsFocused()
  const devices = useCameraDevices()
  const device = devices.back

  return !device ? <ActivityIndicator style={{ flex: 1 }} /> : (
    <View style={{ flex: 1 }}>
      <Camera
        style={{ flex: 1 }}
        device={device}
        torch='on'
        isActive={isScreenFocused}/>
      <Button title='Go to TestScreen' onPress={() => navigation.navigate('TestScreen')} />
    </View>
  )
}

const TestScreen = () => <Text style={{ flex: 1, color: 'black' }}>TestScreen</Text>

const Stack = createStackNavigator();
const Navigator = () => (
  <Stack.Navigator>
    <Stack.Screen name='CameraScreen' component={CameraScreen} />
    <Stack.Screen name='TestScreen' component={TestScreen} />
  </Stack.Navigator>
)

const App = () => (
  <NavigationContainer>
    <Navigator />
  </NavigationContainer>
)

export default App;

What happened instead?

Torch not starting after going back to camera

Relevant log output

No response

Device

Android

VisionCamera Version

2.14.1

Additional information

• [ ] I am using Expo
• [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.

[rkostrab]

Here's a (weird, but working) workaround for anyone facing this issue:

...

-import React from 'react';
+import React, { useCallback, useState } from 'react';
-import { NavigationContainer, useIsFocused } from '@react-navigation/native';
+import { NavigationContainer, useIsFocused, useFocusEffect } from '@react-navigation/native';

const CameraScreen = ({ navigation }) => {
  const isScreenFocused = useIsFocused()
  const devices = useCameraDevices()
  const device = devices.back
  
+  const [isTorch, setIsTorch] = useState(false)
+  useFocusEffect(useCallback(() => {
+    setIsTorch(true);
+    return () => setIsTorch(false);
+  }, []))

  return !device ? <ActivityIndicator style={{ flex: 1 }} /> : (
    <View style={{ flex: 1 }}>
      <Camera
        style={{ flex: 1 }}
        device={device}
-        torch='on'
+        torch={isTorch ? 'on' : 'off'}
        isActive={isScreenFocused}/>
      <Button title='Go to TestScreen' onPress={() => navigation.navigate('TestScreen')} />
    </View>
  )
}

...

[mrousavy]

Hey! I've rewritten the entire Android codebase of VisionCamera from CameraX to Camera2 in the efforts of ✨ VisionCamera V3.

I just now completed the Camera2 rewrite and I believe the core structure is running, but there might be some edge cases to iron out. Can you try and test the PR #1674 for me to see if you can still reproduce this issue here?

Here's an instruction on how you can test that: https://github.com/mrousavy/react-native-vision-camera/pull/1674#issuecomment-1684104217

If the issue cannot be reproduced with that version/PR anymore, then hoorayy, I fixed it! 🎉 Otherwise please let me know and I'll keep this issue open to keep track of it.

Thank you!