Search for audio files on phone using React Native

Question

I'm using react native to develop a music app and I'm stuck trying to figure out the best way to search for and play audio files already saved on the clients phone. I'm just not sure what would be the best modules/libraries to solve this problem, or whether the iOS/Android OS allows this type of access to user files at all.

I'm using react-native-sound to play audio files and I've found the react-native-fs module and this looks close to what I feel I need to search for audio files. There's a readDir function, but you pass it directory path constants like MainBundlePath, CachesDirectoryPath, DocumentDirectoryPath etc:

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

// get a list of files and directories in the main bundle
RNFS.readDir(RNFS.MainBundlePath)

With: 1. MainBundlePath - The absolute path to the main bundle directory 2. CachesDirectoryPath - The absolute path to the caches directory 3. DocumentDirectoryPath - The absolute path to the document directory

Would any of these directories be where I look to find audio files already stored on the clients phone?

Answer 1

This is a 3 step process that requires storage permissions (since you're getting data from the local storage)

1. Install react-native-permissions to get storage permission from the user, then go to your AndroidManifest.xml located at YourProject/android/app/src/main/ and add the following:

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
   

2. Create functions to request and check for storage permissions before requesting for the songs, for example:

    componentDidMount() {
      Permissions.request('storage').then(response => {
        this.setState({ photoPermission: response })
      })
     }

3. Then create another function to get the data from the device (You can also pass some parameters or filters in your function--follow the react-native-get-music-files docs)

  _getSongs =() =>{
       Alert.alert('seen')
       MusicFiles.getAll({

            }).then(tracks => {
              console.log(tracks)
            }).catch(error => {
            console.log(error)
       })
     }

So, Here's what the final code looks like

import React, { Component } from 'react';
import { StyleSheet, Text, View,Alert} from 'react-native';
import MusicFiles from 'react-native-get-music-files';
import Permissions from 'react-native-permissions';

export default class App extends Component {
    state = {
       storagePermission:''
     }

    componentDidMount() {
      Permissions.request('storage').then(response => {
            this.setState({ storagePermission: response })
      })
     }


    _getSongs =() =>{
       Alert.alert('seen')
       MusicFiles.getAll({

            }).then(tracks => {
              console.log(tracks)
            }).catch(error => {
            console.log(error)
       })
     }


    render() {
        return (
            <View style={{flex:1,justifyContent:'center', alignItems:'center'}}>
                <Text onPress={this._getSongs}>get songs</Text>
            </View>
        );
    }
}

Then you get a JSON array of the list of the users songs which looks like this:

[
  {
    id : 1,
    title : "La danza del fuego",
    author : "Mago de Oz",
    album : "Finisterra",
    genre : "Folk",
    duration : 132132312321, // miliseconds
    cover : "file:///sdcard/0/123.png",
    blur : "file:///sdcard/0/123.png",
    path : "/sdcard/0/la-danza-del-fuego.mp3"
  }
]

Good luck!