How to access local files other than JSON with react-native

Question

I need to parse a local .csv file that I include somewhere between all the js files (like some kind of local ressource). I found a library that does the job > Papaparse. But it seems like it can't "download" my local file due to incompatibilities with the Javascript-Environment.

I guess it would work if I can somehow just pass the content of my local csv file to papaparse as a string. But I can't figure out how to get the content of local csv-file inside a variable with react-native. Any Suggestions?

EDIT: I've tried it with react-native-fs. I put my csv-file under android/src/main/assets/ and try to access it with RNFS.readDirAssets('/');

-> Output is this: 08-11 14:53:14.524 17058 17202 I ReactNativeJS: [ { ctime: null, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: mtime: Invalid Date, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: name: 'AndroidManifest.xml', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: path: '//AndroidManifest.xml', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: size: 0, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isFile: [Function: isFile], 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isDirectory: [Function: isDirectory] }, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: { ctime: null, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: mtime: Invalid Date, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: name: 'META-INF', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: path: '//META-INF', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: size: 0, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isFile: [Function: isFile], 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isDirectory: [Function: isDirectory] }, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: { ctime: null, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: mtime: Invalid Date, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: name: 'assets', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: path: '//assets', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: size: 0, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isFile: [Function: isFile], 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isDirectory: [Function: isDirectory] }, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: { ctime: null, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: mtime: Invalid Date, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: name: 'classes.dex', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: path: '//classes.dex', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: size: 0, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isFile: [Function: isFile], 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isDirectory: [Function: isDirectory] }, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: { ctime: null, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: mtime: Invalid Date, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: name: 'lib', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: path: '//lib', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: size: 0, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isFile: [Function: isFile], 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isDirectory: [Function: isDirectory] }, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: { ctime: null, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: mtime: Invalid Date, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: name: 'res', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: path: '//res', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: size: 0, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isFile: [Function: isFile], 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isDirectory: [Function: isDirectory] }, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: { ctime: null, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: mtime: Invalid Date, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: name: 'resources.arsc', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: path: '//resources.arsc', 08-11 14:53:14.524 17058 17202 I ReactNativeJS: size: 0, 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isFile: [Function: isFile], 08-11 14:53:14.524 17058 17202 I ReactNativeJS: isDirectory: [Function: isDirectory] } ]

It seems like my assets folder is always empty.

Thanks for the fast reply. I've already tried with this library, but I did not figure out how to point to my csv file. Isn't it packaged inside my .apk if I put it together with the other js files? — Marcel Kirsche, Aug 08 '17 at 15:01
There are usages examples in the README for iOS and Android. — SwiftsNamesake, Aug 08 '17 at 15:15
I've found out now how to read the assets folder with react-native-fs. But I am not able to deploy my .csv file there. I've tried to place it in android/app/main/assets or even make a /assets folder in the root directory and link it with react-native link. The files inside there are never included as app assets. — Marcel Kirsche, Aug 08 '17 at 16:59
I'm not an avid Android developer, but isn't there supposed to be an assets folder included with the default project template? — SwiftsNamesake, Aug 09 '17 at 02:34
I guess there should be one, but in my case there wasn't. I've tried to manually create in and put the assets in there. But when i compile and let react-native-fs output the contents of the assets folder, it is always empty. — Marcel Kirsche, Aug 10 '17 at 09:13
https://stackoverflow.com/questions/18302603/where-do-i-place-the-assets-folder-in-android-studio — SwiftsNamesake, Aug 10 '17 at 10:33
What have you tried and what happened? Compile error? Runtime exception? — SwiftsNamesake, Aug 10 '17 at 15:58
Could you update the answer with the relevant parts of your program? — SwiftsNamesake, Aug 12 '17 at 11:27
Regarding the console output, it just looks like a series of logging statements. The only vaguely suspicious detail is the value of `mtime`. — SwiftsNamesake, Aug 12 '17 at 12:47
Thanks for your helping efforts, I've managed to solve the problem! — Marcel Kirsche, Aug 16 '17 at 10:58

score 4 · Accepted Answer · answered Aug 16 '17 at 10:57

I've managed to access my csv file:

Placed it inside:

android/app/src/main/assets/myFile.csv

(I've created the assets folder myself)

I was able to get the csv-data as string with the following code:

const csvFile = RNFS.readFileAssets('myFile.csv', 'ascii').then(file => {
            return file;
        });

In my case, the file was ascii-encoded, so I've put the encoding 'ascii' as second argument, otherwise I would get some error saying "invalid continuation byte".

How to access local files other than JSON with react-native

1 Answers1