React-native-camera appears as black screen

Question

I'm trying to implement an eKYC for my application, which included 3 camera screens (2 screens with back side camera, 1 with front side camera)

On some Android devices (Samsung Note 8, Xiaomi Redmi Pro 8, Vsmart Joy 3, ...), the third screen's camera (front side camera) is not working (black screen).

I've tried to read the errors from Android logcat and I receive this error:

2021-01-11 12:29:00.704 3973-13086/com.******.vn W/CameraBase: An error occurred while connecting to camera 1: Status(-8): '8: connectHelper:1648: Too many cameras already open, cannot open camera "1"'

Things I've tried: use NavigationEvents and withNavigationFocus to render the camera when current screen is focused

const [isFocus, setFocus] = useState<boolean>(false)

<NavigationEvents onWillFocus={onFocus} onWillBlur={onBlur}></NavigationEvents>

{isFocus && props.isFocused && (
    <RNCamera
      ref={refCamera}
      style={styles.preview}
      type={RNCamera.Constants.Type.front}
      captureAudio={false}
      onCameraReady={() => console.log('oncameraready')}
      onFacesDetected={onFaceDetected}>
      <View style={styles.progressBarContainer}>
        <Progress.Bar
          color={Colors.asEastOcean}
          progress={progress}
          width={200}
          style={styles.progressBar}
          borderColor={Colors.white}
          unfilledColor={Colors.white}
        />
      </View>
    </RNCamera>
  )}

But the camera on the third screen (front side camera) still not work. The other two work perfectly. Is there any way to fix this, thank you very much in advance!

Note: If I change the order and render the third screen first, the front side camera is working normally.

Answer 1

I found a way to fix the issues: On the following file of react-native-camera: android/src/main/java/com/google/android/cameraview/Camera1.java

I modified the pausePreview function as following:

    @Override
    public void pausePreview() {
        synchronized(this){
            mIsPreviewActive = false;
            mShowingPreview = false;

            if(mCamera != null){
                mCamera.stopPreview();
            }
            releaseCamera();
        }
    }

And if I have two consecutive screen that use the RNCamrera component, I used navigation.replace() instead of navigation.navigate().