react-native-document-picker app closes/crashes after document selection

Question

React native learner here. I am trying to implement a react-native-document-picker in my app. Here is my simple implementation picked up from a tutorial: https://aboutreact.com/file-picker-in-react-native/amp/

and ideally should be working perfect. Here is much simplified minimal running code:

const MyDocumentPicker = () => {
  const [singleFile, setSingleFile] = useState('');
  const [multipleFile, setMultipleFile] = useState([]);

  const selectOneFile = async () => {
    //Opening Document Picker for selection of one file
    try {
      const res = await DocumentPicker.pick({
        type: [DocumentPicker.types.allFiles],
      })
      .then((resolve) => {console.log("Resolve: ", resolve)
        var res1 = resolve;
        setSingleFile(res1);
        console.log('res : ' + JSON.stringify(res)); //correct output
        console.log('URI : ' + res.uri); //outputs: content://com.android.providers.media.documents/document/image%3A25
        console.log('Type : ' + res.type); //outputs: image/jpeg
        console.log('File Name : ' + res.name); //outputs: 
        console.log('File Size: ' + res.size); //outputs: 199923
        console.log('singleFile STATE: ', singleFile); //outputs: ""
        console.log('singleFile STATE TYPEOF: ', typeof singleFile); //outputs: string
        console.log('singleFile STATE LENGTH: ', singleFile.length);  //outputs:  0
      })
      .catch((reject) => console.log("Reject: ", reject));
      
    } catch (err) {
      console.log("Exception error: ", err);
      //Handling any exception (If any)
      if (DocumentPicker.isCancel(err)) {
        //If user canceled the document selection
        alert('Cancelled from single doc picker');
      } else {
        //For Unknown Error
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      {(<View>
      <Text style={styles.titleText}>
        Example of File Picker in React Native
      </Text>
      <View style={styles.container}>
        {/*To show single file attribute*/}
        <TouchableOpacity
          activeOpacity={0.5}
          style={styles.buttonStyle}
          onPress={selectOneFile}>
          {/*Single file selection button*/}
          <Text style={{marginRight: 10, fontSize: 19}}>
            Click here to pick one file
          </Text>
          <Image
            source={{
              uri: 'https://img.icons8.com/offices/40/000000/attach.png',
            }}
            style={styles.imageIconStyle}
          />
        </TouchableOpacity>
        {/*Showing the data of selected Single file*/}
        <Text style={styles.textStyle}>
          File Name: {singleFile.name ? singleFile.name : ''}
          {'\n'}
          Type: {singleFile.type ? singleFile.type : ''}
          {'\n'}
          File Size: {singleFile.size ? singleFile.size : ''}
          {'\n'}
          URI: {singleFile.uri ? singleFile.uri : ''}
          {'\n'}
        </Text>
        <View
          style={{
            backgroundColor: 'grey',
            height: 2,
            margin: 10
          }} />
      </View>
      </View>)}
    </SafeAreaView>
  );
};
...
<MyDocumentPicker/>
...
styling
...

Output looks like in console debugger: Behaviour of the app is: It crashes/closes itself as soon as image/document is selected.

It seems like, as I click on the Click here to pick one file and select an image/document, the function selectOneFile() executes successfully and does all console.log() as shown and then control exits from app.

My env details: Testing on Android simulator.

"react": "16.13.1",

"react-native": "0.63.2",

"react-native-document-picker": "^4.1.0",

In AndroidManifest.xml I added:

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Any direction, what could be the reason. Stuck in this situation for last 2 days.

Answer 1

I am also facing same crash issue while selecting file.check your package JSON file try removing plugin one by one and test the document picker.In my case react-native-upi-payment caused the issue.