Music App UI in React Native | Create a Music Player in React native

[Music] hey guys welcome back to my youtube channel today in this tutorial i am going to show you how we can create this music application ui in react native so here you can see this is the music player interface in our android emulator so here we can see the song artwork then we have some information about the songs and then the timeline or the progress bar of the song and then we have the controls where we can skip to next song so here we are skipping to next song like this we can go forward or we can go backward as well right and after that at the bottom we have some other controls about the song and similarly here also in the ios simulator we can see the same thing and we can do the swipe gesture as well so as you can see here i'm swiping it is going forward and backward as well right so that is also available in this app we can control it by some gesture and also we have similar kind of controls available here so these are the controls this is the ui which i am going to create and in this timeline also we can go forward and backward in the time right now it's not affecting anything because we are not providing any functionality yet in this tutorial in this tutorial i am going to focus on ui only and later parts of the tutorial i might do the functionality of this music player so if you are interested about that also let me know in the comment section below and also like this tutorial and hit the notification bell icon while subscribing to my channel to get notified about my upcoming tutorials so without wasting any more time let's get started with the tutorial [Music] so this is our react native cli project and here i have just cleaned up this app.js file and in this app.js file i'm importing this music player and i'm showing this music player within this wrapper view and for this music player there is nothing much there there is just the text with our apple view along with these two component i have another file called data.js file which is within this model directory and in this data.js i have array of songs i have created a songs array and in this array i have some information about the songs so this is one song object for this song we have title artist image and id like this we have several songs present here and for the artwork of the song i have this assets directory and within this assets directory i have artwork directory and within this i have few images and those are the images i have added here and this array will be useful while displaying the songs so that's what i have created already now i will focus into this music player component and for creating this music player ui we need to install two packages and those packages are react native vector icons and the other one is react native slider so first i am going to install this react native vector icons in our project so for that first i need to run this npm install command in our project terminal so i have pasted it and now hit enter so it has been installed now i need to configure few things so first for the ios i need to copy these things and go to ios directory then the info.plist and here i can paste it now save it after that i need to go to ios directory by providing this cd ios command and then i can provide quad install now hit enter so pod installation has been completed now we are completed with the ios setup now we need to do for the android and for android we need to copy this command and we need to go to android directory then within the app directory we have this build.gradle file and here at the end of the file i can add it now save it so this is all we need to do for this react native vector icons now i can use it in our app now let's import icon from react native vector icon and i will use ionicons let's provide an icon to test it so i will use this heart icon and then let's provide a size of it now save it okay it's not recognizing it now we need to close this metro bundler ui and rebuild our project as we have installed this package and updated the build configuration so we need to build the project again so for this we need to use this npx react native run ios command here we can see the icon is present so it's working perfectly fine for the ios devices now let's test it for android so here is our android emulator now close this metro bundler ui process and do the similar process for android so here it is showing the heart icon in android emulator as well so it has been installed properly for both of the platform now let's install react native slider and this is pretty simple here i need to just copy this npm command and paste it here and for android i don't need to do anything for ios i need to do the pod install and for the pod install we can do it by using this command as well without providing cd ios 10 pod install we can just simply provide this npx port installed in our root directory it will update the port for our ios project so it has been installed properly in our project now we can start implementing our ui okay now i have opened this project in ios simulator and here within this music player component i will wrap this container view with a safe area view okay let's import it first and now we can use it here and within this safe area view i will provide this view and for this safe area view i will provide a style and that style will be styles container and i will change this container to main container and for the safe area view container for the flex i will provide flex 1 and i will provide this color in the background now save it now after saving it we can see that the color has been changed but now we cannot see the text content properly along with that we are also not seeing the status bar information clearly for that within this app.js here i can provide the status bar now let's provide it here and for the bar style i will use light content now we can see this status bar content clearly and for this text content we can change the text color but right now this text is not needed so i can get rid of it and after this view i will create another view and within this view i will provide this ionic on icon and for this icon color let's provide this color now for this view style let's provide some styles first we need to provide a border let's provide border top color so i will provide this color at the top border of this view so i'm creating this bottom section first and then we will focus on to the main part of the ui now for the border top width let's provide one pixel so here we can see a thin line which is not that clearly visible if i change the color to white color then it will be properly visible but i will use this subtle color here which is not that much prominent but it's there which is very subtle then for the width of it i can use device width which i can get by fetching the dimensions api from react native and i can get device width and height from this dimensions api by providing dimensions get window and now i can use this width here so this view width will be device width for the align items i will provide center and let's provide some padding vertically i will provide 15 pixel now let's provide some icons here now after this heart icon let's provide another icon which is repeat icon so now we can see that it's going at the bottom of each other but i don't want that i want it to sit beside each other so for that let's wrap this thing with another view and now for this view style let's provide flex direction row and let's provide justify content as space between and to make it effective we need to provide some width to it and for this width i will provide 80 percent so that's how it has been positioned here also we will provide some other icons as well now i am just moving these styles from these components to our style sheet let's create a style called bottom container and here i have provided this so for this view style it will be styles bottom container and for this view i will name this bottom controls let's create this style for the bottom controls and provide it here now i want to make these icons clickable so for this i will wrap this icon with touchable opacity it will automatically import a touchable opacity from react native if it is not then you need to import it then for the on press of it i will provide an empty function right now so now i can click on it so like this i will copy it several times and for the second one i will use this repeat icon for the third one i will use share outline and if you are wondering how do i know about these names then you can go to google and search for react native vector icons and here you will get this link where you have all the icons listed over here so here we have all the different libraries present for the icons so we are using ionicons let's go to ionicons so here is the ionicons library and we can see all the icons are listed over here so whatever we need to use we need to just copy the name from here and use it here so for the last one i will use this ellipses so i will use this ellipsis horizontal let's copy it and paste it here now save it so here we can see all these icons are present so our bottom controls has been created now we need to create the main ui which is the artwork then the song controls and all so for that here within this main container we will first create the song artwork so here i will provide a view and within this view i can provide the image i need to get the image api from react native and here i can see that it hasn't been imported automatically so i need to import it from react native and for the source of it let's use an image from our assets directory so here let's use this image now let's provide some styles for this wrapper view and i will name this as art block wrapper and for this image style i will name this as artwork image okay so now let's provide the stylings for this artwork wrapper and the artwork image now after this main container let's create this artwork wrapper style i will provide with 300 pixel for the height i will provide 340 i will provide margin button of 25 pixel now for the artwork image i will provide with hundred percent and height the same as well and let's provide a border radius to it and the border radius will be 15 pixel now it has been styled properly along with this i want to provide some shadow to it for that in this artwork wrapper i can provide some shadow and that shadow will be applicable for ios and to customize the shadow i can provide the shadow color here and i will provide this color in the shadow then for the shadow offset i will provide the same width and height here which is 5 pixel then let's provide shadow opacity and for it i will provide 0.5 then for the shadow radius here i will provide 3.84 now save it so here we can see a nice shadow has been provided here but here is a problem all these shadow properties will only work for the ios it will not work for the android for the android we need to provide the elevation and we can provide some elevation value to it but for this elevation we cannot customize it as we can do it here as you can see for the shadow color we can provide a different kind of shadow like this black color we can provide this black color so you can see that it is now darker we can provide white as well so it is more prominent and i'm using an off-white color which is this one right but for this elevation we don't have those customizations here for the elevation it will provide a shadow which will be a darker color so with this darker background this elevation will not be visible properly in the android so it is up to you if you want to provide it you can provide it otherwise without it also it's working fine in my case i will provide the shadow options because i think it's looking good and we have the option for ios so i will go with it after this artwork i will provide title and the artist name of the song so here within this view i will provide a text and here it will be the song title let's provide some styling to it and it will be styles title and after it i will provide the song artist name now let's provide the styling for this title and the artist so after this artwork image let's provide the title for the title font size i will provide 18 pixel for font weight i will use 600 which is little bolder for the text align i will provide center for the color of it i will provide this color now save it okay this 600 will be within the quotation so here we can see the song title and then here at the bottom in the dark we can see song artist name as well let's provide some styling to it to make it more prominent for it i will provide font size 16 for font weight of it i will provide thinner font weight which is 200 and here also i will provide this text align center and the color so here is our song title and the artist name now after this text information let's create the song timeline or the song progress bar so within this view we need to provide the slider and that we need to import from our react native slider package which is this react native community slash slider now we can use this slider here let's provide some styling for this style it will be styles progress container for the slider value i will provide n for the minimum value it will be zero for the maximum i will provide hundred for the thumb paint color i will provide this color for minimum track tint color i will provide the same color as well for the maximum track tint color i will provide a different color which is the white color and for the on sliding complete i will provide an empty function right now so here i can see the slider track indicator now i need to provide some styling to it to make it more prominent so after this artist let's create this progress container style for the width of it i will provide 350 for the height of this progress bar i will provide 40. let's provide some margin at the top and then for the flex direction let's provide row so here is our slider so it's showing and working perfectly fine let's provide some timing for the song duration at the left and right side of this slider actually we will provide this under this slider so for this after this slider let's create another view and for the style of this view let's provide progress label container and then provide some text here so first we will have the first text so here i will provide the zero for the styles of it i will provide progress label text and i will copy it again let's provide another duration any duration we can provide here now let's create these styles after this progress container so first we have this progress label container for the width of it i will use 340 pixel flex direction of it will be row and for the justify content i will use space between now let's provide the styling for the progress label text for the color of it i will use white color now after this progress bar let's create another view and this view will hold the controls so for this view style let's provide styles dot music controls and here i will provide some icons as i have provided here so first i will provide play skip back outline and for the size of it i will provide 35 pixel for the color of it i will use this color now save it so here is the icon now similarly copy it several times for the last icon it will be play skip forward icon and for the center it will be ios pause circle now let's provide the styling of this music controls after this progress let's provide this music control style here it will be flex direction row then for the width of it i will provide 60 for the justify content i will use space between and let's provide some margin at the top now i want to make this middle icon little bigger so here it will be 75 now it is good as i want but these two icons are sitting at the top but i want these icons to move little down so for that here we need to provide some style so for the style of it let's provide some margin top and here i will provide 25 so now it's looking perfect now we have completed the ui but this ui is not functional as we are clicking on this escape backward on forward buttons nothing is happening here and also we don't have any gesture functionality as we haven't implemented any functionality here here it is just the image nothing else so we need to work on it so we need to implement it now for that first i will import this songs array from our data.js file so here let's import songs from data.js file and now we can use it by using flat list we will use the flat list to render the songs data here so here instead of this artwork wrapper i will use flat list let me cut it from here let's use it here in this function and the function will be render songs and here i will return this artwork wrapper view and here we can expect index and items when we will use the flat list so first import it here now we can use it for its render item i will use this blender songs function okay and here for the data i will provide the songs array and for the key extractor we need to provide the item dot id and now let me provide some customization here so it will be horizontal it will scroll horizontally it will be paging enabled and for the horizontal indicator i will use false because i don't want to display any scroll indicator here and for the scroll event throttle let's use 16 now let's save it now after saving it we can see that we have multiple artwork present but it's not showing different images here let me render the items here so for the source it will be item dot image this value so here we have the assets so we will render this now it has been changed right but right now it's not looking properly so we need to change something we need to wrap this complete component with another view and for this view style let's provide width and for this width i will use the device width and for the justify content i will use center for the align items i will use center as well now we can see that it's looking good and it's scrolling perfectly fine but now we need to change the song title and the artist name while we are changing the song here for that we need to use some react hooks in our project first let me import those hooks from react so we will require use effect use ref and we will require use state as well to handle the state and now here let's create a reference variable called scroll x so it will be use ref and here i will provide a new animated value so animated needs to be imported from react native animated dot value and the value will be 0 and then dot current to use this user f and we will update this scroll x while we will scroll this flat list so here on scroll we can add animated event and it will be native event and for the content offset we need to update it with the x value so it will be x colon scroll x and then we need to provide use native driver as true now we can use it within the use effect hook now within this use effect hook for this scroll x let's add a event listener and we will get the value here and now let's console log the value first okay so here the flat list needs to be animated dot flat list and for this wrapper view also we need to provide animated dot view now let's see in our console here we can see the scroll x value so while we are scrolling our scroll x value is getting updated and now also let's see our device width so here let's copy it and for the device width i will use this with constraint so our device with this 390 and while we are scrolling once that time our scroll x value is 390 and when we are scrolling further for the next item then it is two times of this 390 right so we can get the song position by dividing these two value so here let's create a constant called index i will use math round function then i will divide these two so we will get the scroll x value from this value as well so we can use value divided by width and now let's console log it now scroll this time it is one it is zero and this is the first item so for the first item it is zero index for the second it is one so by this we will get the current array index and by using this index value we can get the item of the array right so now let's create a state here called song index and we will set it by set song index and for this i will use default value as 0 now we can set our song index with our index and we can use this song index here to display our song title so it will be songs which is the array which we have imported from our data.js file and then the song index and we will get the title of the song similarly for the artist we need to get the artist now save it so here we can see the song title and the artist name let's scroll it now we are seeing it has been changed accordingly let's see for the second item we have this title and the artist name for the third one we have this one which is matching with our added data right so it's working fine now let's change these song items by clicking on this buttons but before that here we need to remove any listener from our use effect so here for this scroll x we are adding the listener so here we can remove all listeners and let's comment out these console logs and now let's create another user of constant called song slider by default i will use null and let's create this reference for our flat list so here for the reference i will use this song slider reference and now we can use it in this skip forward and backward function so let's create skip forward function so here it will be song slider dot current dot scroll to offset and for the offset value of it it will be song index plus 1 multiplied by the device width and let's change the name to skip to next and let's copy it again and this time it will be skip to previous and here it will be song index -1 now we need to use these functions for these buttons so here for the on press of it it will be skip to previous and here it will be skip to next now save it now let's see so here it is working perfectly fine so we can go forward and we can go backward as well and here we can see that there is some extra space let's see why it is there for that here let's add a black color in the background so here we can see that this view is taking all these space to get rid of that here we need to wrap this flat list with another view and for this view we need to provide a style width and the width will be the device width now save it now after saving it we can see that it's taking only that space which is required to display its content now we can get rid of this black background color and now it's looking perfect right so now let's check it final time so here our controls is working perfectly fine and we can see that our gesture navigation is also working perfectly fine right so this is the tutorial guys i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know if you want me to create a complete music player where we can play and pause the song we can skip forward and backward in the timeline of that song then let me know in the comment section below i will try to create that tutorial very soon so share this tutorial with your friends and colleagues i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 10,331

Keywords: music app in react native, music player app in react native, music app ui in react native, music application in react native, create music app in react native, create music app ui in react native, react native music app, music app using react native, react native music player, react native music player app, react native music player ui, react native music player tutorial, react native app ui tutorial

Id: fOtCxD3AodY

Length: 31min 13sec (1873 seconds)

Published: Wed Jun 30 2021