This article is to show you how to write a file and make it visible to users in the files application folder for iOS or the downloads folder for Android. We will be using the react-native-file-access library.
Installation
install react-native-file-access using
yarn add react-native-file-access
or
npm install react-native-file-access
Install the CocoaPods dependencies for ios
cd ios && pod install && cd ..
Usage
A base64 encoded file is required for this work.
import filesystem and dir from react-native-file-access
import { Dirs, FileSystem } from 'react-native-file-access';
The Dirs
from react-native-file-access gives us multiple directories for both iOS and android to store our files. In this article we will be using DocumentDir
which is available for both platform.
let's set the filePath and fileName.
const fileName = 'myfile.pdf'; //whatever you want to call your file
const filePath = `${Dirs.DocumentDir}/${fileName}`;
const base64Data = 'V3JpdGluZyBhIGZpbGUgYW5kIG1ha2luZyBpdCB2aXNpYmxlIHRvIHVzZXJzIGluIFJlYWN0IE5hdGl2ZQ=='; //our base64 encode file;
Now that we've set out filePath let's try to save the file for Android. Before we can do anything we need to get permission to write to the external storage. We will be using PermissionsAndroid
from react native. You can read more about it here. Once we get the permission, We are going to write our base64Data
to file Using FileSystem.writeFile
. once done we will check to see if the file was written. At this stage, the file is written but it's not yet visible to users in their downloads folder to make it visible we need to copy it over to the downloads folder and we do this by using FileSystem.cpExternal
. Once done, the users should see it.
Android
const permissionWriteExternalStorage = async () => {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
);
return granted === PermissionsAndroid.RESULTS.GRANTED;
};
if (Platform.OS === 'android') {
const permissionGranted = await permissionWriteExternalStorage();
if (permissionGranted) {
await FileSystem.writeFile(filePath, base64Data, 'base64');
if (!FileSystem.exists(filePath)) return;// check to see if our filePath was created
await FileSystem.cpExternal(filePath, fileName,'downloads');// copies our file to the downloads folder/directory
// file should now be visible in the downloads folder
}
return;
}
For ios our code is a lot shorter. All we need to do is write the file using FileSystem.writeFile
IOS
await FileSystem.writeFile(filePath, base64Data, 'base64');
We still need to do one more thing to get the file to show up in the files application folder for ios. We need to update the info.plist file. We need to add two keys: UIFileSharingEnabled
and LSSupportsOpeningDocumentsInPlace
should both be added and set to YES.
-
UIFileSharingEnabled
: Application supports iTunes file sharing -
LSSupportsOpeningDocumentsInPlace
: Supports opening documents in place
This will allow our DocumentsDirectory to be opened in iTunes and it should also allow us to see our files via the Files application.
Once that's done rebuild your app.
Top comments (2)
Thank you for the really useful guide!
While implementing it, found some mistake:
This method returns
Promise
, notbool
, so should be:Everything else work perfect 👍
By the way, is it possible to make directory in the
downloads
Android folder?