react-native filesystem can't find app files

Question

I'm building an app with react-native, and I'm trying to use the react-native-fs module to list out a series of images located in the app folder. The images are located in a folder in the app project folder named 'data', so for example if I want to display one of the images, this works:

<Image source={require('./data/boo.png')} />

However when I try to use react-native-fs to list out all the files in that folder like so:

  RNFS.readdir(RNFS.DocumentDirectoryPath+'/data') 
  .then((result) => {
    console.log('GOT RESULT', result);
  })
  .catch((err) => {
    console.log(err.message, err.code);
  });

I get the error 'Folder does not exist'. Also when I remove the +'/data' the only result listed is a file by the name of 'ReactNativeDevBundle.js', with a path of '/data/user/0/com.awesomeproject/files/ReactNativeDevBundle.js'. Is this the expected behavior? If this is the expected behavior, and I am doing something wrong, how can I access the file folder I want from within the app? Side question, if I wanted to provide that Image tag with an absolute path, what would that look like.

Answer 1

First, are you creating the data folder in running time? or why do you think that's where the files are?

Second,

Also when I remove the +'/data' the only result listed is a file by the name of 'ReactNativeDevBundle.js', with a path of '/data/user/0/com.awesomeproject/files/ReactNativeDevBundle.js'. Is this the expected behavior?

Yes, this is the expected behavior, RNFS.DocumentDirectoryPath goes directly to /data/user/0/com.awesomeproject/files/, this is where you should create the data folder if you want to keep using the same code you currently have

EDIT: According to one of the contributors of the package: if your folder is within the javascript-space this package won't work.

If you're using android, you may need to put the files into the assets-folder within the android-folder. Then you should be able to use readDirAssets.

I recommend to read Differences between File Source

Excerpt:

Normal Files: These files are created by your app using fs, or fetch API, you can do any operation on these files.

Asset Files: Compiled into the app bundle so generally they're on readonly mode