react-native-fs
Advanced tools
react-native-fs is a library for file system access in React Native. It provides a wide range of functionalities for reading, writing, and managing files and directories on both iOS and Android platforms.
Read a File
This feature allows you to read the contents of a file. The code sample reads a file named 'test.txt' from the document directory and logs its contents.
const RNFS = require('react-native-fs');
RNFS.readFile(RNFS.DocumentDirectoryPath + '/test.txt', 'utf8')
.then((contents) => {
console.log(contents);
})
.catch((err) => {
console.log(err.message, err.code);
});Write a File
This feature allows you to write data to a file. The code sample writes 'Lorem ipsum dolor sit amet' to a file named 'test.txt' in the document directory.
const RNFS = require('react-native-fs');
const path = RNFS.DocumentDirectoryPath + '/test.txt';
RNFS.writeFile(path, 'Lorem ipsum dolor sit amet', 'utf8')
.then(() => {
console.log('FILE WRITTEN!');
})
.catch((err) => {
console.log(err.message);
});Delete a File
This feature allows you to delete a file. The code sample deletes a file named 'test.txt' from the document directory.
const RNFS = require('react-native-fs');
const path = RNFS.DocumentDirectoryPath + '/test.txt';
RNFS.unlink(path)
.then(() => {
console.log('FILE DELETED');
})
.catch((err) => {
console.log(err.message);
});Download a File
This feature allows you to download a file from a remote URL. The code sample downloads a file from 'https://example.com/test.txt' and saves it to the document directory.
const RNFS = require('react-native-fs');
const url = 'https://example.com/test.txt';
const path = RNFS.DocumentDirectoryPath + '/test.txt';
RNFS.downloadFile({ fromUrl: url, toFile: path }).promise
.then((result) => {
console.log('FILE DOWNLOADED', result);
})
.catch((err) => {
console.log(err.message);
});List Files in a Directory
This feature allows you to list all files in a directory. The code sample lists all files in the document directory.
const RNFS = require('react-native-fs');
RNFS.readDir(RNFS.DocumentDirectoryPath)
.then((result) => {
console.log('GOT RESULT', result);
})
.catch((err) => {
console.log(err.message, err.code);
});react-native-fetch-blob is a library that provides file system access and the ability to handle network requests. It combines the functionalities of file system operations and network requests, making it a versatile choice for handling files and data fetching.
expo-file-system is a part of the Expo SDK that provides an API for reading, writing, and managing files and directories. It is designed to work seamlessly with the Expo ecosystem and offers similar functionalities to react-native-fs with the added benefit of being integrated into the Expo platform.
Native filesystem access for react-native
writeFile and appendFile for iOS / Android consistencydownloadFile takes options object rather than parametersstopDownload will cause the rejection of promise returned by downloadFileuploadFiles promise result response property is now bodyexistsdownloadFile and uploadFiles return an object of the form { jobId: number, promise: Promise }First you need to install react-native-fs:
npm install react-native-fs --save
Add the RNFS pod to your list of application pods in your Podfile, using the path from the Podfile to the installed module:
pod 'RNFS', :path => './node_modules/react-native-fs'
Install pods as usual:
pod install
In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] Go to node_modules ➜ react-native-fs and add the .xcodeproj file
In XCode, in the project navigator, select your project. Add the lib*.a from the RNFS project to your project's Build Phases ➜ Link Binary With Libraries Click .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
Run your project (Cmd+R)
Android support is currently limited to only the DocumentDirectory. This maps to the app's files directory.
Make alterations to the following files:
android/settings.gradle...
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
android/app/build.gradle...
dependencies {
...
compile project(':react-native-fs')
}
register module (in MainActivity.java)
cat ./node_modules/react-native/package.json | grep version)import com.rnfs.RNFSPackage; // <--- import
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
......
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new RNFSPackage()) // <------- add package
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
setContentView(mReactRootView);
}
......
}
import com.rnfs.RNFSPackage; // <------- add package
public class MainActivity extends ReactActivity {
// ...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(), // <---- add comma
new RNFSPackage() // <---------- add package
);
}
import com.rnfs.RNFSPackage; // <------- add package
public class MainApplication extends Application implements ReactApplication {
// ...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(), // <---- add comma
new RNFSPackage() // <---------- add package
);
}
// require the module
var RNFS = require('react-native-fs');
// get a list of files and directories in the main bundle
RNFS.readDir(RNFS.MainBundlePath)
.then((result) => {
console.log('GOT RESULT', result);
// stat the first file
return Promise.all([RNFS.stat(result[0].path), result[0].path]);
})
.then((statResult) => {
if (statResult[0].isFile()) {
// if we have a file, read it
return RNFS.readFile(statResult[1], 'utf8');
}
return 'no file';
})
.then((contents) => {
// log the file contents
console.log(contents);
})
.catch((err) => {
console.log(err.message, err.code);
});
// require the module
var RNFS = require('react-native-fs');
// create a path you want to write to
var path = RNFS.DocumentDirectoryPath + '/test.txt';
// write the file
RNFS.writeFile(path, 'Lorem ipsum dolor sit amet', 'utf8')
.then((success) => {
console.log('FILE WRITTEN!');
})
.catch((err) => {
console.log(err.message);
});
// create a path you want to delete
var path = RNFS.DocumentDirectoryPath + '/test.txt';
return RNFS.unlink(path)
.then(() => {
console.log('FILE DELETED');
})
// `unlink` will throw an error, if the item to unlink does not exist
.catch((err) => {
console.log(err.message);
});
// require the module
var RNFS = require('react-native-fs');
var uploadUrl = 'http://requestb.in/XXXXXXX'; // For testing purposes, go to http://requestb.in/ and create your own link
// create an array of objects of the files you want to upload
var files = [
{
name: 'test1',
filename: 'test1.w4a',
filepath: RNFS.DocumentDirectoryPath + '/test1.w4a',
filetype: 'audio/x-m4a'
}, {
name: 'test2',
filename: 'test2.w4a',
filepath: RNFS.DocumentDirectoryPath + '/test2.w4a',
filetype: 'audio/x-m4a'
}
];
var uploadBegin = (response) => {
var jobId = response.jobId;
console.log('UPLOAD HAS BEGUN! JobId: ' + jobId);
};
var uploadProgress = (response) => {
var percentage = Math.floor((response.totalBytesSent/response.totalBytesExpectedToSend) * 100);
console.log('UPLOAD IS ' + percentage + '% DONE!');
};
// upload files
RNFS.uploadFiles({
toUrl: uploadUrl,
files: files,
method: 'POST',
headers: {
'Accept': 'application/json',
},
fields: {
'hello': 'world',
},
begin: uploadBegin,
progress: uploadProgress
}).promise.then((response) => {
if (response.statusCode == 200) {
console.log('FILES UPLOADED!'); // response.statusCode, response.headers, response.body
} else {
console.log('SERVER ERROR');
}
})
.catch((err) => {
if(err.description === "cancelled") {
// cancelled by user
}
console.log(err);
});
The following constants are available on the RNFS export:
MainBundlePath (String) The absolute path to the main bundle directoryCachesDirectoryPath (String) The absolute path to the caches directoryDocumentDirectoryPath (String) The absolute path to the document directoryTemporaryDirectoryPath (String) The absolute path to the temporary directory (iOS only)ExternalDirectoryPath (String) The absolute path to the external files, shared directory (android only)ExternalStorageDirectoryPath (String) The absolute path to the external storage, shared directory (android only)readDir(dirpath: string): Promise<ReadDirItem[]>Reads the contents of path. This must be an absolute path. Use the above path constants to form a usable file path.
The returned promise resolves with an array of objects with the following properties:
type ReadDirItem = {
name: string; // The name of the item
path: string; // The absolute path to the item
size: string; // Size in bytes
isFile: () => boolean; // Is the file just a file?
isDirectory: () => boolean; // Is the file a directory?
};
readdir(dirpath: string): Promise<string[]>Node.js style version of readDir that returns only the names. Note the lowercase d.
stat(filepath: string): Promise<StatResult>Stats an item at path.
The promise resolves with an object with the following properties:
type StatResult = {
name: string; // The name of the item
path: string; // The absolute path to the item
size: string; // Size in bytes
mode: number; // UNIX file mode
isFile: () => boolean; // Is the file just a file?
isDirectory: () => boolean; // Is the file a directory?
};
readFile(filepath: string, encoding?: string): Promise<string>Reads the file at path and return contents. encoding can be one of utf8 (default), ascii, base64. Use base64 for reading binary files.
Note: you will take quite a performance hit if you are reading big files
writeFile(filepath: string, contents: string, encoding?: string): Promise<void>Write the contents to filepath. encoding can be one of utf8 (default), ascii, base64. options optionally takes an object specifying the file's properties, like mode etc.
appendFile(filepath: string, contents: string, encoding?: string): Promise<void>Append the contents to filepath. encoding can be one of utf8 (default), ascii, base64.
moveFile(filepath: string, destPath: string): Promise<void>Moves the file located at filepath to destPath. This is more performant than reading and then re-writing the file data because the move is done natively and the data doesn't have to be copied or cross the bridge.
copyFile(filepath: string, destPath: string): Promise<void>Copies the file located at filepath to destPath.
unlink(filepath: string): Promise<void>Unlinks the item at filepath. If the item does not exist, an error will be thrown.
Also recursively deletes directories (works like Linux rm -rf).
exists(filepath: string): Promise<boolean>check if the item exist at filepath. If the item does not exist, return false.
mkdir(filepath: string, excludeFromBackup?: boolean): Promise<void>Create a directory at filepath. Automatically creates parents and does not throw if already exists (works like Linux mkdir -p).
(IOS only): If excludeFromBackup is true, then NSURLIsExcludedFromBackupKey attribute will be set. Apple will reject apps for storing offline cache data that does not have this attribute.
downloadFile(options: DownloadFileOptions): { jobId: number, promise: Promise<DownloadResult> }type DownloadFileOptions = {
fromUrl: string; // URL to download file from
toFile: string; // Local filesystem path to save the file to
headers?: Headers; // An object of headers to be passed to the server
background?: boolean;
progressDivider?: number;
begin?: (res: DownloadBeginCallbackResult) => void;
progress?: (res: DownloadProgressCallbackResult) => void;
};
type DownloadResult = {
jobId: number; // The download job ID, required if one wishes to cancel the download. See `stopDownload`.
statusCode: number; // The HTTP status code
bytesWritten: number; // The number of bytes written to the file
};
Download file from options.fromUrl to options.toFile. Will overwrite any previously existing file.
If options.begin is provided, it will be invoked once upon download starting when headers have been received and passed a single argument with the following properties:
type DownloadBeginCallbackResult = {
jobId: number; // The download job ID, required if one wishes to cancel the download. See `stopDownload`.
statusCode: number; // The HTTP status code
contentLength: number; // The total size in bytes of the download resource
headers: Headers; // The HTTP response headers from the server
};
If options.progress is provided, it will be invoked continuously and passed a single argument with the following properties:
type DownloadProgressCallbackResult = {
jobId: number; // The download job ID, required if one wishes to cancel the download. See `stopDownload`.
contentLength: number; // The total size in bytes of the download resource
bytesWritten: number; // The number of bytes written to the file so far
};
If options.progressDivider is provided, it will return progress events that divided by progressDivider.
For example, if progressDivider = 10, you will receive only ten callbacks for this values of progress: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
Use it for performance issues.
If progressDivider = 0, you will receive all progressCallback calls, default value is 0.
(IOS only): options.background (Boolean) - Whether to continue downloads when the app is not focused (default: false)
This option is currently only available for iOS, and you must enable
background fetch
for your project in XCode.
stopDownload(jobId: number): Promise<void>Abort the current download job with this ID. The partial file will remain on the filesystem.
uploadFiles(options: UploadFileOptions): { jobId: number, promise: Promise<UploadResult> }options (Object) - An object containing named parameters
type UploadFileOptions = {
toUrl: string; // URL to upload file to
files: UploadFileItem[]; // An array of objects with the file information to be uploaded.
headers?: Headers; // An object of headers to be passed to the server
fields?: Fields; // An object of fields to be passed to the server
method?: string; // Default is 'POST', supports 'POST' and 'PUT'
begin?: (res: UploadBeginCallbackResult) => void;
progress?: (res: UploadProgressCallbackResult) => void;
};
type UploadResult = {
jobId: number; // The upload job ID, required if one wishes to cancel the upload. See `stopUpload`.
statusCode: number; // The HTTP status code
headers: Headers; // The HTTP response headers from the server
body: string; // The HTTP response body
};
Each file should have the following structure:
type UploadFileItem = {
name: string; // Name of the file, if not defined then filename is used
filename: string; // Name of file
filepath: string; // Path to file
filetype: string; // The mimetype of the file to be uploaded, if not defined it will get mimetype from `filepath` extension
};
If options.begin is provided, it will be invoked once upon upload has begun:
type UploadBeginCallbackResult = {
jobId: number; // The upload job ID, required if one wishes to cancel the upload. See `stopUpload`.
};
If options.progress is provided, it will be invoked continuously and passed a single object with the following properties:
type UploadProgressCallbackResult = {
jobId: number; // The upload job ID, required if one wishes to cancel the upload. See `stopUpload`.
totalBytesExpectedToSend: number; // The total number of bytes that will be sent to the server
totalBytesSent: number; // The number of bytes sent to the server
};
Percentage can be computed easily by dividing totalBytesSent by totalBytesExpectedToSend.
stopUpload(jobId: number): Promise<void>Abort the current upload job with this ID.
getFSInfo(): Promise<FSInfoResult>Returns an object with the following properties:
type FSInfoResult = {
totalSpace: number; // The total amount of storage space on the device (in bytes).
freeSpace: number; // The amount of available storage space on the device (in bytes).
};
Test app to demostrate the use of the module. Useful for testing and developing the module:
FAQs
Native filesystem access for react-native
We found that react-native-fs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.