undefined returns from react-native-document-picker - react-native

Question

I am attempting to use the 'react-native-document-picker' module in React Native to build image file 'picking' functionality.
import React, { Component } from "react";
import { Button, Dimensions, Image, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
import DocumentPicker from 'react-native-document-picker';
export default class Images extends Component {
constructor(props) {
super(props);
this.state = {
photo: null
};
}
//*****FUNCTIONS
ChoosePhoto = async () => {
try {
const res = await DocumentPicker.pick({ type: [DocumentPicker.types.images], });
//Provide the type of file you want user to pick
console.log('File Selection Response: ' + JSON.stringify(res));
console.log('File Selection Response JSON: ' + res);
console.log(
res.uri,
res.type, // mime type
res.name,
res.size
)
this.setState({ photo: res }); // Setting the state to show single file attributes
} catch (err) {
this.setState({ photo: null });
if (DocumentPicker.isCancel(err)) {
alert('Canceled'); //user canceled the document selection
} else {
alert('Selection Error: ' + JSON.stringify(err)); //Unknown Error
} //Handling any exception (if any)
} //try routine
};
//*****
render() {
return (
<View style={styles.main}>
<TouchableOpacity
style={styles.buttonStyle}
onPress={this.ChoosePhoto}
>
<Text style={styles.buttonTextStyle}>Select Image</Text>
</TouchableOpacity>
</View>
); //return
} //render
} //class 'Images' Component
I do not receive any errors upon running the code above. The problem is that all after 'picking' a file the 'console.log' statements for returned JSON values are "undefined".
In other words the command for "const res = await DocumentPicker.pick({ type: [DocumentPicker.types.images], });" seems to run OK and the initial 'console.log' (that utilizes a 'JSON.stringify' statement) returns info like this:
File Selection Response: [{"size":144672,"fileCopyUri":null,"name":"IMG-20221228-WA0002.jpg","type":"image/jpeg","uri":"content://com.android.providers.media.documents/document/image%3A2483"}]
However any other 'console.log' statement that is there (without the 'JSON.stringify' statement) just reads as "undefined"...therefore the "this.setState({ photo: res });" also seems to be setting "undefined" as the value for the "photo" variable.
Does anybody know why the JSON values are returned as "undefined" after the 'pick'? How am I to set the "this.state.photo" variable correctly using the information that is returned from the 'pick'? I thank you in advance for any advice.

Answer 1

react-native-document-picker return DocumentPickerResponse[] which is array even if you set
allowMultiSelection: false
so you have to use it like an array. res.uri will be undefined but res[0].uri will get you values.
according to documentation :
Breaking in v6: pick returns a Promise<Array> instead of Promise. If you were using pick, change those usages to pickSingle.
if you want to pick only one item at a time then i suggest you should use ** pickSingle** which will return you an object instead of Array.