Writing a file and making it visible to users in React Native

Adekunle Ogunade — Fri, 21 May 2021 15:01:38 +0000

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

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.

DEV Community: Adekunle Ogunade

Writing a file and making it visible to users in React Native

Installation

install react-native-file-access using

Usage