I have exhausted all threads on the internet and can't find a solution. I'm trying to photo upload to firebase from my react-native app using react-native-fetch-blob. RN ios simulator running iphone 6. Not using Expo I have NOT tried running on android emulator yet, due to android env setup on different computer.

This line causes the error.

import RNFetchBlob from 'react-native-fetch-blob'

I have read many of the tutorials about using react-native-fetch-blob.

I can't seem to link it correctly, or please tell me what my issue is.

"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-fetch-blob": "^0.10.8",

What I've tried already...

npm install --save react-native-fetch-blob
react-native link 

...

npm install --save react-native-fetch-blob
react-native link react-native-fetch-blob

...

rm -rf node_modules, then reinstall, then clean and build

... I've followed the WIKI to manually link packages. Verified packages are linked via SS's ...

Clean and build after all of these scenario's.

I won't list EVERYTHING I've done because I've literally tried everything on stack and RNFB Issues/github.

Here are some screenshots from Xcode, RNFB is getting linked correctly, or at least I think.

I have found this

And will attempt a workout through AWS until someone can help with the linking of fetch blob. Ill update after I have time to work.

I have exhausted all threads on the internet and can't find a solution. I'm trying to photo upload to firebase from my react-native app using react-native-fetch-blob. RN ios simulator running iphone 6. Not using Expo I have NOT tried running on android emulator yet, due to android env setup on different computer.

This line causes the error.

import RNFetchBlob from 'react-native-fetch-blob'

I have read many of the tutorials about using react-native-fetch-blob.

I can't seem to link it correctly, or please tell me what my issue is.

"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-fetch-blob": "^0.10.8",

What I've tried already...

npm install --save react-native-fetch-blob
react-native link 

...

npm install --save react-native-fetch-blob
react-native link react-native-fetch-blob

...

rm -rf node_modules, then reinstall, then clean and build

... I've followed the WIKI to manually link packages. Verified packages are linked via SS's ...

Clean and build after all of these scenario's.

I won't list EVERYTHING I've done because I've literally tried everything on stack and RNFB Issues/github.

Here are some screenshots from Xcode, RNFB is getting linked correctly, or at least I think.

I have found this https://github.com/benjreinhart/react-native-aws3

And will attempt a workout through AWS until someone can help with the linking of fetch blob. Ill update after I have time to work.

• javascript
• reactjs
• firebase
• react-native
• react-native-fetch-blob

• I have the same issue, did you fix it? – Vito Lipari Commented Sep 21, 2020 at 9:31
• Rebuild and reinstalling the app worked for me – Pawan Verma Commented Sep 26, 2022 at 9:49

10 Answers 10

I finally managed to install react-native-fetch-blob and get rid of the Cannot read property 'DocumentDir of undefined' by:

1. Following the installation steps (I used npm to install the module).
2. Linking the package manually

I think the important part that I was missing even previously is to run pod install for iOS. For Android, the reason it didn't work for me previously might be related to the fact that I'm using react-native-navigation in my project, which means my MainApplication.java is different to the default one. Make sure you have the library listed and initialized in getPackages() method.

Here's my MainApplication.java for the reference:

public class MainApplication extends NavigationApplication {

  @Override
  protected ReactGateway createReactGateway() {
    ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
      @Override
      protected String getJSMainModuleName() {
        return "index";
      }
    };
    return new ReactGateway(this, isDebug(), host);
  }

  @Override
  public boolean isDebug() {
    return BuildConfig.DEBUG;
  }

  protected List<ReactPackage> getPackages() {
    // Add additional packages you require here
    // No need to add RnnPackage and MainReactPackage
    return Arrays.<ReactPackage>asList(
      new MapsPackage(),
      new RNFetchBlobPackage() 
    );
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
    return getPackages();
  }

  @Override
  public void onCreate() {
    super.onCreate();
    Fabric.with(this, new Crashlytics());
    SoLoader.init(this, /* native exopackage */ false);
  }

}

Hope this helps!

Just kill all node process and start npm server and run application:

Step1: run command killall -9 node For windows users, run taskkill /im node.exe Run taskkill /f /im node.exe if the process still persists.

Step2: run command npm start

Step3: run command react-native run-ios OR react-native run-android

I was cleaning up my project and removing packages I no longer needed.

I deleted FBSDK login from my project entirely and now no more errors.

"My code works. I don't know why my code works"

For the folks out there in 2021: You most likely are missing a dependency called react-native-blob-util

Are you using expo? You'd have to remove expo and edit your app.json for your app to work again.

There's a workaround here: https://github.com/wkh237/react-native-fetch-blob/issues/299

I haven't tried it myself though. I ended up removing expo altogether

Edit:

Can you try this in your MainApplication.java:

 import com.RNFetchBlob.RNFetchBlobPackage;                                                                                 
 protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNFetchBlobPackage()                                                                                         
      );
    }
  };

Source: https://github.com/wkh237/react-native-fetch-blob/wiki/Manually-Link-Package

I got the access to app's local directory by

 RNFetchBlob.fs.dirs.SDCardApplicationDir

You can append RNFetchBlob.fs.dirs.SDCardApplicationDir+"/files" to get into your app's document dir.

Just update your rn-fetch-blob version to "0.10.15",then it works for me.

In my case, I was not terminating the metro bundler of my project one and build the project two that's why my metro was accepting the configurations of project. So I terminated the project one's metro bundler and build project two it started its own metro bundler and everything worked perfectly.

You just need to terminate current process and rebuild your app after installing rn-fetch-blob then this error will be resolved

So, its better to restart vscode or the editor you are using after installing rn-fetch-blob package

add this code to your index.js file

    import { Platform } from 'react-native';
    import RNFetchBlob from 'react-native-fetch-blob';
    
    // Initialize file system module
    RNFetchBlob.config({
      fileCache: true,
      appendExt: 'jpg',

  path: Platform.OS === 'android' ? RNFetchBlob.fs.dirs.DocumentDir : RNFetchBlob.fs.dirs.DocumentDir,
});