Reputation: 45
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.
Upvotes: 0
Views: 6652
Reputation: 117
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
Upvotes: 1