CODEWITHSUNDEEP
javascriptreactjsfirebasereact-nativereact-native-fetch-blob
Gavin Thomas
Gavin Thomas

Reputation: 1867

Cannot read property 'DocumentDir' of undefined React-Native Firebase React-native-fetch-blob

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.

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

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.

Upvotes: 5

Views: 19543

Answers (10)

Mutti Ullah Qureshi
Mutti Ullah Qureshi

Reputation: 1

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

Upvotes: 0

Kazi Mahbubur Rahman
Kazi Mahbubur Rahman

Reputation: 155

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

Upvotes: 0

Nauman Jelani
Nauman Jelani

Reputation: 1

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.

Upvotes: 0

luke
luke

Reputation: 113

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

Upvotes: 1

rxs-michael
rxs-michael

Reputation: 1

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

Upvotes: 0

Er Tripti Jain
Er Tripti Jain

Reputation: 21

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

Upvotes: 2

Stano
Stano

Reputation: 171

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!

Upvotes: 3

Yash Ojha
Yash Ojha

Reputation: 818

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.

Upvotes: 0

Gavin Thomas
Gavin Thomas

Reputation: 1867

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"

Upvotes: 1

theberbie
theberbie

Reputation: 94

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

Upvotes: 0

Related Questions