Reputation: 13
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
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