Get the array of filenames stored in document directory in React Native

Question

CASE

I have downloaded audio files to my document directory under the folder named /tracks/ as :

RNFetchBlob.fs.dirs.DocumentDir + '/tracks/'

No doubt I can read each audio by their name as :

RNFetchBlob.fs.dirs.DocumentDir + '/tracks/' + 'audio1.mp3'

QUESTION: I want to get the list of all the audios. I can see in File Access API , we can read file but I am unable to find how to get the list of audio files from the folder '/tracks/'.

I just want to have an array of filenames in that directory.

File Access API link : https://github.com/wkh237/react-native-fetch-blob/wiki/File-System-Access-API#dirs

P.S: I didn't want to go for other file access plugins. I don't know if I have to search other libraries for file listing .

UPDATE

With the following code:

var TRACK_FOLDER = RNFetchBlob.fs.dirs.DocumentDir + '/tracks/';

console.log('Files LIST in Tracks Folder = ', RNFetchBlob.fs.ls(TRACK_FOLDER));

OUTPUT IS :

I think I'm getting close but's output seems difficult to parse. :(

FINALLY:(this is the way how it is done)

    var TRACK_FOLDER = RNFetchBlob.fs.dirs.DocumentDir + '/tracks/';

    console.log('Files list in TRACK_FOLDER = ', RNFetchBlob.fs.ls(TRACK_FOLDER));

     RNFetchBlob.fs.ls(TRACK_FOLDER)
    .then( (files) =>{ 
        console.log(files.length);  
        console.log(files); 
        console.log(files[0]); 

    })

OUTPUT:

Hope this helps somebody out there.

Answer 1

RNFetchBlob.fs.ls returns a promise.

So you can either access it with using .then/.catch

RNFetchBlob.fs.ls(TRACK_FOLDER).then(files => {
  console.log(files);
}).catch(error => console.log(error))

or you can use async/await

try {
  let files = await RNFetchBlob.fs.ls(TRACK_FOLDER);
  console.log(files);
} catch (error) {
  console.log(error);
}

You can read more about RNFetchBlob.fs.ls here. Also note that the repository for RNFetchBlob has moved to here https://github.com/joltup/rn-fetch-blob