React Native Possible Unhandled Promise Rejection (id: 0):

Question

I'm trying the save picture from expo camera. After that i will send this picture to cloudinary. Therefore i need base64 properties. But i have a problem.

takePictureAndCreateAlbum = async () => {
    const { uri } = await this.camera.takePictureAsync({
      base64: true
    }).then(data => {
      return (
        this.setState({
          data
        }),
        console.log("data", data)
      )
    }).catch(err => {
      throw error;}
      )
      const asset = await MediaLibrary.createAssetAsync(uri);
      MediaLibrary.createAlbumAsync('Expo', asset)
        .then(() => {
          Alert.alert('Album created!')
        })
        .catch(error => {
          Alert.alert('An Error Occurred!')
        });

        this.sendCloudinary(this.state.data)
  };

When I tried to save a picture, I got these errors:

Possible Unhandled Promise Rejection (id: 0):

TypeError: Cannot read property 'uri' of undefined

I checked another question and answers. But i didn't find a solution. How can i fix?

You are returning `undefined` from `this.camera.takePictureAsync` promise. That is throwing the error. — Prakash Sharma, Dec 18 '18 at 18:44
I would start by seeing what this.camera.takePictureAsync is returning by not destructuring the `uri` property from the response. — jasonmerino, Dec 18 '18 at 18:45
If `uri` is a property of `data` then you should return `data` from the promise. — Prakash Sharma, Dec 18 '18 at 18:45
why not just use `await` all the way down (with `try/catch` to handle your exception case) instead of mixing it with traditional promise handlers? — moribvndvs, Dec 18 '18 at 18:51
I also would not recommend mixing async / await with Promise.then() — dentemm, Dec 18 '18 at 19:12

score 0 · Answer 1 · answered Dec 18 '18 at 18:46

You probably want something more like this.

  takePictureAndCreateAlbum = async () => {
    const { uri } = await this.camera
      .takePictureAsync({
        base64: true
      })
      .then(data => {
        this.setState({
          data
        }),
          console.log("data", data);
        return data;
      })
      .catch(err => {
        throw error;
      });
    const asset = await MediaLibrary.createAssetAsync(uri);
    MediaLibrary.createAlbumAsync("Expo", asset)
      .then(() => {
        Alert.alert("Album created!");
      })
      .catch(error => {
        Alert.alert("An Error Occurred!");
      });

    this.sendCloudinary(this.state.data);
  };

In the example you posted above you're returning a combination of this.setState and a console log, when you should be returning the data from when the initial takePictureAsync promise resolved.

React Native Possible Unhandled Promise Rejection (id: 0):

1 Answers1