is a framework for building native apps using and Javascript. In this post, I’ll walk through the process of building a music streaming similar to . What’s really cool is that the exact same code is going to work for both iOS and Android, and the apps are going to be 100 % native (no WebViews or anything). React Native React Spotify We’re going to build the ‘Now Playing’ screen, which looks like this on Spotify: Somebody stole my car radio, so now I’m gonna steal Spotify’s UI. Since I’m not a designer, and I really like Spotify’s clean design, we’re going to use this as a reference for our building our player. In the third image, I’ve opened up a screenshot in , and added rulers all over the image to accurately measure the positions, margins, font sizes etc. for all the different elements in the UI. We’ll use these measurements to style our own app’s UI. Keynote Now that we have a (stolen) design, we’re ready to start coding. So let’s create a new React Native project. Open a up a terminal window and run the following commands : $ npm install react-native-cli@latest$ react-native init ReactMusic Phew! That took a while, didn’t it? We’re ready now, just a few more commands to run : almost $ react-native run-ios # Launch an iOS emulator and run the app$ android avd & # Launch an Android emulator$ react-native run-android # Run the app on the Android emulator$ subl . # Open up the project in Sublime Text If the last command doesn’t work for you, just open up the directory ‘ReactMusic’ in any editor of your choice, or do . Your app should be up and running on both emulators, and your screen should look something like this : this Open up and . You’ll notice that they have the same code. We’re going to get rid of all of it and start from scratch. Let’s create a directory called inside the project’s root directory. Then create a file and with the following code : index.ios.js index.android.js app app/App.js Now, we can remove all the code from and , and simply render the component in both of them : index.ios.js index.android.js App If you reload the emulators (Cmd+R for iOS, and Fn+F2 for Android), you should now see a black screen with some white text on it. You can also set up Live Reloading in the emulators to automatically reload the Javascript every time you save a file after making a change. If we go back and take another look at the UI, we can see that it is made up of 5 main parts : We’re going to create one component for each of these parts, starting with the Header, which is really just a title and two buttons. We’re going to use to render the buttons. Create a directory ‘img’ in the root directory of the project to store icons and images. You can get the icons for the header from Google’s collection. Download the icons ‘keyboard arrow down’ and ‘queue music’ and copy the files from the ‘ios’ directory of the icon-set to the ‘img’ directory of the project. You can learn more about rendering images and icons . Here’s the code for Header : TouchableOpacity Material Icons here Link to full code I’ve left out the imports and the styling for the sake of brevity. Follow the link in the description below the gist for the full code. You can put this code in , and then import and use the Header component inside : app/Header.js app/App.js Next up, we have a really simple component for displaying the album art : Here is the . full code Next, we have the track title and artist : Here is the . full code For the Seek Bar, we’ll use react-native-slider, which has better cross platform styling options. $ npm install --save react-native-slider Then, we can implement the Seek Bar : Here is the full code Let’s also add a component for the controls : Here is the . full code Finally, we can put all these stateless components together in App.js to check out the UI and play around with it : Here’s a comparison, with a screenshot from Spotify on the left and our app on the right : Not too bad, eh? Now to acutally play the audio, we’ll use react-native-video. Here’s how to use it: $ npm install react-native-video — save$ npm install -g rnpm$ rnpm link react-native-video$ react-native run-ios$ react-native run-android Now let’s hook up the play and pause buttons in the component called Player : Full code is here And we can use it in the app by defining a few tracks : With a little more work, we can connect all the buttons. After everything, we will reach That’s it! You can find the full code for this blog post here: _ReactMusic - Spotify-like music player interface made using React Native_github.com aakashns/ReactMusic
