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
           );}
        }