Writing a file and making it visible to users in React Native
Tags: reactnative, javascript, ios, android
Published: 2021-05-21 15:01:38

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](https://github.com/alpha0010/react-native-file-access#readme) 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

``` jsx
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. 
```jsx
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](https://reactnative.dev/docs/permissionsandroid). 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


```jsx
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
``` jsx
  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.
![Info.plist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ym49wj411saew89i46w.png)

Once that's done rebuild your app.