0

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.

user3596565
  • 35
  • 1
  • 7

1 Answers1

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

gaby
  • 117
  • 1
  • 11
  • 1) On my desktop project folder when I add a folder, let's say "data", and add content to it, I can access it with the image tag with a link of './data/boo.png', this led me to believe that somewhere on my device, a similar file structure must exist, if the image tag is accessing it. 2) I am not creating the folder at runtime, but I have noticed that I can create files/folders and access them with RNFS. – user3596565 Aug 16 '18 at 00:29
  • Is there a way RNFS can access folders created by adding them to the project folder, like the Image tag can? I'm trying to dynamically find and display any images bundled with the app at build, and I don't want to individually link them like I would have to with the Image tag. – user3596565 Aug 16 '18 at 00:37
  • Where are you creating your data folder? can you tell me the path? – gaby Aug 16 '18 at 15:06
  • I'm adding a folder to the project folder on my PC: C:\Users\user\Dropbox\folder\folder\05_Software\app project folder\images then when I call the images with the tage it looks like: source={require('./images/ef20b264-82f2-40c1-9cc2-28b59778d2ea.png')} – user3596565 Aug 16 '18 at 21:47
  • Thank you so much for your help! I'll read up on this when I get a chance. – user3596565 Aug 17 '18 at 16:04