CODEWITHSUNDEEP
javascriptreactjsreact-nativeasync-await
Jae-sung Jun
Jae-sung Jun

Reputation: 13

React Native async/await does not work correctly

I want to choose photo before execute navigation.navigate(), but async/await doesn't work.
I tried to change getphotoFromCamera function in Get_Image.js to async function and added await code to launchCamera function but it didn't work.
Your help will be greatly appreciated!

Part of get_image_page.js - this function will be execute by pressing one of the buttons. 

  async buttonPress(navigation, get_image_from_where, to_navigate){    // where : string, to_navigate : string
    
    const get_image = new Get_Image();
    let res;
    try{
      if(get_image_from_where == 'camera'){
        res = await get_image.getphotoFromCamera();     //this code is bothering me :(
      }else if(get_image_from_where == 'gallery'){
        res = await get_image.getphotoFromGallery();     //this code is bothering me :(

      }
    }catch(err){
      console.log(err);
    }
    console.log("image info : " + JSON.stringify(res));
    navigation.navigate(to_navigate, {image_info: res});
  }

Get_Image.js

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import Get_Permission from './Get_Permission'

export default class Get_Image {

    constructor(){
      this.res = false;
    }
  
    getphotoFromCamera(){
  
      const get_permission = new Get_Permission();
      
      const options = {
        mediaType: 'photo',
      };
      get_permission.requestCameraPermission();
      launchCamera(options, (res) => {      //res is callback, https://github.com/react-native-image-picker/react-native-image-picker/blob/main/README.md#options.
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.error) {
          console.log('ImagePicker Error: ', res.error);
        } else if (res.customButton) {
          console.log('User tapped custom button: ', res.customButton);
          alert(res.customButton);
        } else {
          const source = { uri: res.uri };
          console.log('response', JSON.stringify(res));
          return res;
        }
      });
    }
    
    getphotoFromGallery(){
      const options = {
        mediaType: 'photo',
      };
      launchImageLibrary(options, (res) => {      //res is callback, https://github.com/react-native-image-picker/react-native-image-picker/blob/main/README.md#options.
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.error) {
          console.log('ImagePicker Error: ', res.error);
        } else if (res.customButton) {
          console.log('User tapped custom button: ', res.customButton);
          alert(res.customButton);
        } else {
          const source = { uri: res.uri };
          console.log('response', JSON.stringify(this.res));
          return res;
        }
      });
    }
  }

Upvotes: 0

Views: 1346

Answers (1)

dcangulo
dcangulo

Reputation: 2107

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import Get_Permission from './Get_Permission'

export default class Get_Image {
  constructor(){
    this.res = false;
  }
  
  getphotoFromCamera(){
    const get_permission = new Get_Permission();
    const options = { mediaType: 'photo' };
    get_permission.requestCameraPermission();
     
    return new Promise((resolve, reject) => {
      launchCamera(options, (res) => {      //res is callback, https://github.com/react-native-image-picker/react-native-image-picker/blob/main/README.md#options.
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.error) {
          console.log('ImagePicker Error: ', res.error);
        } else if (res.customButton) {
          console.log('User tapped custom button: ', res.customButton);
          alert(res.customButton);
        } else {
          const source = { uri: res.uri };
          console.log('response', JSON.stringify(res));
          resolve(res); // changed from return to resolve
        }
      });
    });
  }
    
  getphotoFromGallery(){
    const options = { mediaType: 'photo' };
    
    return new Promise((resolve, reject) => {
      launchImageLibrary(options, (res) => {      //res is callback, https://github.com/react-native-image-picker/react-native-image-picker/blob/main/README.md#options.
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.error) {
          console.log('ImagePicker Error: ', res.error);
        } else if (res.customButton) {
          console.log('User tapped custom button: ', res.customButton);
          alert(res.customButton);
        } else {
          const source = { uri: res.uri };
          console.log('response', JSON.stringify(this.res));
          resolve(res); // changed from return to resolve
        }
      });
    })
  }
}

To use async/await, you need to return a Promise in your function. I changed your function to return a Promise instead. Previously it doesn't return anything.

Upvotes: 2

Related Questions