npm react-native-fetch-blob - "RNFetchBlob.fetch is not a function"

Question

I am using the npm package react-native-fetch-blob.
I have followed all the steps from the git repository to use the package.

I then imported the package using the following line:

var RNFetchBlob = require('react-native-fetch-blob');

I am trying to request a BLOB containing an image from the a server.

This is my main method.

fetchAttachment: function(attachment_uri) {

   var authToken = 'youWillNeverGetThis!'
   var deviceId = '123';
   var xAuthToken = deviceId+'#'+authToken

   //Authorization : 'Bearer access-token...',
   // send http request in a new thread (using native code)
   RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+attachment_uri, {

       'Origin': 'http://10.0.1.23:8081',
       'X-AuthToken': xAuthToken
    })
    // when response status code is 200
    .then((res) => {
       // the conversion is done in native code
       let base64Str = res.base64()
       // the following conversions are done in js, it's SYNC
       let text = res.text()
       let json = res.json()
    })
    // Status code is not 200
    .catch((errorMessage, statusCode) => {
       // error handling
    });
}

I keep receiving the following error:

"Possible Unhandled Promise Refection(id: 0): TypeError: RNFetchBlob.fetch is not a function".

Any ideas?

Try var RNFetchBlob = require('react-native-fetch-blob').default; — rmevans9
– rmevans9, Commented Jul 19, 2016 at 11:44
@Cherniv it should be import RNFetchBlob from ... according to the manual. That's why .default is probably required. — robertklep
– robertklep, Commented Jul 19, 2016 at 12:04
@rmevans9 That worked. Write it up as an answer and I will accept the solution. Thanks. — Larney
– Larney, Commented Jul 19, 2016 at 12:52

rmevans9 · Accepted Answer · 2016-07-19 12:56:22Z

5

The issue is you are using ES5 style require statements with a library written against ES6/ES2015. You have two options:

ES5:

var RNFetchBlob = require('react-native-fetch-blob').default

ES6:

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

answered Jul 19, 2016 at 12:56

rmevans9

5,6831 gold badge23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viktoriia · Accepted Answer · 2021-04-11 13:37:16Z

My import looks like this : import RNFetchBlob from 'rn-fetch-blob';

but I'v got an error : TypeError: RNFetchBlob.scanFile is not a function

My code:

const downloadAudio = async () => {
    const { config, fs } = RNFetchBlob;
    const meditationFilesPath =
      Platform.OS == 'android'
        ? `${fs.dirs.DownloadDir}/meditations/${id}`
        : `${fs.dirs.DocumentDir}/meditations/${id}`;
    let audio_URL = track;
    let options = {
      fileCache: true,
      path: meditationFilesPath + `/${id}.mp3`,
      addAndroidDownloads: {
        // Related to the Android only
        useDownloadManager: true,
        notification: true,
        path: meditationFilesPath + `/${id}.mp3`,
        description: 'Audio',
      },
    };
    try {
      const resAudio = await config(options).fetch('GET', audio_URL.uri);
      if (resAudio) {
        const audio = await RNFetchBlob.fs.scanFile([
          { path: resAudio.path(), mime: 'audio/mpeg' },
        ]);
        console.log('res -> ', audio);
        Alert.alert('Audio Downloaded Successfully.');
      }
    } catch (error) {
      console.error('error from downloadAudio', error);
    }
  };

Collectives™ on Stack Overflow

npm react-native-fetch-blob - "RNFetchBlob.fetch is not a function"

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related