Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Saving a files in React-Native using reart-native-fs

After saving a file using react-native-fs where does that file go?

It's not explained in the documentation or I couldn't find and it's hard to figure.

like image 999
Forad Avatar asked Feb 23 '19 09:02

Forad


People also ask

Does fs work with react-native?

This is where react-native-fs comes in. It is an easy-to-use library that lets developers read and write files and folders to the host device. In this guide, you will learn the fundamentals of the react-native-fs library and work through some advanced use cases.

How do you create a file in react-native?

Create a New React Project To create a new app/project using this tool, all we need to do is run the command "create-react-app" followed by the app name. After running the above command, a new folder called "my-sample-app" will get created and that would have all of our application code.

How do you read file in react-native fs?

below code is about how to read the file by react-native-fs on RN(React Native) project. ... // typescript style import * as RNFS from 'react-native-fs'; ... // readFile(filepath: string, encoding?: string) RNFS. readFile(filePath, 'ascii'). then(res => { ... }) .


1 Answers

When you create a file you have to specify a directory where to store the file. In the example below the path variable shows where the file will be written to.

var RNFS = require('react-native-fs');

// create a path you want to write to
// :warning: on iOS, you cannot write into `RNFS.MainBundlePath`,
// but `RNFS.DocumentDirectoryPath` exists on both platforms and is writable
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);
  });

There are several places you can store your files

The following directories are available:

  • MainBundlePath (String) The absolute path to the main bundle directory (not available on Android)
  • CachesDirectoryPath (String) The absolute path to the caches directory
  • ExternalCachesDirectoryPath (String) The absolute path to the external caches directory (android only)
  • DocumentDirectoryPath (String) The absolute path to the document directory
  • TemporaryDirectoryPath (String) The absolute path to the temporary directory (falls back to Caching-Directory on Android)
  • LibraryDirectoryPath (String) The absolute path to the NSLibraryDirectory (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)

So all you have to do is choose the directory. Note these directories are on the device.

Seeing the files on the device

iOS Simulator

If you want to find the file on your simulator on iOS all you need to do is console.log the path, which should look something like this

/Users/work/Library/Developer/CoreSimulator/Devices/2F8BEC88-BF42-4D6B-81D4-A77E6ED8CB00/data/Containers/Data/Application/BC16D2A6-55A2-475C-8173-B650A4E40CF1/Documents/

Open Finder, select Go to folder

enter image description here

And then paste in the path and that will open the folder where the file is.

enter image description here

Android Emulator

If you console.log the path for the file you should get something like this

/data/user/0/com.awesomeapp/files/

You have to run the app from Android Studio, then you need to access the Device View Explorer. You do that by going to View -> Tool Windows -> Device File Explorer

enter image description here

That should then open a windows that looks like this, where you can then browse to the file path that you were given above.

enter image description here

like image 148
Andrew Avatar answered Sep 17 '22 18:09

Andrew