Build a Spotify Clone in React Native for Beginners 🔴 Live 🔴

back to a new stream today we are gonna start a new project uh we finished previous week uh our twitter clone and it was a success if you didn't see that i definitely encourage checking that out uh but today we start new we start fresh and we're gonna develop spotify clone as well in iraq native with expo with all the good stuff um yeah let's wait a couple of minutes until people drop by so let me know in the chat where you're coming from where are you joining us from and shortly in a couple of minutes we will get started [Music] okay so um yeah as i said we're gonna develop a spotify clone in drag native uh and we're gonna use uh the next technologies uh so for the front end we're gonna use jack native uh also with expo expo is a set of tools on top of react native uh and it's much easier to get started and to start a project with expo because it has a lot of things already done and uh for these purposes uh we are using expo but that doesn't mean that we have any limitation with xbomb because anytime we uh want the bare minimum react native we will be able to eject from expo so we are not limited on that side that's why i suggest everyone starting a new project in react native uh start first with expo and if you are missing some uh libraries that in expo for example i don't know some very specific hardware libraries that needs to run natively i don't know some camera filters or you name it then you'll be able to eject uh so as well we're gonna use typescript and typescript is under the hood is the same javascript uh got it got it like under the hood okay so yeah we're gonna use typescript and um for the navigation we're gonna use react navigation five for the back end uh which is not in this app this week's episode we're gonna get into the back end during the next week uh we're gonna use aws amplify uh and i'll get into more details next week so uh yeah that's about the technologies uh victor hi i'm from india uh i'm great fan of you hello victor thanks a lot thanks for joining from india um hello i'm joining from nigeria hello nigeria hello people from nigeria alexander hello hello alexandra so okay let's get started and the first thing that we need to do to start a project in using expo is run this command expo you need and the name of a project i suppose that you have already expo install if you don't uh check out on their website it's pretty easy to to install xbox cli on your machine i already have and i'm not gonna get into that now uh so open up a terminal uh let's go to a folder and here let's say expo init spotify spotify clone or spotify uh expo will ask us uh which template uh it should use it's uh it has a couple of them like blank blank with typescript tabs with typescript and we're gonna use these tabs with typescript uh it has like several example screen it has direct navigation already installed it has typescript everything set up and it makes our life a lot easier we will just need to clean something so select tabs with typescript and wait a couple of minutes until it sets up a project we should work on your jokes you don't like my jokes i'm i'm very sad about that hi i'm from okay that's an interesting name barranquilla colombia hello hi pedro so uh until we are waiting uh expo to set up a project um yeah let's see what will be our next steps uh yeah first of all let's wait to open that project and we'll get into into the details in a moment so guys where did you did you find about this uh v stream on reddit on facebook okay so it seems that our project uh has been installed successfully now i would like to open that project using my id of choice which is webstorm so uh let's remember that the folder is webstorm projects and the name of a project was spotify so i have it on our screen [Music] let me open it make it smaller to fit on the screen come on yeah i think that looks good so from the webstorm let's do uh open and go to webstorm projects twitter clone no spotify and open hi borja thank you thank you for for everything yeah let's check this in this window alexander is saying that she watched uh bubba videos and the clones edition are very cool which one did you like most twitter or instagram uh so yeah the project was opened in a webstorm and here we see uh the default files that he generated it has a folder assets for the images and fonts uh components for uh some um example components that we are using uh constants with some default uh colors and layouts uh hooks navigation for all the navigation code we're gonna get into details uh shortly in this folder into navigation and the last one is screens which defines uh the code for each screen in the application uh so let's uh open the terminal and do yarn start to start the development server of uh expo uh it will open a window like like this from where we can press run on ios simulator a new subscriber alina thank you welcome to the squad uh hi krishna great work great content thanks thanks thanks a lot thank you for watching and uh yeah i hope you find it valuable uh so yeah uh our expo is building the javascript bundle and shortly our application will be opened in the simulator and we will be able to see like what's the default application that we get just by running expo init and choosing that that template alexander is saying twitter went smoother i liked it more however the instagram one was a collab with lucas will have more collabs in future yeah i agree with twitter once more and yeah project by project it goes better and collabs with lucas yeah i hope to to be able to work again with lucas but he is quite busy with university at the moment i think you know better than me uh hi elena hello i'm sorry i'm bad with pronouncing names so i see everyone guys don't worry if i don't pronounce your name that means but i can't read it so uh yeah we see here on the simulator the application uh was run we see a bottom tab navigator with two tabs uh tab one and tab two and whenever we press on each one it uh switches the tab and we can see that the content as well switches uh the same uh with a title like type two and tab one um yep um let's get back here uh the first thing that i want to do um is to change the color scheme from light mode to dark mode and that will automatically change uh the template as well so it's very simple let's just open up json from uh the root folder and for user interface style we will define it as dark and we save it uh i don't think it will um it will refresh automatically for this change because uh it's in app.json it's uh i think we need to rerun it or even rebuild it but that's only for v specific change because now let's let's close the application here and run ios simulator would this video be available for download uh this video will be uh yeah on uh on my channel so you will always be able to to check it i'm not sure if probably you you you are able to download videos from youtube sorry we are not able to see the bottom half of the top navigator thank you a lot alex ah i almost missed that okay so uh i think that way it's much better so i can yep right now you should be able to see the the bottom of the of the screen uh and we changed the the mode from light to dark so right now we see that our bottom tab navigator is um with dark colors and the background as well so that's a good start and yeah let's move move forward um yeah the first thing that we will adjust is the bottom tab navigator and i'm talking here specifically about these four icons like home tab search your library and premium so let's go ahead and start uh changing our code to to have these four tabs there so let's close our json let's close this one and opera open our navigation and the file will be bottom tab navigator so here we we see the bottom tab navigator component uh which has uh two tabs tab one and tab two and the initial route of a navigator is tab one this is the default route so let's start the first one will be home the name is home we will leave the component to tab one at the moment but we will change to the home screen yeah for the tabar icon i prepare the icons here i already searched them but if you want to check other icons and choose you can go to this link icons.expo fy e and there you see the whole director of icons from where you can choose your icons so for the home i have until home i need to import it from on where is this one imported from yeah here from expo vector icons i need to import the and typo then which it will icons material community icons and font awesome i evil icons material community icons and font awesome five and yeah we will not need the but we might need so let's not delete it yet uh yeah let's split this import into new lines because that line is pretty huge and it doesn't fit on the screen so for the first one instead of using the custom component tab bar icon we're gonna use them in type and typo the name of of the icon will be home size uh 30 uh yeah we see here like what it was before so it was size 30 by default let's copy the styles as as this ones what else and color yeah and color we need and let's not forget to close that tag so let's try to save yeah we see our home icon here on the bottom uh and yeah it seems that it works the next one is uh search uh yeah for the icon as well we will delete this one and we're gonna use the the icon where is it uh yeah one second it's able icons search so component level icons that we just imported name search uh size 30 style and it i have auto complete for all hours yeah size 30 for the style margin bottom three and we give a color that's about search let's copy and paste this um one more time for the library or how is it called uh your library and it's material community icons library music outline i didn't find this specific one because it's custom but i think that's not the point like um i went with the easiest easier route like i chose an icon from what they already have so the name is your library vikon is material community icons and the name is la bravery music outline something like that and the last screen let's copy and paste this one it's called premium yeah i already see some errors there premium but we're gonna fix them shortly and it's from phone to awesome uh and called spotify font awesome five the name is spawn t5 right spotify save yeah our error disappeared magically and we see all our tabs here home search your library and premium that's pretty similar with what spotify has except like the the custom icon that we have for the library um yeah and also we can move from screen to screen it's uh the same component but they provided us from the template but shortly we were we're gonna modify modify that template and provide uh custom ones um yeah let's check what people are saying better thanks yeah you're welcome uh please suggest me some good course for javascript let's do that after this live stream uh write me a message and i'll get back to you okay guys uh so let's check um yeah our plan here uh the bottom tab navigator is done let's set up yeah let's set up the the home screen uh and refactor some of the code that they provided us before moving forward so um yeah from the screen let's uh rename the tab one screen rename to home screen yeah let's go here and we're gonna yeah most probably we're gonna delete everything and we're gonna do start from scratch like not to to get confused we can provide here a text hello home why i'm in not phone screen come on sorry guys i open a different uh different component i should open the home screen yeah i saw that something is uh going on and here uh yeah let's delete everything and have a text hello we don't need this one um yeah we're gonna import text and view uh from react native uh let's copy them from here because they don't want to to to make it more confusing uh yeah that's much simpler like we're gonna style them uh ourselves uh yeah and in our bottom top navigator let's check how we are importing it uh yeah so for the home screen we are importing it from screens and the name was changed to home screen save yeah now is better uh and this is our home screen the text is not visible because uh it's most probably either on the top or the color is yeah the color is black definitely so i can pretty quickly color white yeah and we see uh hello here so we have our um yeah bottom top navigator we have our home screen um yeah i think we can move forward what do you say guys so the next step before getting into that i would like to mention that in react everything is components everything is made up of components so when we start building an application we should think about how we should split our application in smaller components uh that will be easier to to write easier to maintain and the code you will not have like one file of like 10 000 line of lines of code but rather multiple files with short a small uh amount of code that will be very specific to what it needs to do so uh that's why we need to separate everything into components and the smaller component uh from the home page that we see here like this is the home page uh yeah i can put this screen uh to see the whole page uh yeah the smallest component that we can see here that we can build is the album component so an album component is this little square which contains the album cover and the names of the artists that are included in that album so once we build this album component we will be able to build this category component that we see here which will include like the title and a list of multiple albums once we develop one component one reusable component of the category uh yeah of a category component when we're gonna be able to put multiple uh components of this category into the home screen and have like multiple categories like i can't read this dutch name but for example made for you of other categories something different and so on so i think you get the idea and we were gonna we are gonna start with um creating the album component which will display as i said the album cover and the artist that are playing there so for the inputs uh like what data do we need in this component to be able to to render this this view is album idea for for internal tracking image uri to be able to display the image and artist headline which will be displayed here so we will keep that in mind when we will build our component but first of all let's go into our components folder let's create a new file no actually let's create a new directory i like to have a separate directory for each component where i split it into for example index and style and everything is in there directory so album and here we will create a file index.tsx we import import not export import react from react can you hear a very loud my keyboard because uh so far i was working on my pc on my laptop's keyboard but now i had to switch and not from react but from this react and now let's define our functional component album equal to props and here we will return probably a view with this view will contain image of the album and it will also contain the artists headline then we will be able to export default album okay let's import the view because right now it's not there uh our import view we will also need image and we will need the text component from react native um and we need to define that type of props so export type album props and as we said we will need uh input the idea of album which will be a string we will need image uri which will be string and we will need yeah the artist's headline which again will be string so we say that this props is of a type album props it will help typescript to to make sure that we actually are receiving id image uri and artist headline so yeah let's go ahead and display the image of the album using the image component source will be uri props dot image uri we're gonna need to send some styles but we're gonna create the styles uh pretty shortly and for the text for the text uh we will send here props dot artist headline like this um yeah i think that's everything that we need right now we will come back and style them in a moment but right now let's import this component and display on the our home screen so let's go to the screens home screen and let's import the component little zoom in needed do you mean for the code or for the emulator so yeah let's import [Music] album from components album yeah and here instead of a text we will display the album and we need to send there the code you mean the code okay let's let's try to do that if i can remember where to look preferences font yeah but i think it's not here it was in our material come on editor hmm yeah and i think it's not from here yeah it doesn't change from here because i'm using the uh defining the color screen yeah here uh yeah let's try with 14 or even 16. apply does it look better now yeah i'm not used to to work like this but yeah we'll try so um yeah here we'll need to send the album data which [Music] which i prepared somewhere not to waste any time let's copy it from here uh put it here guys if anyone is following along uh live i can paste the uh yeah this this code that i i prepared in the chat but if you're following uh after the live stream uh it's gonna be available in the repository so you're gonna not need to type all of these um yeah so for the album let's send the album here and we will need to change some things into the type because uh we are not receiving directly id image and image and artist we are receiving them as part of the album so if i'm not mistaken it should be like this and from the props we will no i don't want to uh ever confuse you so props dot album props dot album so yeah um from our home component we are sending the data as props as properties uh to the album component and in our album component we receive them um yeah as props and we can use them like it's it's magic i don't know um so let's save uh check what we have there probably we don't see anything because again we don't have any styles and the text by default is black so let's define here style will be styles dot image for the view we will have styles dot container and for the text we will have styles dot text now let's uh create these styles file in the same folder as our index like in the album folder styles.ts um and let's not forget to import it here import styles from styles like this so right now let's go and define our styles we will need the style sheet from react native and now we will be able to define the styles as stylesheet create we have container we have image styles and we have text okay for the text we know that uh we want to define the color which will be if we look here it's gonna be like a gray let's go with just a gray let's save and we don't see anything um yeah one thing that i like to go to debug where you wind is set background color to red and i will see if it's displayed because we are not exporting styles of course export default styles yep now is it's better so we see there our text let's define the width and height for the image yeah we see that our album container um has a fixed width and it doesn't uh expand or shrink based on the screen size but it will always be the same width so we will define this fixed width on the container of album and the image will be uh 100 of that container so um yeah the container will have for example will test i don't don't know like we 300 i'm not sure uh if that's enough and the image will have width 100 percent and the height 300 yeah probably that's a lot 300 um 150 that's probably better yeah that's uh that's better let's delete this red background because it pushes my buttons so uh we have our image and we have our um yeah the headline of the artist taylor swift swift cardi b objective c and we need some um space between the image and the text so on the text we will say margin top 10 pixels yeah probably it will be enough yeah i'm probably not the best one on the on the design part but yeah we you get the point i think it looks pretty similar it's just the sizes are different so that's why it's a bit confusing if we look from the distance i would try to increase the size of a container because here we see that it fits like two albums on the screen here we have a bit more space so let's try to go with 200 and here 200 uh yeah might be better might be better actually so our um album component is done uh based on the data that we sent to it through props it will display the album cover and the text so what's the next component that uh will use this album component uh yeah you guessed it that's album category component and uh with the red one we see this album category component and what does it has it has a title of the category and then at least a horizontal list which will be scrollable of album component that we just created so um yeah like we create components of smaller components and that's how we keep our code manageable uh yeah i suggest let's just jump into it and start implementing the implementing this album category components uh so what it will need as inputs like what props we should send to this uh component for it to be able to render all the data is definitely the title that it needs to display here and an array of albums that it will display in this flat list so let's get started how do you feel guys uh is it manageable am i going too fast too slow should i get into more details what do you think yeah um the same way we create a new folder for this component in our components folder it's gonna be called album category uh we create the index tsx uh we import react from react uh we import probably we will need text um yeah i think only text from uh from default components from react native uh it's so much better when following a video that you explain what you're going to do first and then implement it thanks a lot yeah i'm trying to to to have some structure into it because yeah i can understand that for people that are just starting with rack native this can be a bit um yeah confusing so let's try to keep it very simple and structured okay let's define our album album category component here album category we will receive the props um and we will we will return again a view and here we will say here goes the title title of category and after that a [Music] list of albums let's export the album category export default don't forget that uh yeah we forgot to import the view uh okay what else um let's define the prop types export type album category prop props and here let's uh yeah let's check what an album category will have it will have a title which will be string title which will be string why did did it with capital it's like this title because i saw it in the presentation and albums which will be an array which will be an array of albums of the album component so instead of uh defining it here uh like this like id which will be string i can do that here uh but i will need to define this uh structure the type of album everywhere where i use this album so here in the album component like here and so on so i don't want to do that that's why i will check yeah yeah we we have a a file types called and here we will define the uh the standard type of an album and we will be able to import this type and use it everywhere where we need this type so in order not to write it down again and again so album will have and we define that already here we'll have id imagery artist and so on so let's paste it here let's go into album index and refactor to include that type album from types and we delete this custom type definition to all the type definition that we import from here and now in our album category we don't need to define it again we can simply say that albums will be an array of album that we import from types okay um let's now define our styles file styles.ts import stylesheet from react native const stylesheet now con styles equal to stylesheet create and here export default styles in the index let me close everything uh in the index of album category we will import the style import styles from styles no css just styles and yeah it's imported uh right now just to see that these components is actually doing something let's uh quickly display that uh the title of a category and after that we'll get into the list of album because where it's a bit more uh interesting i need to explain some more things so the text will display the props dot title uh and it will have styles styles dot title and let's not forget uh to define the type of our props yeah this autocomplete sometimes messes up yeah the album category type that we defined on the top will be the type of props for this component uh let's go into styles and define the styles for the title to display it with a different color um title color is gonna be white yeah right now the red arrow disappeared and uh we want to display this album category in our home screen so instead of displaying one single album we will actually rename it to album category and we will import it from album category yeah here let's define it like this and it needs a title and it needs the albums title and albums i also prepare this album category here let me copy and we don't need this album already uh because we we have this data prepared like dummy data uh it's not that important because in the previous in the next week we're gonna uh integrate with a back end so all these data will come from the back end but right now i prepared with dummy data so if you're following live with me and you need this text let me know when i will drop it in the chat however if you are following after the live stream it's gonna be available in the git repository so uh yeah um we have the album category we need to send the title album category category dot title and for albums let me split it into multiple lines so you could see it for the albums we will also have album category dot albums and our albums is an arraylist of each individual album like id image and artist headline let's save and now we expect to see only the title of album if we don't have identifier album has already been declared where that's where const album equal props album props oh oh oh oh okay yeah i see in the album here we uh import the album type from uh from types and we call our component as well album so let's rename it our album component and export album component yeah we see the title happy vibes here and that's if we look into the home screen that's the title of our album category yeah probably it's not style the same as in spotify but we're gonna do that shortly do we need id for the category uh i set the id because it didn't know if we will need it most probably we will need it when we will render multiple categories in order to to have this id as the key so yeah that's some technical details of a flat list but for now we don't need it yeah thanks for the question so let's continue with our album category and here we need to display the list of the albums so in order to display a list of something we will use the flat list component from react native um let's use it here and a flat list will display yeah as i said like a list of components so the first thing that it needs uh it will even say us it will need data uh yeah doesn't have attribute data and this is uh an array of the data to be uh rendered so our data to be rendered is props dot albums this is our array that we want to render then it also needs a function called render item and it will be called uh for each specific item and it should know like what should i render for each item in this array of albums so render item we will receive the item in this function as yeah as as a parameter to the function and what we need to do with this item we need to render an album an album component and for the album we will send the item not sure if that's clear enough guys but uh as i said render item will be called for each element in our probes.albums so if we'll check a look at props.albums this is an arraylist of this is an array of uh album data that has like id image and uri so each item will be one specific album in this list and then we send this item to our album component and it knows how to render it okay that's with render item the next thing is key extractor this is like for each item uh what would be the key that react will use for caching and our internal operation and we will receive here as well item and we just have to return item dot id and we'll say like the idea of each the key of each item will be its id and one more things let's say that this flat list will be horizontal horizontal uh just writing horizontally the same thing as writing horizontal equal to true so let's keep it horizontal and if i need is not object in evaluating item dot id item dot id this one um [Music] i think it doesn't need to destructure it from here yeah it doesn't need to be structure so we already see the horizontal list of albums and we are able to scroll them uh yeah that's uh that's everything you need to display a list of um components like a feed if you need it vertically as a feed like you set it like this and you have like an instagram or facebook like feed you have horizontal like this and yeah one more thing uh there is a way to hide this scroll bar that you see on the bottom uh yeah lucas was teaching me how to to do that but i forgot but let's say flat list react native let's check the documentation um [Music] scroll bar something uh i don't think i will find it yeah i think it's not the most important thing right now yeah let's let let's go with this um yeah scroll bar that we see right now we see that we need some spacing between albums and we will also need to adjust the the the styles of the title so for the spacing for the albums uh i will go into the album component for the styles and i will add some margins to the container itself so margin let's add 10 and see how it looks uh yeah i think it already looks better let's check the original one show who is oh someone alexandra said show horizontal scroll indicator poles okay let's try that uh in the album category show horizontal scroll indicator we have it's a long name false save and it disappeared thank you a lot alexandra what do they do without you so back to what we were doing styles of albums then yeah i think it's good however i would like to decrease the width of the album component yeah can get that perfect one yeah right now we it's too barely we see the third one and the same thing is here like two and we can see the beginning of a third one um you have a spacing between i think is good uh we can scroll do we need um yeah someone else is saying show horizontal scroll indicator false yeah thank you thank you a lot overflow hidden overflow none uh why do we need overflow hidden and none in this situation yeah maybe i'm not aware of that or i'm missing something uh yeah the next thing uh let's go and style the title of the album category and we're gonna open the styles of album category title uh we definitely need uh to increase the font size font size let's give it uh 24. [Music] as well bold uh font weight bold save even bigger 28 yeah probably i feel that it's even bigger about 30 let's go with hurricane that's it and let's add some also margin to this text um margin margin 10 so to start from the same as here we have some margin on top no actually i will give a margin to the container because the container of album should have margins to to be able to separate between two album categories and we will see that shortly so let's give it a 10 and make sure that we are using it here styles dot container save yeah i think now it's better so uh are we done with or do you want to decrease the the container size here i want i want to decrease it because we again lost the third album here yeah 55 perfect for the next five minutes until i um again uh change it so album category component is done uh and we see it displayed with the title of a category with a list of albums and that's a reusable component that we can use it multiple times and give it different data and it will display them accordingly and why we need that we need that for the next step uh wait a second i messed up something there right okay never mind um yeah we need that for our uh next part that we were gonna develop which is the home screen so the home screen um is a vertical uh list of categories uh yeah we see here recently played we see here a category that i can't read because it's in dutch and we see here made for you and multiple categories down below we already have this component and we just need to display a list of them like multiple categories in vertical in a vertical list so um yeah we will need the album categories which will be an array at this moment it's gonna be hard coded um and in the next week we're gonna take this from the database from the back end yeah let me drink some water stay hydrated how are you doing guys how do you feel please let me know your your feedback like what what do you feel and am i going too fast is it clear or do you have any questions is it boring is it interesting i'm i'm really good to know and to improve okay okay okay let's get into it home screen so uh let's close everything have everything clean okay we have our home screen here opened and at the moment we're displaying one album category first of all let me check yeah i prepared as well this data set with multiple uh album categories and yeah the file is a bit bigger so let me just uh i don't know create a directory data and the file album categorist.ts [Music] and here paste in my data which yeah previously we had just this uh one album category right now we have an array list of them like with multiple ids and stuff it will be interesting to see how we will implement multiple horizontal scroll views into one vertical scroll rule uh yeah we're gonna see that uh shortly and i hope we're not gonna mess it up so let's export default uh visa array uh and import it into our home screen we will not need this album category because we have that array uh that we can import from album categories from data album categories so we have our data now uh similar to um to our album category uh where we have a flat list uh we will have similarly a flat list in our home screen flat list firstly i need to import it of course from react native flat list flatly so what does it has the first thing that it needs it needs uh the data and our data will be the album categories that we have in a file like the dummy data that we imported and we need the function render item that will tell us how to render each category item so how to handle how to render an item one item will be one album category so we have already imported this component album category and each item will be an album category so it needs it needs a title which we will take from item.title let me again put it into multiple lines so you will be able to easily see this autocomplete messes up so it needs title and the second thing it needs albums to know which albums to render come on albums which is item dot albums again this item um this item variable that we receive in the render item is coming from our data and will represent each specific item in our array so in our array one item is this one so when we say item.title it will give for the first item it will give the happy vibes item dot albums it will give this uh these albums with which is an array so i hope that's clear let me know in the comments if it's complicated so the next things are the key extractor the key extractor will be the id and yeah alexander here is by the uh of the category that i was speaking about that we will need later so each category has its own id and we send it as uh as the key for the flat list uh what else i think that's it that's the minimum that we need let's save and here we see uh a vertical list with multiple categories of albums but we can also scroll horizontally so alexander vettel answers your question um yeah the photos are the same because i didn't have time to find separate photos but yeah they they are different data so for example yeah we see that the titles are different and yeah they're displayed we can scroll and everything i think it looks pretty similar to spotify might be not like pixel perfect but for the purpose of this um live build it's uh it's more than enough uh you can of course uh go one step beyond and adjust it the way you think it will look better yeah okay before moving forward i see that our title is tab1 title what do we have as a title there in spotify let's go into top navigator now into the index or no even yeah tab navigator yeah here tab one title let's rename it to home let's save yeah and here we see home so our home screen is done and um to give a brief review of what we managed to do uh yeah we started from the smallest component that we can see on the screen like that makes sense to to create a separate component because yeah we can say say that the image is a separate component but that doesn't make sense because it's not logical so the small components was the album component uh we developed this component then we moved uh one step um above and developed the album category component which was using that album component and rendered a list of it uh then we developed the home screen which rendered a list of the album categories component yeah that's a lot of components but i think that um splitting them this way and not putting everything in one file because that's also an option and i see a lot of developers doing that but i don't want to to teach you that way and i want from the beginning you to understand that splitting everything into smaller components that are very manageable for example we go into an album and we see like like how many like five lines of code we go into album categories again like five lines of code and it's very specific like it has a title it has a list of album components that's it doesn't have anything else and yeah this way the code becomes much easier to maintain in future and you'll save a lot of time how do you feel guys how is it going [Music] how much i love react native in android studio it would uh be a horror to implement this yep i agree yeah i worked with android studio and it's yeah it was driving me crazy like you had a lot of boilerplate played but you read from tutorials but nobody understand what they are doing but you need to write them there for it to work so you don't even question like why is it here but here i think that once you grasp the concept which is not that hard like it's pretty pretty uh pretty much self-explanatory and easy to understand like even with this flat list like give me a list of data give me a function to know like what to do with each specific data and i will do that and that's it like you don't need anything else uh where is that oh yeah here key extractor no i don't need it here why didn't you tell me guys i need it for the flat list not for the album category i was i was looking like i'm missing something something is wrong here now yeah now it's better yeah it didn't give us an error but that's um that's for react native to know how to cache it and how to render when needed okay guys uh what's next in our plan for today are you tired already is it good should we move forward okay the next one is the album screen the album screen um will be the screen that we are going to be redirecting once we click on a specific album uh and it will contain um yeah let's already speaking components it will contain a header component which will be the image of the of the cover of the album the name of the album uh creator how many likes uh a button to play and pause the the songs in this album and underneath it will have a flat list with songs yeah without further ado let's let's get into it and start defining these screens and setting up everything because it's going to be a bit of boilerplate and yeah let's get into it so the first thing that we will need we will need a new screen and it's gonna be called album screen uh i forgot to give it no no not renaming a dim focus file album screen dot tsx uh so here let's import react from react let's import view and text from react native let's define the component const album screen and let's just return for a simple text with a color white hello from album screen let's export default album screen what you don't like here a result variable it shouldn't be a variable oh i don't need the brackets [Music] do you plan on implementing the model like view for displaying the current zone yes yes yes that's after this screen we're implementing that one the the widget that displays the current song uh okay we define our very basic album screen let's get into our navigation and um open the bottom tab navigator and here um first of all let's delete this tab bar icon because we are not using anymore it's safe to delete and go to our tab 1 navigator which currently has only one screen home so this tab is a stack navigator uh and currently has only one home uh home screen so we will want to add one more uh screen here so let's copy and paste the the screen um let's rename it to album screen the component will be album screen which we need to import let's check if it imported correctly from screens album screen yep and the title will be actually doesn't have a title but let's start with just album oh okay we define this screen but we are we never uh redirect to this screen so uh whenever we go to the album screen uh our project will know how what to render uh but we need to say like when to do that like to create a link a hashref if you are coming from web development so we need to do that whenever we click on a single album let's open index here um yeah i will transform this simple brackets to curly braces because we will need to add multiple uh we need to add a function here so we will need to add the return statement and wrap these around brackets like this [Music] then we need to wrap uh our whole component into a um a component that will be able to detect touches and in react native uh there are a couple of them and they start with touchable and they're called like touchable native feedback uh touchable opacity touchable highlight touchable without feedback and that's all uh components of the same type uh that are used uh to detect like clicks and touches uh but they give like different feedback and we're gonna use touchable uh opacity touch well no touchable without feedback because we don't need any visual feedback whenever we press on an album so if we had like touchable opacity when we press on an album it would decrease the opacity so you know that you pressed but in our case we don't need any feedback so we wrap our whole view we wrap our image and text into this uh touchable without feedback component and let's put them back here and the next thing is that on this touchable without feedback we can declare on press which will be a function on yeah on press and let's declare this function here const on press equal to arrow function and here let's first of all console worn album pressed and also let's say which album come on come on come on come on props dot album dot or title or artist headline react children will expect to receive a single react that means that our touchable feedback wants only one children and we can't give two children um let's wrap our view in this touchable because uh it's most probably it will work because it's only one component and i hope that our styles will not mess up yeah when we press we see album pressed taylor swift and we see that is this one if we dismiss and press on this one we see post malone which is this one so now we are we are able to detect clicks on each album so what do we need to do when we press on an album we need to redirect uh to the album screen and send there some parameters like uh some variables which will be the ideal album in that way we know like um on which album page we need uh to land to do that to do the navigation we will need the navigation um reference and a reference to the navigation and uh because we are using functional component and not class component we can easily get this navigation using a hook use navigation and we import this yeah it doesn't save it here but we import use navigation from react navigation native yeah from here and this will give us a reference to our navigation which we can use here let's delete the console worn navigation dot navigate to our album screen this is the name of the screen yeah this is the name of the screen that we declared in navigation bottom tab navigation here so it should be album screen i don't know why it says that does not match parameters album screen uh yeah let's let's check maybe that's some um yeah hello from album screen it works properly but i think we didn't declare some types for for that screen so in our types dsx in the tab one which is our home tab let's declare our album screen yeah as undefined let's save and here come on you should work yeah i don't know why this red arrow is not going away uh yeah and one more thing we need to send there um some parameters like um the id of album will be props dot album dot id so um that's it with a navigation from here let's close let's check if it work still works yeah it still works let's close these files and let's go into our album screen so album screen what do we need to do here uh let me show you uh how do we receive here uh that variable like idea of album that we we just sent when we navigated however we are not gonna use it right now i'm gonna just show you how we can uh receive it yeah let's convert this again with curly braces um so for that we're gonna need uh to get the route uh and we the same way as we did with use navigation we will do user route um hook we imported also from route also from react navigation native and this route will contain uh data about uh the variables that we send to to this uh when we navigate it to this route and so on so uh i will declare a use effect uh and i will uh display the contents of route and why do i need this use effect uh is to display this data only the first time that we uh mount the component so it's not gonna repeat every time we update the props with the state anything else it's it's gonna call only the first time and that's uh accomplished by sending an empty array to the second parameter of use effect so let's console log route and see what we have there yeah let's save let's open our windows here clear and go to the second one [Music] yeah we see here the the route object uh it has like a name album screen it has a params key which holds uh the idea of album two by the idea for album but we redirected if we press on this one it's going to be id1 if we go here it's going to be id like 6 or something like that and so on so that's how we send variables and receive them in a new screen using the react navigation uh the thing is that we are not going to use it right now because um yes we will need to implement a service to find that uh album with id in our data so that's that's something that we don't actually need because it's gonna be replaced by the back end and we will be able to request the data for this specific album with this specific id so uh i will go with hard-coded data here album equal to let's take it from our data like this an album and let's have a look at what data we will need so we will need a as well the image uri we will need the name of the album which we don't uh have it yet so name will be um i don't know good vibes uh the name um you have a creator by spotify uh let's say bye and here spotify and number of likes number of likes which will be yeah let's say a random number okay that's what it will have and also it will have an array of songs so each song will have a image a title and the artist so songs will be an arraylist of objects each song will have an id okay first one one uh image image uri let's take some images from this data come on um okay image and what else uh title hi on you and artist the artist is yell whatever and let's just copy paste this uh song a couple of times to be able to see it in our list yeah four times i think will be enough let's give different ideas that's pretty important guys are still here are you still with me how is it going so yeah we have these songs i think it will be enough to display them um we have that page so um what are we gonna try to render first so the first i would say that let's start with displaying the flat list with songs and then we will get into this component and you'll understand uh why so this is our album screen and we need to display a flat list of song list item component and firstly let's go and create this song list item which is the specific item of name image and [Music] yeah but in focus artist you forgot a coma i think i already fixed that it was here yeah thank you so let's go ahead and create this song list item component uh in the components folder song list item uh it's gonna be come on index dot tsx again import react from react import uh what do we need we will need text we will need image we will need view and that's it probably from react native import styles from styles which we will define shortly and let's define the component song list item it will also have some props props which will be song list item props that we can define right now of the type so the type will be uh we'll have a song variable in the props um because yeah this is a song and let's go ahead and uh create the song type in our types file the same way as we did for the album because i i'm pretty sure we will need it in multiple places export type song it will have id string it will have image uri string it will have title as well string and the last thing artist artist as well string and in our song list item indexed we can import the type or let's say song from here and it automatically imports the type song so um okay let's uh start with return a view our song will have image and two texts image cover title and artist so for the image cover let's do image source will be uri props dot song dot image uh not image but image uri and i would like to destructure the song out of props so we will not need to write props dot song and so on so the way we do that we say here const song equal to props which means that song will be equal to props dot song okay for the image we as well give styles dot image yeah that's it uh for the title display it in as a text um song oh now we don't need these props here yeah sorry so here we need to display song dot title um and for the artist we want to display song dot artist yeah why it's not padded like this yeah let's clean these comments and define also the styles for this one star else dot title and here style dot artist artist like that uh let's not forget to export our song list item um yeah let's just create them in our yeah songlist item folder let's just create the um the styles uh file and then we're gonna come back and style it after we see it on the screen so for the name it's styles styles dot jts uh let's import the style sheet from react native styles equal style sheet create and export default styles we're gonna come back later here in this file and write the styles for this component but first of all let's go into our screens album screen and let's render this uh the component that we just created there you know what uh i would go and take out this data because it's a lot here and it bothers me and will put it into a separate file here like album details dot ts and say export default this one and in our album screen we can import album details from data album details we will need it a bit later now let's import the component that we created import um what is it called song list item song list item from components song list item and let's display it here song list item and for the song we will give the first song from our data so album details dot songs the uh at position zero with the first song let's save and let's go on our screen by pressing on any album and we go here and we don't see anything because i guess that all the images and the text is displayed with black color that's why we don't see let's close all now we can start styling our song list item and yeah first of all the title let's style the title saying color is yeah it's white let's save yeah we see it already here high on you [Music] as well for the artist color for artists we see that the color is a gray not a white even a light gray light gray i think it if i didn't mistype it it should be no light gray like this yeah yeah it displayed there the next thing is our image or styles.image it needs a width and a height to display it so that's why we don't see it at the moment so with with with i don't know let's say like 50 by 50 by 50 oh too small 100 yeah we're gonna spend the next 10 minutes that's too high 75 yeah we're going to spend the next 10 minutes getting to a perfect size yeah probably that's better uh the only thing is the positioning so uh our components are display like in separate lines everything uh however here we see that the image is on the left and on the right we see the title and the text to accomplish that we should think in split this into two separate views which is a left view and the right view these views will be displayed in the same row and after that whatever is in the right view will be displayed from from new lines so to do that we need to wrap the two text into a view like this now our container has two parts left and right and whatever is in the right thing will be be displayed uh like we will style it customly um we need one more thing like style dot container and to display them into in the same line we will set justify content no flex direction will be a row that's the first thing yep flex direction will be roll and for the second view let's define some styles here as well styles [Music] right container right container so let's define it here and what we see is the items in this right container has like space above the same space between them and the the same space uh below them so to do that we have uh justify content uh flex space between or how is it called space between okay that's space between but we need uh also space above and below and that would be space around yeah that's much better and right now we need to increase the size of a song title yeah and all of the artist to do that let's come here and say font size i don't know 24 yep and is it bold i don't think so let's see how it uh displays with bold no no i don't like it no um and let's define the font size as well for the artist and yeah it's a bit smaller like probably 20 or 22 20. something like that is it even bad uh is it even uh bigger this font size of the title what do you think guys or should i let it like this uh yeah let's define some margin of the containers to space each individual song for from each other so margin will be 10 and for the image no for the right container we will say that it will have a margin left uh yeah this is the right container and we we need to add a margin left to have some space between the cover and the names margin left again like then what why did the mess mess up mess up is it for because of a margin is not a valid style property oh it's not merging its margin save i think it's even bigger 15 yeah like that okay i think it looks pretty pretty similar like if you want to get to to closer to spotify like feel free to do so and yeah you can post on um on instagram and tag me and say that i am a bad ui designer and you are better uh i will definitely repost that uh but i'm pretty satisfied with what we have right now so which means that we are done with the song list item and we can close it here and we can go to our album screen here let's delete the text and instead of displaying only one song we need to display a flat list with all the songs that the album contains so we all remember how to do that right guys flat list we should not forget importing it from react native and the first thing that we need is uh the data the array of um things that we need to display this is album details dot songs this is very list that we need to display and how we want to display each individual item is by returning a song list item component that we just created with the song which will be item um yeah key extractor will be uh item dot id this is by d of each song and yeah most probably that's it let's also remove this song list item from here and save and now we should see a list of multiple um yeah multiple songs all the songs that we define in our data album details yeah to show it better let's copy some other images so we will see different images as well that's just to please my eye sorry for for that yeah even like this yeah it's already better we see different images different names um different yeah uh artist artist too uh it displays everything from these album details new subscriber thank you very much welcome to the gang okay uh the first step is done of the album screen but we are displaying a list of uh songs the next thing uh is the header if we look here like our list of songs is on the bottom and on the top there is this uh header with the yeah say it the cover of the album the name uh artist and so on so let's create it as a separate component and um and send let let me show you um component uh let's create a directory so it's album screen header or album album header just let's go with album header uh yeah let's define here the index dot tsx i import react from react how are you doing guys are you still here are you tired let's continue it's it's not a lot of things left like uh this header and only the widget and um yeah we're done with a ui so uh album header props will be album header props let's return right now a text header and define some styles to to see the color of the text um export default album header let's define that type export type album which will be the album component with album type that we define in the types folder types file and we can import it from types uh what else we forgot the equal sign here alexander didn't expect to watch from the beginning till now from one goal yeah that's that's nice i'm happy that you're enjoying it so what do we need else here uh at the moment nothing uh let's now import this album header in our album screen album header album screen or album header and yeah there are there are two possibilities like we could uh display this album header here but the disadvantage of this is it will always be visible and when we will scroll uh through through them list uh the header will stay always on the on the screen and to go um around that the our flat list has a property called list header component which receive album header component and it will display as the header of the whole flat list let's save and hope that it works let's go into here um yeah i think we need to define it as arrow function because we need to send to the album header the album itself so album is the album details save um yeah i think i messed up with the name list header component uh let's have a look on react native flat list don't remember the name of that property and we'll do a search on the header header list header component here list render at the top of all the items can be a rack component class a render function or a rendered element uh list header component did they mistype something there yeah it should be with capital l that's why you can't find variable text that's coming from our list header component yeah this text we forgot to import text from react native save now let's press on an album and here we see header we see all the songs and on the top we see the header okay uh what do we need for to display for that header okay the first thing is uh the image let's go start view okay cover image then we need to display name name and then we need to display uh okay by spotify and number of likes creator then number of likes and lastly the play button play pause button play button okay let's import all the things that we will need which is view for this view cover image that's gonna be an image name uh it's gonna be a text creator number of likes as well text play button is going to be a touchable let's go with attachable opacity here so you will see the effect of attachable opacity in action um yeah and probably that's that's it if we will need more we will come back um yeah let's say styles container um cover image okay let's start with this one image and it needs source we uri we need to distract your album from the props to be able to access it easily album equal to props which means like take out the album from the props and save it to a variable now we can say album dot image uri and style style dot image okay that's good uh for the name yeah name will be as well here text style name [Music] um and the text inside will be album dot name uh for the creator number of likes we see that the creator a number of likes are displayed in the same line which means that we will need to encapsulate them inside the view because it has a different direction like all the items are in separate lines like image uh name uh button but this one has two elements inside so let's do a view styles um create or container and here the first one will be text and we'll say bye uh album dot not creator i think it's uh we say bye let's check our data album details album bye yeah is it album title as far as i remember album i think it's name yep it's name here it's song title yeah i wasn't consistent there so that's why the confusion so yeah let's go back here album dot bye next one text the number of likes how is it displayed the number and then likes um album number of likes and text likes and lastly uh that touchable opacity button which will have a viewer inside style play yeah like this this plugin sometimes work perfectly like it took the play uh out of a comment and it suggested me like maybe one style dot play and inside text will be uh let's say play is it all cubs yep play styles that play styles dot let's say button and for the text styles dot styles dot button text yeah exactly yeah i think we uh we put everything we need here and the next step would be to create these styles which will be interesting import styles from dot styles which we have to create now a new styles dot ts as always import style sheet from react native const styles i'll shoot create yeah my my back is already hurting so badly and uh export default styles but we don't have a lot more to to go so stay with me like 20 more minutes and i think we should be done with the ui okay what styles do we need [Music] container image yeah let's uh start with the image and define the width and height and i will say that the wave would be um i don't know like uh 3 300 pixels height as well 300 let's save okay 300 is probably too much as i expected 200 will be perfect and we want to align it in the middle so to do so uh we will define a property on the container itself but we'll say like align all the items in the middle that was the hardest task for me as a front-end developer always like because there is so many ways you can do that align item center okay now it worked but yeah so we have the image all right let's style the name album name and first of all uh let's define color white font size that's a 30 save uh and it's definitely bald don't wait how are you doing guys are you still uh awake yeah i think it's good well um but no let's do it right now image let's add some margins uh 10 will be enough uh we can go with even 15. perfect next one will be the yep we didn't create styles here style dot creator and styles dot number of likes styles that number of let's just call it like simpler likes uh yeah for the creator the color will be white and the same for the likes let's save yeah we see them there now we need to display them into the same line so we need to define some um styles on the view that has these two items to say that hey this is should be a row not like multiple rows flex direction will be not column column is by default row 100 hello how are you doing uh yeah right now we see by spotify and 38 likes are displayed in the same line uh so let's add some um margin uh to the texts uh 10. margin like this and to this one as well save i think 10 is too much yeah might be five and also the font size is on size is around 24 i guess let's have a look say no too big too big too big 20 20. save yeah i think it's better now but uh i think that color is a light gray and not a white is the same as the name so uh here let's say light gray light gray yeah like that and the same for the likes yeah that's already better uh and the last thing is uh styling the button uh let's go ahead and do that [Music] and we have here styles button and button text the styles for button text will be pretty simple we will need to just display it with a color probably light gray uh font size um what's the font size it's a 24 is it bold yeah it's definitely bold font weight bold like this now the button container will be a bit more interesting so let's start with the background color uh of this green uh boy i don't have this color um let's try uh spotify watching our stream since uh one hour ago nice content thanks very much um yeah i suggest going back and uh after that and watching it from the beginning and also trying to implement it yourself because you will learn a lot but yeah thank you thanks thank you very much for joining and watching so i grabbed the color of button um yeah i think it's perfect no i'm just kidding the color is good [Music] let's say we need some height for it height will be 50 maybe we will need um a width which will be 150 yeah probably that's good we will need to make the corners round that we can accomplish with border radius 15 yeah the round and now we need to display the play button in the middle and we need to center it both horizontally and vertically so we need to say justify content center and align items as well center save and the play is displayed here but i don't like this light gray i would go with a white um i think i would go with with 200 yeah maybe maybe maybe 175 um yeah what's wrong with this the font is too big here it's let's go with 20. uh thank you for this great content bro why did you pick typescript over javascript for this project uh yeah i think typescript generally typescript is the same as javascript we've just types added so it's bet it's just safer to use typescript and i want to to teach you guys the right way and it doesn't mean that typescript is harder than javascript it's just you can log you can write basically javascript in typescript so yeah i think that's better um yeah what else what else some spacing uh for the general container uh padding uh 20 uh you have to have some space here um [Music] i don't like i i think that uh the text and the button needs more space so creator container it's this one let's add margin uh vertical or even just margin 10 and yeah it has more room to breathe here um got it thanks yeah um again like you you can do the same thing as i'm doing here in javascript you will just don't need to declare these types so instead of props double dots types you will say just props and that's it that's that's already javascript um yeah i think that's good enough uh for this screen um the name of the of the the songs are i think pretty big but in the the image but we are good we are good the button is bigger you say so let's go for the button and for the height let's say 70 no that's too fat sorry 60. yeah probably that's uh that's good i think we have everything on this page all right so we are done with the album screen we are done with album screen let me drink some water how do you guys feel how is it going are you following along everything all right uh so let's see yeah we develop the song list uh which displays uh a flat list of songs here underneath and then we develop a list header component which we send to the flat list and is displayed on top um and that's everything for the album screen now uh the last thing on our list today guys uh the player widget the player widget is displayed every time we play a song and the widget is displayed just on top of a navigation of a bottom navigation here and it's always visible so from that widget we see which song is currently playing the title and the name and we can like the song and we can play and pose a song so yep that's the component that we need to build right now actually if we look at it it's pretty similar to the list a song list item uh however yeah the name and the the artist is in the same line and also we have these buttons so we will probably just [Music] take list item component adjust it to fit our needs and we are good to go oh okay like yeah probably 15 more minutes and we are done with uh with the widget and with a ui so uh one more thing um yeah our ideas is saying that uh our unresolved variable name for the album and that's because our album type does not have a variable name defined and by a number of likes so to fix that let's go to types album and say name is a string by is as well as string and number of likes is integer integer uh it's a number yep yep there is no integer here so if we save and we go back to our index yeah we see that our red arrows disappeared now i would also go and delete these comments because our code is pretty self-explanatory and we don't need it anymore i think you can hear my dogs barking outside right i have a couple of them so let's close everything um and start developing our uh player widget so as i said it's pretty similar to the list song list item and i think uh we can start working uh from from this and we will copy paste the song list item and say um [Music] player widget player widget uh yeah let's open it index and we will rename a couple of things here so instead of song list item is going to be called player widget the same here for the export the same for props uh props yeah it will receive a song it will display it um there what else what else yeah right now we need to display it somewhere on the screen and then we will adjust the styles to display it uh the same way as as here so um [Music] where to display it let's check our bottom tab navigator um war to displayed yeah let me think where to display it actually [Music] um let's try to display it in uh the up component like in the top component that we have because it it should be visible on every screen and let's try to display it here and see how it goes so uh player widget from component player widget and yeah after the status bar let's say player widget uh the player widget shouldn't receive a song the player widget will be able to get the song by itself and we will implement this this uh fetching uh of a song in the pre in the next week uh but let's go and for the player widget in the props we don't need the song actually we don't need any props because player widget is very independent and it knows how to how to render itself the song the song uh we will just declare a song variable and hardcoded here but we can take out from album details songs let's take this one uh okay if we save um yeah if we save we see this yeah this widget here which is not exactly what we wanted let's try to to fix this using styles so for the container uh we will go into the player widget styles for the container let's say that we want to uh display no position absolute absolute and okay we see it on the top somewhere there and let's say that the position will be somewhere on the bottom and we need to define like uh how high from the bottom and let's just try with a random value of 50 and see where it displays yeah it displays uh yeah right here but it doesn't have any background so that's why we see uh something below for that reason let's say background color black to not be able to see through the widget let's say right now it's better we can't see through the widget uh but now let's uh play a bit with um the position like we understand that it should be a bit higher so 60 will be enough um [Music] 70. yeah i know i think we can see through here a bit maybe 65. 65 i still can see some pixels there so i would go with 64. yeah perfect perfect it's there right everything okay and uh the wave as you can see um it's not full width and well if it's just to be able to display the titles and so on so uh let's declare with 100 percent 100 percent save and now it was just display full to be able to see let's define it as red and you'll see that it's uh until the end go back to black back to black and yeah now we can see the widget there uh that's good we position it uh where we need it to be however we need to work a bit on the styles of it so yeah first of all i see that the color shouldn't be black but should match the color of of this background so i think that's we can do that by importing colors from constants colors from our constants are here so we have our colors one more up constants colors so instead of background color black will define colors dot dark dot background or might be background no it's not background where do we get this color i will try to match it but let's have a look in the navigation if we define it here bottom active now we define the active tint color but we never defined the color of top navigator itself okay let's try to match it ourselves so i would go with zero zero zero and from here i will press this one and move it a bit to the top save it's too light yeah it's going to be an interesting process yeah i think i matched it yeah i think it's perfect uh okay on here we see that it has a border on the bottom to be able to distinguish it between uh the tab navigator so let's go ahead and do that as well um border uh with border with will be let's go with one border color will be solid black as i see here um we can see but if we say five we'll be able yeah we see that it's there with two i think that screen is too small but uh it's there so if i make it a bit bigger i can't move it up yeah you can see here that the border is there so it separates the bottom tab navigator from um from the player that's good let me put it back like this okay we have that one uh right now we need to display them name of a song and the artist in the same line and not into separate lines okay we can do that let's just have a look at this right container [Music] you know what if we just delete this right container uh we will display them in different like in the same row because our container uh is set like flex direction row so that's what we want to achieve yeah we see them here uh the only thing that we need to do is to align items on the center uh so they will be in the middle of a line line items center save yeah they are here um [Music] the title font size uh let's create it to 20 they're the same size but it's not even 20 i think it's 18 18. the title is bold on weight bold okay let's define some margin margin margin margin margin five margin ten uh on the we uh yeah on the image here uh margin um right let's define 10 to separate more of an image from the title yeah we see here a lot of space um and the last thing that we need to display would be the yeah the likes like and play pause button okay that we can accomplish by first of all checking the icons on expo icons yeah on this website so play which play do we need no first of all it's hard hard and yeah we can import it from end design and it's called heart or for outline and just hard for a full heart the widget missing a black shadow on the upper uh the widget missing a black shadow and bumper actually it has a black shadow but because the background color of this component is black we cannot see it okay so as we said like we need to import and design for the icon and design from expo vector icons uh and and and design uh name the name of that is hard all like that size 30 and yeah it displayed there with black and color white like that yeah we'll play around with sizes but i think i like it already so with a play button let's again go here and check play let me check what which kind of style it has spotify yeah it's very simple very minimalistic uh i think it's from font awesome this one without round corners without anything so let's import font awesome font or some and name is play yep like that so uh we will need to to do some positioning here so we see that um let's focus on this container without the image so this is the right container and here we see two parts like again like the left part and the right part and if the screen size will increase we will see more space between these these items like here between them that means that their positioning is uh space between which means that um align them on different sides of the screen and put all the space between them so if the screen is very big it will display like uh far apart if the screen is smaller they will get closer and that's why we need to um put both uh like these two text into a view and these two icons into a view so let's go ahead and do that um let's do it in a view like this and here view [Music] yeah we'll define the style shortly uh styles will be styles dot icons container and for this view it will be [Music] name container name container and and also everything should be inside the new view styles dot right container so for the right container for the right container let's go into the styles right yeah we have right container here let's delete and we'll see what we needed right container we have name container and we have a icons container so the first thing uh right container will be uh all the widget except the image so what do we see here we see that uh we need to um place the children with space between them so on on opposite sides of uh overview this means that for the right container we will say first of all uh justif uh flex direction roll roll and justify content space between save also the thing is that the right container doesn't expand till the end so let's try to give it a flex one and now we see that it expanded till the end and we see a issue we are losing some of the container here and we see that we have some margins here like the image is not starting from the the actual left that means that we have like this margin that is messing around uh let's delete that and probably we will also have save yeah we deleted the margins um and we need to add here 15 because we don't we don't have margins now there's gonna be 79 i guess yeah now it's better and now we see the item icons here for the name container what do we need to do we need to display them into the same line because right now we see that they're in different lines flag direction row save um align items center save we are in the middle good icons container flex direction roll good align items center save good now um yeah let's define a wii for the icons for viking's container it's there are two different options to define a width here uh and to say that a viking should be displaced with space between yeah i think that's a good way we've with don't know 100 we'll see how it looks and justify content space between or even around save and i think it looks pretty pretty good what do you think guys does it look similar yeah i don't see anything else that i can improve right now um the widget that looks very good and and the thing is that we can see this the widget everywhere where we go so if we go on the home screen if we go on the search on other tabs on the album screen everywhere we will be able to see this widget because it is displayed it is rendered in our topmost component which is the up component and we defined an absolute position um an absolute position for it uh which means that it doesn't yeah it's displayed always on the screen on the same position which is 79 pixel from the bottom uh here above the navigation so guys i think that's it for today with the ui of spotify uh i'm pretty tired already uh we managed to do uh quite a lot uh we started with um yeah we started with initializing the spotify clone project with displaying the bottom top navigator with different icons and different pages uh we displayed the album component we displayed the album category component a lot of components was today so home screen album screen which will display the songs in that album that we can press and when we press it will start playing in our uh player widget which is displayed everywhere on the screen so uh next week we are gonna implement uh actually playing songs and listening to them uh user authentication so only authenticated users will be able to use the application uh you're gonna see uh how easy and super nice the authentication is provided by aws amplify service uh we're gonna create the backend graphql api to store like the data about all the songs we're gonna also store all the songs in a s3 bucket on aws that's the storage solution from aws um and uh also we were gonna connect our ui with the back end that we were gonna develop so that's everything for the next week um yeah without further ado uh let's end this stream thank you very much for uh joining uh please let me know down below what you think uh about this live stream um was it clear for you was it useful uh if you are struggling with any problems if we encounter or are stuck on any part of this please write down below in the comments and i will try to to help everyone uh yeah what else uh let me know your feedback i'm pretty uh interested on what you think about these guys and um yeah uh subscribe to the channel of course like the video share with with one friend my voice is already going because i'm streaming for three hours yeah guys as always stay hydrated right click

Channel: notJust․dev

Views: 41,477

Rating: 4.9432893 out of 5

Keywords: vadim savin, not just development, notjust.dev, spotify clone, build a spotify clone, how to build a spotify clone, spotify clone tutorial, spotify clone react native, react-native tutorial, react native ui design, build a spotify clone javascript, build a spotify clone app with javascript, react expo, react native live coding, react native clone, live coding, react native aws amplify auth, react native aws amplify, react native auth, javascript, typescript, react tutorial

Id: Ho41KNKvoBc

Length: 167min 10sec (10030 seconds)

Published: Fri Sep 18 2020

Reddit Comments

[u/NoMuddyFeet]

If this guy actually accomplishes that, I'll be impressed. I've done so many tutorials where the instructor supposedly is going to clone some popular site or app and they barely accomplish anything.

[u/primetimemime]

Would appreciate hearing from anyone that tried following along what their experience was. I have saved this post for later