SoFunction
Updated on 2025-03-10

React-native-fs sample code to implement file download and text storage

Content of this article:

Simple use of react-native-fs

  1. Download files (pictures, files, videos, audio)
  2. Write text to local txt
  3. Read the contents of txt files
  4. Add new text on existing txt
  5. Delete files
  6. Upload file only iOS

github link:/itinance/react-native-fs

There is also a downloaded library:/wkh237/react-native-fetch-blob

Installation steps

first step:

npm install react-native-fs --save

Step 2:

react-native link react-native-fs

OK and start using it (if you are worried, you can compare it on github)

Simple use

import RNFS from 'react-native-fs';

Download the file

/*Download file*/
  downloadFile() {
    // On Android, use "" (MainBundlePath is not defined)

    // picture    // const downloadDest = `${}/${((() * 1000) | 0)}.jpg`;
    // const formUrl = '/?imageMogr2/quality/60/format/jpg';

    // document    // const downloadDest = `${}/${((() * 1000) | 0)}.zip`;
    // const formUrl = '/zhuqil/';

    // video    // const downloadDest = `${}/${((() * 1000) | 0)}.mp4`;
    // /stream/SnY~bbkqbi2uLEBMXHxGqnNKqyiG9ub8.mp4?vend=miaopai&
    // /stream/BNaEYOL-tEwSrAiYBnPDR03dDlFavoWD.mp4?vend=miaopai&
    // const formUrl = '/stream/9Q5ADAp2v5NHtQIeQT7t461VkNPxvC2T.mp4?vend=miaopai&';

    // Audio    const downloadDest = `${}/${((() * 1000) | 0)}.mp3`;
    // /voice/2015/0902/55e6fc6e4f7b9.mp3
    const formUrl = '/voice/2015/0818/55d2248309b09.mp3';

    const options = {
      fromUrl: formUrl,
      toFile: downloadDest,
      background: true,
      begin: (res) => {
        ('begin', res);
        ('contentLength:',  / 1024 / 1024, 'M');
      },
      progress: (res) => {

        let pro =  / ;

        ({
          progressNum: pro,
        });
      }
    };
    try {
      const ret = (options);
      (res => {
        ('success', res);

        ('file://' + downloadDest)

      }).catch(err => {
        ('err', err);
      });
    }
    catch (e) {
      (error);
    }

  }

Write text to local txt

 /*Write text to local txt*/
  writeFile() {
    // create a path you want to write to
    const path =  + '/';

    // write the file
    (path, 'This is a piece of text, YES', 'utf8')
      .then((success) => {
        ('path', path);
      })
      .catch((err) => {
        ();
      });
  }

Read the contents of txt files

/*Read the content of the txt file*/
  readFile() {
    // create a path you want to delete
    const path =  + '/';

    return (path)
      .then((result) => {
        (result);

        ({
          readTxtResult: result,
        })
      })
      .catch((err) => {
        ();

      });
  }

Add new text on existing txt

/*Add new text on existing txt*/
  appendFile() {
    const path =  + '/';

    return (path, 'Newly added text', 'utf8')
      .then((success) => {
        ('success');
      })
      .catch((err) => {
        ();

      });
  }

Delete files

  /*Delete file*/
  deleteFile() {
    // create a path you want to delete
    const path =  + '/';

    return (path)
      .then(() => {
        ('FILE DELETED');
      })
      // `unlink` will throw an error, if the item to unlink does not exist
      .catch((err) => {
        ();
      });
  }

Upload file only iOS

 /*Upload file only iOS*/
  uploadFile() {
    const uploadSrc = `${}/`;

    const uploadUrl = '/rnfs/';

    const options = {
      toUrl: uploadUrl,
      files: [{name: 'myfile', filename: '', filepath: uploadSrc, filetype: 'text/plain'}],
      background: true,
      method: 'POST', // PUT
      begin: (res) => {
        ('begin', res);
      },
      progress: (res) => {
        ('progress', res);
      }
    };

    const ret = (options);

    return (res => {
      const response = ();
      (response);

    })
      .catch(err => {
        ('err', err);
      });
  }

demo:/chjwrr/RN-react-native-fs

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.