Getting Started

To create a new Expo project, the only requirement is to have expo-cli installed. Then, execute the following command to create a new project directory.

Once the project directory is generated, navigate inside it as shown in the above command. Then install the required dependency to add the functionality of playing an audio file inside the React Native app. The dependency expo-av will help you use the Audio API and its promise-based asynchronous methods to play the audio files. You’re going to implement this functionality later.

The last step is to have some sound files saved in your assets folder. You can, of course, use your own audio files, but if you want to use the same audio files used in this tutorial, you can download them at the link given below.

You might have gotten the idea of what the user interface is going to look like while glimpsing the demo in the previous section. For each button, you’re going to need a different color. Hence, create a new file called contants/Colors.js and add the following code.

Require this file and all the color codes inside App.js file after other imports.

The color names are specified to mark each audio file, which are named and numbered similarly. To import all the sound files needed to build the application from the assets folder, add the below object before the App component as shown.