By: Niraj Dhungana
Nov 11 2021
Tip: The source code is at the bottom.
When it comes to React Native there are two ways to create native applications. Using the Expo cli or the React Native cli. To create a local audio player app, we need access to some of the native features of a mobile phone.
Also there is an api called expo-av. Using this api we can do all the things that are required to create an audio player. Like playing an audio, pausing, stopping and selecting the next audio.
Ok, let me break the surprise. I have already made an audio player or to be more precise I made a local audio player app using Expo React Native.
I was a very curious child from my childhood. Now I am no longer a child for other people but I am still a curious person. I get doubly curious when it comes to programming.
When I was learning to code I always wanted to know how they are building those amazing web or mobile apps. And at that point I decided to recreate every app or website that I found in this world. Just joking guys.
I always wanted to create some kind of media player app like audio, video or whatever. So, I thought why not create a local audio player app using Expo React Native.
I also made an announcement video on my YouTube channel. What are you waiting for? First, go and subscribe to my YouTube channel.
Let’s talk about some features that I wanted to add to this audio player app. There is no doubt that I wanted to create a local audio player. So, first we need to read all the audio files from the device first.
Second, obviously we want to render (display) all of the audio files of our device. So that user can see the audio files.
To render audio files we could use the ScrollView or FlatList component but when I was using them I found some problem inside the app.
Because I was building a local audio player app, which required me to test that app inside an actual device. Fortunately, that device contained over 300 audio files and then I found a new thing.
If you try to render more than 100 items inside the ScrollView or the FlatList component it will become a bit laggy and also it will show you some warning to the terminal. You can watch this video for complete understanding.
Also You May Like: How to read audio files in Expo React Native.
Then I found this thing called RecyclerListView component. Made by Flipkart, a popular tech company here in India. They are using React Native to for their mobile application and they are facing the same problem with FlatList or ScrollView components. After all, they have to display millions of products to their users.
This component allows us to render as many items as we want, without any problem. In case you want to find out how we can use this RecyclerListView component. You can watch this video.
And because of the RecyclerListView component most of the time I used class components.
After reading and rendering all of our audio files. Now it’s time to play, pause and select the next audio as well. Because this app has 3 screens. We need to control our audio files from two screen components. Like from the list itself and the audio control screen.
The last and the most important feature of this app and this is my favourite. The playlist section. Yes, I added this feature as well, where we can add and remove audio files from the playlist.
I am using AsyncStorage to store the playlist inside our device and also I used AsyncStorage to store the last played audio. If you want to learn about AsyncStorage then I have an entire video series.
If you also want to make this local audio player with me. Then I have a complete playlist inside my YouTube channel. You can learn from there.
Even though this app works perfectly fine, it has some problems. After all, we are using Expo cli to control native features. On top of that, the expo-av api works asynchronously.
When we try to update our UI on the playing state. It plays audio and counts all other times, such as how much time has passed, how much time is left and everything else.
Now because all of these processes are asynchronous, it feels a bit laggy when we try to update our UI with the value return from those asynchronous methods.
If you just want to check out the project, then these links might be helpful for you.
Important Note: currently Expo doesn't support audio playback so don't expect that from these videos.
Thanks for visiting my post and if you found anything that I miss or I might improve something then let me know. Also you can share this post with your buddies, if you want.
React Native Multi Select on Long Press - Touchable Opacity.
How to Setup react-native-cli and Android Emulator on Windows
How to Compress or Manipulate Images in React Native Expo
RecyclerListView – React Native Everything You Need to Know
React Native Android Emulator - "could not compile settings file"