How to play music using React Native Application (IOS and Android)

Add and Play Music to your react native application

Hello Geeks..!!

As a programmer, we love different types of music and we love to listen to music while coding our project. But sometimes we wonder, how to make music applications using mobile app developing platforms. Some of you might use flutter while others use react native. Both are native platforms and good for making mobile applications. In this project, we are going to build a music application using react native expo. We will see how to play music using react-native. And it will work on both ios and android. So, Grab your seat take a cup of coffee, and let’s begin the hack.

Photo by Austin Distel on Unsplash

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

Set-up and Installation

1. Make a directory and open the terminal in that directory.
2. Execute the command: expo init Music
3. Select the first and blank template and let the downloads complete.
4. Navigate to the directory “Music”
5. Install one library using the command: npm install expo-av

And we are done. After the execution of these 5 steps, you will see something like this

Now, Open this project in your favorite text editor and open App.js.
First, import all the required library and its component

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity} from 'react-native';
import { Audio } from 'expo-av';

We are using react hooks. So, inside the App function update the following code.

const [sound, setSound] = React.useState();
async function playSound() {
    console.log('Loading Music');
    const { sound } = await Audio.Sound.createAsync(
       require('./assets/Eminem.mp3')               // update the music 
    );
    setSound(sound);
console.log('Playing Music');
    await sound.playAsync(); 
}

In the playSound() function first, we load the music asynchronously as it is stored in internal memory, in the assets folder. Insert one music there and update the code accordingly. While loading the music, when you look at the terminal or command prompt window it will show “loading music”, the same goes for playing music too. Now add the following code below the playSound() function.

React.useEffect(() => {
    return sound
      ? () => {
          console.log('Unloading Sound');
          sound.unloadAsync(); }
      : undefined;
  }, [sound]);
return (
    <View style={styles.container}>
      <TouchableOpacity>
        <Text onPress={playSound} style={{fontSize:25}} >Eminem- Lose Yourself</Text>
      </TouchableOpacity>
    </View>
  );

When we use the class-based function, we use componentDidMount() and further unmount it. But when we use react hook’s useEffect it runs both after the first render and after every update.
Add the styling accordingly. I just want my content to show in the middle that’s why I added this.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center',
    padding: 10,
  },
});

The whole App.js code will look like this.

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity} from 'react-native';
import { Audio } from 'expo-av';
export default function App() {
  const [sound, setSound] = React.useState();
async function playSound() {
    console.log('Loading Sound');
    const { sound } = await Audio.Sound.createAsync(
       require('./assets/Eminem.mp3')               // update the music 
    );
    setSound(sound);
console.log('Playing Sound');
    await sound.playAsync(); }
React.useEffect(() => {
    return sound
      ? () => {
          console.log('Unloading Sound');
          sound.unloadAsync(); }
      : undefined;
  }, [sound]);
return (
    <View style={styles.container}>
      <TouchableOpacity>
        <Text onPress={playSound} style={{fontSize:25}}>
          Eminem- Lose Yourself
        </Text>
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center',
    padding: 10,
  },
});

Now Open the terminal and run the server using the command: npm start
Scan the QR code and Open this project’s build-in Expo app. You will see something like this.

Click on the “Eminem- Lose Yourself” and listen to the music. It’s cool, Right?

Thank you.

Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me (freelance.rohit7@gmail.com)