Creating a music app with React Native is a great way to build a high-performance mobile application that can run on both iOS and Android devices. React Native is a popular JavaScript framework that allows developers to build native apps using a single codebase, making it easier and more efficient to develop cross-platform applications. With its robust library of pre-built components, including audio and video players, React Native is an ideal choice for building music apps that offer seamless playback and intuitive user interfaces. In this project, developers can leverage React Native’s capabilities to create a music app that delivers an exceptional listening experience to users.

What are the prior-needed tasks?

• Setting up the relevant environment– This is the foremost task that every developer of React Native app development company undertake. To get started with the React Native framework, you have to install software like Android Studio and others. However, before that, you need to be particular about the OS you choose. In this current project, I have chosen Windows and Android. So, apart from the Android Studio, I need VS Code editor, Node, JDK, and React Native CLI. Also, if you choose another React Native CLI tool such as Expo CLI, the setup method will be different.

Note that if you have already installed this software, you dont need to repeat the process. For detailed information, check the linked article.

• A basic template for the project– You need a container-like structure to add the codebase. Create a new folder in your local drive and run cmd from this newly created folder. Now, you have to pass a command npx react-native init Music_app –version 0.71.3. Click on the enter key and then your template will be made. The project name is ‘Music_app’ and the version of React Native we are using is 0.71.3. This is the latest version. So, if you want to go with the other version, you have to replace the version number from the command.
• Third-party library setup– It is the most crucial step. It is because of the third-party library support that you can build such a complex project with ease. Here, you have to install @react-navigation/native-stack, React-native-simple-audio-player, and @react-navigation/native. The respective command that you have to pass in your project’s terminal is npm i @react-navigation/native-stack, npm i react-native-simple-audio-player, and npm i @react-navigation/native.

You don’t need to build the components from scratch even if you cannot find the components in the native library.

Here, React-native-simple-audio-player is used to get the audio player component and the other two libraries are used to make an easy transition between the built screens.

Getting started with the codebase and assets for the app

Adding the thumbnail for the song album

It is the section, where we have to add the images for the album. For this, you have to create an asset folder and then add another folder. You can name it ‘assets-images’. Download the thumbnail images for the song you want to add to your music app. Note that, it should be in the png format and should be of the same dimensions.

Creating the ‘Components’ folder

Add a folder named ‘Components’. Now you have to add three different (.js) folders namely Data.js, SongScreen.js, and AudioPlayer.js.

Building the Data.js folder

Image 1

The Data.js folder is more like a database where the details of all the songs are stored. It is defined under the main component ‘songs’. You can display this data by using the ‘songs’ component.

This way, you can add as many songs as you like. As you can notice the data for each song contains its title, artist, artwork, url, duration, and id.

SongScreen.js folder

Image 2

This code displays a list of songs. It imports the required components from corresponding libraries, as well as a file called Data which contains the list of songs.

It renders a FlatList component for presenting the list of items. For each item, it renders a TouchableOpacity component, which is a button.

When the user clicks the button, it will navigate them to a different screen, passing the item as a parameter.

Each item, also displays an image, the title, the artist, and the duration of the song.

Image 3

After using the ‘export default’ statement, the code creates a style sheet for a SongScreen component. The style sheet uses the StyleSheet.create() method to create a styles object containing various styling properties.

AudioPlayer.js folder

Image 4

First, the code imports the components from React and React Native libraries. These are used to build the interface of mobile applications.

 It also imports the AudioPlayer component from the react-native-simple-audio-player library.

It defines the AudioPlayers function, which takes in a route parameter.

The code logs the URL to the console and utilizes it to create an AudioPlayer component. Note that the URL is taken from the route parameter. Finally, the code exports the AudioPlayers function to make it available for use in other components.

Building the App.js folder

Image 5

This code sets up the music app with two different screens: AudioPlayer and SongScreen. It imports the components from the relevant libraries.

It also builds a Stack Navigator, which is a type of navigation system allowing users to move between different screens in the music app.

The code also sets up two screens, SongScreen and AudioPlayers. It sets the headerShown option to false for both screens.

Finally, the code exports the App component and creates an empty styles object.

How to execute the program?

To check the accuracy of the codebase, you need to run two commands. The first one is the npm install and the second one is the npx react-native run-android. Consider image 6 for the final result of the project.

Image 6

Check the output. You can scroll across the music album shown on the screen and can play a specific song by clicking on it. Add other songs as per your preference and get an exciting experience of music.