[SOLVED] Why is react-native-vision-camera not working with flash set to 'on'

Why is react-native-vision-camera not working with flash set to 'on'

I have a simple react native App (Android) and am trying to take a photo with flash turned on. It works perfectly fine if flash is set to 'off', however, when I set it to 'on' the flash light turns on, but no photo is beeing taken, because it always times out:

Error taking photo: [capture/timed-out: [capture/timed-out] The image capture was aborted because it timed out.]

I am using react-native-vision-camera. It neither works on my physical device nor on an emulated device.

I just can't figure out what the problem is.

Here is the code:


import React, {useRef} from 'react';
import { View, Button } from 'react-native';

import {Camera, useCameraDevice, useCameraPermission, useCameraFormat} from 'react-native-vision-camera';


function CameraScreen(){
    const camera = useRef(null);
    const device = useCameraDevice('back');

    // Handle requesting permissions ...

    const takePhoto = async () => {
        let noCameraAvailable = !camera.current;
        if (noCameraAvailable) {
            console.log("No camera available");
            return;
        }
        try {
            const photo = await camera.current.takePhoto({
                // Flash turns on but no photo is taken due to timeout, 
                // if off however it works
                flash: 'on', 
            });
            console.log("Photo: ", photo);
        } catch (error) {
            console.error("Error taking photo: ", error);
        }
    }

    return (
        <View style={styles.cameraLayoutContainer}>
            <Camera
            style={styles.childrenContainer}
                device={device}
                isActive={true}
                ref={camera}
                photo={true}
            />
            <Button title="Take photo" onPress={takePhoto} />
        </View>
        
    );
}

const styles = {
    cameraLayoutContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    childrenContainer: {
        position: 'absolute',
        width: '100%',
        height: '100%',
    },
}

export default CameraScreen;

Solution