Cannot read property of undefined (reading 'pick') when trying to use document picker in react native

Question

I'm trying to use document picker for my react-native app. I tried this command to install document picker: npm i react-native-document-picker. After writing some code, I open my app first on a web browser. But this error always happens when I try to click the button for choosing the file. Does anyone have solutions for that problem?

Thank you all very much. Below is my code sample

    import React from 'react';
    import {
      View,
      Button,
    } from 'react-native';
    import DocumentPicker from 'react-native-document-picker';
    
    export default function App() {
      const openDocument = async () => {
        try {
          const res = await DocumentPicker.pick({
            type: [DocumentPicker.types.allFiles],
          });
          console.log(
            res.uri,
            res.type, // mime type
            res.name,
            res.size
          );
        } catch (err) {
          if (DocumentPicker.isCancel(err)) {
            // User cancelled the picker, exit any dialogs or menus and move on
          } else {
            throw err;
          }
        }
      };
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Choose file" onPress={() => openDocument()} />
        </View>
      );
    }

Answer 1

Try to

console.log(res);

If it's not NULL, you have to pick a Single file, it would safe the JSON to an Array.

try {
          const res = await DocumentPicker.pickSingle({
            type: [DocumentPicker.types.allFiles],
          });
          console.log(
            res.uri,
            res.type, // mime type
            res.name,
            res.size
          );
        }

if you choose DocumentPicker.pick you have to make an for-loop

try {
          const res = await DocumentPicker.pickSingle({
            type: [DocumentPicker.types.allFiles],
          });
        for(i in res){
          console.log(
            i.uri,
            i.type, // mime type
            i.name,
            i.size
           );}
        }

Answer 2

You are using the pick function. So you will get the result in the array. If you are selecting the pick function by selecting one file then you can get the value by this

const openDocument = async () => {
    try {
      const res = await DocumentPicker.pick({
        type: [DocumentPicker.types.images],
      });
      console.log(
        res[0].uri,
        res[0].type, // mime type
        res[0].size,
        res[0].name
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        // User cancelled the picker, exit any dialogs or menus and move on
      } else {
        throw err;
      }
    }
  };

Or You can use pickSingle function

const openDocument = async () => {
    try {
      const res = await DocumentPicker.pickSingle({
        type: [DocumentPicker.types.images],
      });
      console.log(
           res.uri,
           res.type, // mime type
           res.name,
           res.size,
  );
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        // User cancelled the picker, exit any dialogs or menus and move on
      } else {
        throw err;
      }
    }
  };