taking a photo with react native camera and passing photo to another screen

Question

I am working on a simple react native portfolio-building app that uses react native camera. The takePicture function is defined as follows:

takePicture = async () => {
    if (this.camera) {
      let photo = await this.camera.takePictureAsync();

    }
  }

And it is called when a button is pressed:

onPress = { () => {
                    this.takePicture();
                    //console.log("loggin");
                    this.props.navigation.navigate('PictureScreen');
                  }
                  }

My issue is that I want to pass the photo to the PictureScreen. Photo is declared with let scope, so I am not able to access it and use it in my navigation call.

How do I access photo and pass it into the next screen? Should I use some sort of state mechanism?

thanks!

score 0 · Answer 1 · answered Jan 20 '21 at 21:10

You can simply return the Promise from takePictureAsync:

export class SomeComponent extends React.Component {

    camera = null;

    takePicture = () => {
        if (!this.camera) {
            throw new Error("Camera not initialized");
        }

        return this.camera.takePictureAsync();
    }

    onPress = async () => {
        try {
            const photo = await this.takePicture();
            this.props.navigation.navigate('PictureScreen', { photo });
        } catch (error) {
            console.error(`An error occured while taking the picture - ${error}`);
        }
    }

    // ...
}

taking a photo with react native camera and passing photo to another screen

1 Answers1