/#21 Get Audio Files On Android In React Native

#21 Get Audio Files On Android In React Native

Video: #21 Get Audio Files On Android In React Native

Subtitles

Hello guys, nice to meet you again 😀 Today, I want to show you how to get all audio files on your Android phone (includes internal and external storage) You can apply this for music app to play music With module 'react-native-get-music-files', we can get info of audio such as title, fileName, path, duration,… There are five steps for us to get all audio files STEP 1: Install necessary module 'react-native-get-music-files' Firstly, we must install module 'react-native-get-music-files' Use command: npm install –save react-native-get-music-files OK, DONE Next, we must link this module to our project using command: react-native link react-native-get-music-files OK, DONE STEP 1 STEP 2: Edit file 'android/settings.

gradle' Go to file 'android/settings.gradle' Here, look at line 3: project(':react-native-get-music-files')…'\node_modules… We have '\' instead of '/' -> I think this is a bug of react-native version 0.58.4 when link module by command 😀 We must correct this by replacing '\' to '/' STEP 3: Require to read and write storage permissions for our app We use module 'react-native-permissions' to grant our app to access storage of our phone Install this module using command: npm install –save react-native-permissions Link this module to our project (this only works for IOs) Next, go to example of 'react-native-permissions' and copy source code in file 'App.js', then paste to our file 'App.js' OK, now run app Run app again OK, fine 😀 Now, we need to allow this app to read or write on storage OK, Done step 3 STEP 4: Add model TrackInfo to contain audio info Add folder 'models', then create new file 'TrackInfo.

READ  TIK TOK TROLLS funny compilation TikTok - Part 2

js' in that folder Add all necessary attributes and constructor Render all tracks on phone Import MusicFiles from module 'react-native-get-music-files' Remove old code Get all audio files on phone in lifecycle method 'componentWillMount' We use method MusicFiles.getAll with parameters is audio's info we want to get We have: id, artist, duration, genre, title, fileName, path, we also filter audio with minimum duration and default we get path of audio OK, result we get is an array of audio info, here is object 'tracks' If we get all audio files with error, we can catch them by catch function I use console.log to show object 'tracks' for us to check I use remote debugger to show 'tracks' on browser Ok, here we get an array with two elements, expand it to see all attributes of every element We have: album, author, duration, fileName, genre, id, path, title I forgot attributes: 'fileName' and 'path' in model TrackInfo 🙂 Note this: all attributes in every element in array result is type: string, so, in model we must convert to Number for attribute type Number such as: id, duration Add an array to state: 'trackInfoArray' to contain all tracks info of our phone Use for loop to add new TrackInfo to array trackInfoArray Then, set new state 'trackInfoArray' Show error to users if there is an error occur Add new function 'renderTrackInfoArray' to show all tracks info Rebuild app and enjoy 😀 OK, one thing I want to tell you is: when we generate signed APK we will get an error, but trust me everything is fine Now, I generate signed APK and use this file to install on real Android device 🙂 BUILD FAILED, but I still up this to my google drive and download it on my phone I download it from my phone and install Here, we can see, this app is granted to write or read SD card or phone's storage Installing.

READ  Tupac Talks Donald Trump & Greed in America in 1992 Interview | MTV News

… OK, install successfully 😀 Open it Enjoy 😀 You can use 'Google Play app' or any app to play audio to check again 🙂 THANK YOU FOR WATCHING VIDEO, REMEMBER TO LIKE AND SUBSCRIBE FOR NEW VIDEO :).