Getting a spinning plank screen and Error: Camera is not ready yet. Wait for 'onCameraReady' callback using expo Camera component

Question

I'm new to web development and I'm trying to build an image recognition app using expo for testing. My code for the camera is below. On screen load, I get a black screen (not the camera) with my "capture" button. When I click on capture, I get the error:

Unhandled promise rejection: Error: Camera is not ready yet. Wait for 'onCameraReady' callback.

My code is below

import { Dimensions, Alert, StyleSheet, ActivityIndicator } from 'react-native';
// import { RNCamera } from 'react-native-camera';
import CaptureButton from './CaptureButton.js'
import { Camera } from 'expo-camera';


export default class AppCamera extends React.Component {
    constructor(props){
        super(props);
        this.state = { 
            identifiedAs: '',
            loading: false
        }
    }

    
    takePicture = async function(){
        if (this.camera) {
            // Pause the camera's preview
            this.camera.pausePreview();
            // Set the activity indicator
            this.setState((previousState, props) => ({
                loading: true
            }));
            // Set options
            const options = {
                base64: true
            };
            // Get the base64 version of the image
            const data = await this.camera.takePictureAsync(options)
            // Get the identified image
            this.identifyImage(data.base64);
        }
    }
    identifyImage(imageData){
        // Initialise Clarifai api
        const Clarifai = require('clarifai');
        const app = new Clarifai.App({
            apiKey: '8d5ecc284af54894a38ba9bd7e95681b'
        });
        // Identify the image
        app.models.predict(Clarifai.GENERAL_MODEL, {base64: imageData})
        .then((response) => this.displayAnswer(response.outputs[0].data.concepts[0].name)
        .catch((err) => alert(err))
        );
    }
    displayAnswer(identifiedImage){
        // Dismiss the acitivty indicator
        this.setState((prevState, props) => ({
            identifiedAs:identifiedImage,
            loading:false
        }));
    // Show an alert with the answer on
    Alert.alert(
            this.state.identifiedAs,
            '',
            { cancelable: false }
        )
        // Resume the preview
        this.camera.resumePreview();
    }



    render () {
        const styles = StyleSheet.create({
            preview: {
                flex: 1,
                justifyContent: 'flex-end',
                alignItems: 'center',
                height: Dimensions.get('window').height,
                width: Dimensions.get('window').width,
            },
            loadingIndicator: {
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
            }
        });

        return (
            <Camera ref={ref => {this.camera = ref;}}style={styles.preview}>
                 <ActivityIndicator size="large" style={styles.loadingIndicator} color="#fff" animating={this.state.loading}/>
                 <CaptureButton buttonDisabled={this.state.loading} onClick={this.takePicture.bind(this)}/>
            </Camera>
        )
    }



}```

Could someone kindly point me in the right direction to fix this error?

Answer 1

https://docs.expo.dev/versions/latest/sdk/camera/#takepictureasyncoptions

Note: Make sure to wait for the onCameraReady callback before calling this method.

So, you might resolve if you add onCameraReady props to Camera component like this document.

I'm facing issue like this, and it is not resolved now... I hope my advice works well.