0

a React Native newbie here.

Inside my component (inside by App.js file), I'm declaring a variable and setting it to a local CSV file, using require( ).

This errors ---> 

componentWillMount() {
  var csvFilePath = require('./assets/imagesdata.csv');

However, when I set this to the CSV I want, it gives me an error: 

Unable to resolve ./assets/imagesdata.csv" from ".//App.js`: The module `./assets/imagesdata.csv` could not be found"

The curious thing is this: if I just sub out the CSV file for another file in the same directory, let's use a .png image file, it works fine with no error -- what gives?

No error (subbed in .png file in the SAME subdirectory as the .csv file that didn't work) --->

componentWillMount() {
  var csvFilePath = require('./assets/locationlogo.png');

is there syntax specific to CSV imports that I am unfamiliar with in React?

Here is what my directory looks like, so that you can see that the CSV file in question (imagesdata.csv) is in fact in the same exact subdirectory of assets/ as the .png files that work (locationlogo.png in that example above) .

enter image description here

Thanks!

FYI: I've googled around and tried the solution proposed here (probably not applicable to my case, but i'm desperate: https://github.com/oblador/react-native-vector-icons/issues/626

This suggested running rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json before building packager, but I did this, and still didn't solve my weird error).

SpicyClubSauce
  • 4,076
  • 13
  • 37
  • 62

1 Answers1

0

Another React Native newbie here but I know the problem you are facing.

React Native allows you to read images, JSON files and a few other things but not CSV files. To get this CSV file loaded you need to access the FS of the platform(Android/iOS) you are using.

One way to achieve this is to use react-native-fs. To load the CSV file we can use the following code:

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

RNFS.readFile("imagesdata.csv")
  .then((result) => {
    console.log('file contents', result);
  })
  .catch((err) => {
    console.log(err.message, err.code);
  });

The path to be used will differ to where the file is located. Kindly refer to the react-native-fs documentation for more information.

Jagjot
  • 5,816
  • 2
  • 24
  • 41
  • ah ok thanks Jagjot. I haven't given this a shot yet, butif React Native can't read CSV files, how are they doing the require(csvfile) here? asking because i'm trying to do the same as them actually https://stackoverflow.com/questions/46849677/how-to-extract-data-to-react-state-from-csv-file-using-papa-parse/46850455 – SpicyClubSauce Feb 15 '18 at 15:56
  • @SpicyClubSauce the one they are using is ReactJS and the one we are using is React Native :) They are 2 different platforms with similar UI library and with whole different constraints. – Jagjot Feb 16 '18 at 06:38
  • That don't work for me, because my file extensions is "pb" and the file size is 80Mb – Jhonatan Pereira Oct 30 '18 at 14:46