🔴 Let's Build the Netflix App in React Native & AWS Amplify (Tutorial for Beginners)

what's up now just developers welcome to a new build uh and today we are gonna start working on the netflix clone uh and we're gonna clone it using react native and aws amplify i'm super excited about this build uh and yeah we had a poll uh on twitter and on youtube uh and yeah netflix clones seem to be the clone that everyone is uh waiting for uh we're gonna work a lot with videos uh and this clone can be uh the knowledge uh from this clone can be used in a lot of other applications that contains like video on demand i don't know courses uh youtube like applications and so on so uh let's have a look uh firstly at what we're gonna build today first of all that's going to be the home screen which will display multiple categories with a different horizontally scrolling a list of movies like that will be horizontally scrollable then we're gonna get into the movie details screen where we'll uh yeah we'll show the poster the details about the movie description the cast and so on uh also in this screen when we will scroll down we'll see a list of episodes uh and also we'll be able to switch from season to season to see different episodes and then the last part in vsep in this uh in today's video we'll be implementing the movie player which will allow us to uh play videos uh on user device uh we'll make it full screen yeah as as netflix does so yeah this video will cover only the ui uh and during the next week we'll implement everything uh using the back end which will be an amplify backend with yeah with uh api authentication and so on so for for front-end technologies uh yeah i saw a lot of people are asking me to do expo whenever i do expo people are asking me to do react native cli but i decided for because a couple of builds that we already did yeah previously we're using react native cli now it's time to to try it with expo let's have a bit of diversity here so yeah we're gonna use react native we're gonna use expo uh for the language we're gonna use typescript uh and if you're not familiar familiar with typescript don't worry it's the same javascript and if you it's the same javascript with types it's a bit more uh secure in terms of development but if you'll if you'll write the same javascript in typescript everything will work yeah you'll have some red warnings but everything will work so don't worry about that uh yeah we're going to use modern technologies in react as functional components hooks and so on and i'm going to teach you yeah what everything does for the libraries we're going to use expo av to render the video player react native navigation to manage the navigation in our application moving from screen to screen sending data between screens and so on and yeah vector i can still render the icons okay so what will you learn uh by following along with build and i highly encourage you if you're learning react native aws amplify and these technologies i highly recommend you to follow along and do this build along with me and also try to implement more features that i do and only then you will actually master this technology by doing not just by watching and yeah so you'll learn first of all you'll learn how to set up a react native project using expo uh to render built-in components like text images views and so on to create your own components that you'll be able to reuse throughout the application like a movie poster or something like that that will contain an image and a title uh yeah everything will be done using functional components you'll learn how to use props to send data from component to component in order to make these components reusable you'll learn how to use state in order to manage the data and the logic inside inside the component uh navigation to navigate between screens how to declare them uh how to send data between screens and so on you'll learn also how to install third party libraries because we'll work with expo av and also we'll learn how to work with these videos so if you're new here on this channel hello my name is vadim welcome to to this channel to this community uh so i'm a full stack developer for over seven years at the moment i'm a cto uh at a small startup in the sports industry i also worked at amazon as a software developer engineer and now uh yeah i'm trying to share my my experience my knowledge with you guys here on youtube so if you enjoy what i'm doing here please consider subscribing to my channel because from the analytics i saw that 98 of you haven't subscribed to my channel so take your time drop a subscribe and let's move forward so if you want to follow along uh this build if you want to follow along with build uh you will need a a react native and expo environment setup so you need to follow to follow the getting started of react native to make sure that you have uh everything installed on your machine the same with expo we have this guide on their documentation uh and the next step is to download the dummy data images icons pdf presentation and so on from assets dot not just dev slash netflix and there i uh yeah i included all the all the data that we will need during this project in order to save up your time so you'll not waste it on writing this dummy data and so on so i made everything for you everything for free download and and then we can get started but then but first let's have a look at the chat hello guys uh that was the introduction so how are you doing guys are you excited about the brand new build because we have spent uh around two months on the uber clone hopefully netflix will be shorter yeah i saw that uh people were asking to do to use expo so here it is uh i just came here to hit like uh either watch the live stream in the morning thank you very much okay thanks man what to do is awesome thank you very much for appreciating the work welcome from ethiopia hello how long is going to take uh i'm planning that it's gonna be two maximum free videos and usually our videos take around two to three hours usually free because yeah we are going in depth and explaining everything all right guys uh okay let's get started with the code uh because uh we have work to do so i will stop whenever possible and ask for your questions or advance we can stay for 20 30 minutes and i will answer your all your questions uh but now yeah let's let's get started uh and the first thing that we need need to do is to initialize vax pro project uh using expo init netflix uh and also like make sure to choose that template which is written tabs with typescript so i already did that in order to save time not to waste uh to wait until it initialize uh so basically yeah that's what i did in a terminal i wrote exponent netflix and then i chose a template and this is very important part tabs with typescript and then i open uh generated project let me close this i open the generated project in a vs code so yeah finally i move to vs code guys uh yeah i miss web store but no i think i set up it pretty okay and i'm still getting used to it with all the shortcuts and so on so in vs code open the terminal here and write yarn start that will start the development server which is here which will yeah will open a window in your browser and also this time i decided uh to run the application in browser okay i'm not showing the screen sorry guys hmm okay let's do this part again so okay the first step is uh to initialize the project with exponent netflix and also yeah make sure to choose the tabs with typescript template and i did that here doing expo init netflix then when asked about the template choose the third one tabs with typescript after that i open the project in visual studio code and here in a terminal i wrote yarn start that opened the development website and from here we can run our application in android ios or in browser so this is the first time that i'm gonna try to run it in browser uh because in order for it to work on any device so uh yeah i thought that not everyone can run it on ios simulator so yeah to to make sure that it works for everybody but it should work on both ios and android and advanced i will try to test it in in these emulators but now i run it in browser and here to the right we can see our application in the browser okay so let's go to uh where is my presentation uh okay let's have a look at the project at the at the structure of a plot project and then clean it and start working okay where is it up here this hopefully you can see uh you can see the code uh so here uh yeah the first thing that we need to to have we can have a look at is the app.esx and this is the entry entry point of our application this is the first file that our application renders uh so here we have a navigation component that will render all the screens that we have in our application and currently we have two screens tab one and tab two uh yeah if we go to navigation folder and if we open the bottom tab navigator here we will see the the screens that will render for yeah for the tab one and tab two and yeah if we will create one more that's going to be the third one there not sure if is it faster on a emulator navigator cannot contain multiple screens tab free i think it's it's a bit faster on emulator yeah and now we have three tabs we'll see if it's going to be that slow of updates we're going to switch to an emulator uh okay so what uh what else in the screens folder we have here the components the screens for our top one screen and also that just renders a text and also a top two screen that again renders a simple tab to text uh in the components we will create and store all the reusable components that we will uh we will have in our application in the assets we'll keep the images fonts uh and so on dummy data here we'll put uh that we will need to yeah for uh in terms of assets all right so let's uh let's clean up it uh clean up a bit um yeah what should i uh clean up yeah probably we can start uh with the next step and later on because if i clean up right now i will gonna have errors here so the next step is to set up the bottom tab navigator uh and to set up the tabs with their icons uh yeah we're here in the bottom tab on the netflix we have four screens home coming soon search and downloads uh and uh yeah we can find the icons that we're gonna use from uh icons.expo you can open it here and here you can search for vikon with uh but you need however yeah i made sure that to to search for all the icons that we will need in this project so here our way let's copy the import statement in our yeah in our navigation bottom tab navigator and at the top where is it yeah it's the first one here yeah we will probably not need it we will add the one that we the undesigned material icons uh unicorns from expo dot vector icons uh and for them for the first screen uh the name is gonna be home for the uh tab bar icon i think they integrated it with a separate component yeah uh we'll we'll do it a bit differently so i'm gonna delete the tab bar icon from here too much space come on how to how to close the the explorer [Music] okay never mind so top bar icon uh the first one is going to be undesign home size 24 and for the color yeah we'll assign the same color as we receive and yeah let's assign this color and the value will be the color from here the next one is coming soon and for the icon we have material icons video library let's copy it and paste it here and send the color as well then let's copy uh yeah the last screen let's copy it two more times because we have a search here search with icon ionicons and the color is color what best code extensions do you use uh i i'm thinking that i'll probably i will write a blog post about that where i will uh i'll do a video yeah i installed a couple of them for the snippets but i have to remember how the the shortcut for the snippets so for the downloads we have the end design icon from here and also the color save and because we see that the type download is not assignment assignable to the type bottom top around list that's not a big issue however if we want to fix it and that's because of a typescript then we need to adjust the types that we can find in our root folder types.tsx and here in the root stack param list no not this one bottom top ram list here we have to define the name of all the screens so the first one is home then we have for the initial route let's assign home coming soon uh will it work it like this coming soon and two more the search and the last one was downloads save and now we see that yeah this one is still yeah i don't think that we we can coming soon let's do it like this coming underscore soon let's save the types and here add the underscore instead of space yeah the red arrow disappeared for all of them okay if we open our screen here this screen does not exist let's refresh go home screen okay yeah but i said the initial route is home okay but nonetheless at the bottom we see our home coming soon search and download screen to close the explorer cmdb okay that's perfect thank you very much uh the question this live stream is going to be recording on my channel yes this live stream is going to be available on the channel after we finish it as usual okay that's um that's about the bottom uh yeah icons and now i understand why the initial where is it why the initial icon had a a margin bottom eight or something like that because we are too close to the bottom so we can say command b i learned a new trick style is equal margin bottom uh eight no no no no that's that's too slow i will i will run it in on android device and emulator let's see if that will work faster like maybe maybe have to set up fast reloading in the browser because i think that i didn't have like fast reload so that's why it was so slow but we we can work with android yeah until it uh it opens on the emulator let's have a look what else we have here uh so we have uh for the [Music] tab one navigator and this is the the component that we give to the home tab uh and this uh this navigator contains another screen but now it's a stack screen so in this way we have uh the bottom tab navigator with multiple screens like home search and so on and inside home we can have another nested set of screens which are stacked so for example the first one is the home screen then when you press on a movie it will go to the movie screen but it's going to be still in the home tab so that's why we have these nested navigators um let's call this one home stack usually i put them in separate files because uh it is going to be easier to to keep track of them so home stack home stack home stack and here instead of tab one parameter list i'm gonna go with home prom list and the first one is gonna be again home so yeah it's home home but or home screen let's do it like this let's go with the top bar and here is the screen do do we actually need um you know what i think we we don't even need that but uh i'm gonna send the header show on false in order to hide the header from this page and later on we'll see if we need that header or not okay home param list we need to import these from instead of tab one param list we'll import the home param list and we go to the types file and instead of tab one param list we we change it to home program list so the first one will be home screen this is the first option in the in the home screen and now now it works yeah and then i will leave tab 2 as it is because now we are going to focus uh only on the home screen uh what's here in our emulator okay uh now yeah now i think it works better where did i assign with style i don't like it i don't like it that's uh yeah that's good yeah and now as you see our home screen doesn't have a title because we kind of don't need a title here on the page but the second one has like top two title and so on because we use the same component all right so now yeah the next step will be to uh to make the uh the navigation um dark side to have a dark background with white icons and text and if i'm not mistaken color screen yeah if i'm not mistaken we can easily change the color scheme in our let me yeah yeah we can uh go into our app.json and here in the user interface tile uh let's try to put dark here and see that will uh will change the theme to a dark film save did it change anything yeah i can change it probably myself but i know that expo already has this this implemented come on user interface style is it dark or it doesn't have another value [Music] expo where is light dark yeah should i reinstall the application because that's part of them no it doesn't want interesting one more time it does change on ios i think i didn't save the file that's why so that's why i'm trying one more time come on oh here it is yeah i'm still not used to to save the files in this code uh because uh in webstorm yeah i had autosave so yeah that's why i changed it to dark and now our background here is dark yeah the theme has changed all right what now let's commit everything and move to the next step get commit a setup bottom tab navigator all right ekaterina does change on ios i'm wondering are you following along or you just know that it works on ios let me try to find some questions you are using this code right yeah now i switch to this code there is also invest code out of save okay i'll have to check that oh awesome uh if you're following along yeah that's that's really nice if i code for ios with rack native how much more code would it take to make it work on android as well uh usually i mean like in in a perfect world you wouldn't have to write any more code uh to make it work on android so in 99 of the cases everything will work both on android and on ios uh the only thing that are different maybe like when you install some libraries you will have to uh set up and configure them separately on ios and on android uh and that's only if you're using react native cli if you're using expo uh you'll not have any issues with this configuration because this is taken care by expo uh and another thing is maybe some components are rendering just a bit different on web on both platforms i don't know an extra margin somewhere or things like that and you'd have to check in your code if it's ios to add an extra margin else do not do anything and so on but that's like very very minimal i think uh yeah to give you an example uh my startup we have been we released our application on android and we had it like there for one year and we never tested it on ios so we only focused on android and then we decided to publish it to ios and i think i made it uh working on ios in a couple of days like two days or something like that so yeah i had just to adjust some configuration adjust some styling and that's it everything else was working uh by default but our application is pretty huge so i hope that answered your question all right so the next step the next step the next step uh the next step is to start working on the home screen uh and here on the home screen uh let me try to do too if i remember the shortcuts of this one yeah so here on the home screen uh let's have a look at how this home screen is displayed so first of all we can uh we should yeah we should think about uh yeah uh everything in react native in terms of components so what components we will have to develop uh for this so the first component that i see that is reusable and that repeats uh over and over is this like movie poster so uh it has the same styles it has like the same uh weave height and so on on the same round corners the only difference is the actual image that it displays so that's uh that's a good candidate for a a custom component that we are gonna reuse throughout this screen the next thing that i see is uh repeating here on this screen is a category uh a category view which which is composed of one title one title and multiple uh movies in a scrollable list so we see this category here we see this the same category of the same styles here uh this one is just a bit different but it's mostly the same and so on so the only things that change here is the data that they are showing so this uh category view is also a candidate for a custom component so that's what we're gonna do we're gonna start by uh rendering the image then we're gonna put everything into a list to render multiple images then we're going to put it into a custom component here okay hopefully the plan is clear so let's get started all right here we go i'm gonna close everything here uh in the screens uh tab one screen i will rename the tab one screen to the home screen because we rename that and that's going to be our home screen updating boards yes oh i prefer yeah i prefer it like this constant home screen is equal to this to an error to a component uh we will declare the styles in a separate file to keep them clean and here we'll export default uh home screen like this don't need this one styles.container will i need them [Music] we will probably need the styles so in order to better encapsulate uh a component that will uh have uh the like the view and so on with the style file uh i prefer to create a separate folder for them home screen and inside it i'm gonna put the file move home screen uh update yes and now we can even rename the file to index because it's gonna be easier to import it so we're going to import screens uh slash home screen and that's it we follow screen slash home screen slash home screen that's repetitive so this is our index and in the same folder i'm going to create the styles.yes style yeah i need to learn the shortcuts for them component set state no okay import style from react native const styles is a new stylesheet.create and here we are going to have all the styles so let's export default style sheet okay styles are there this is our home screen we need to import the styles of course i don't need this one import styles from styles save ok from and it doesn't have a container container save now on type style a good question if you name all your screens index one that make it more difficult to find a component by name [Music] that's a valid question and sometimes what people do is create the file as the component name home screen do they create a file tsx dot tsx i'm gonna do that only for the home screen from index let's um copy everything and put it in home screen and inside the index we're gonna write export default from home screen okay import home screen from home screen and export default home screen and this is a mix of two so basically uh basically whenever we open the file in the in the editor we see the home screen and it's clear like what are we working on and also when we import it uh where we are importing in navigation in navigation uh home screen home tab one screen no it should be home screen yeah home screen yeah and in navigation we import it from the folder because it will uh imp automatically import it from home screen dot index uh and the index will import the home screen file and we wish we don't have to write home screen home screen um yeah we don't have to repeat ourselves so i think that's the best way to do it we have just a simple index because but but this takes a bit more time to to write this extra file but this address is the issue that you you are asking home screen let me fix it here yeah like this okay i will start by rendering an image so i will import the image from here and the image will have a source and here we will specify what image we want to display and also and also style style styles dot image for the source uh we will send a url and the url url [Music] let's just find some url here netflix show poster come on images copy image address and let's put it here in the uri i prepare all the urls but they are oh my god this url i'm afraid of it okay let's save and declare some styles for the images uh initially i'll just give a width and height just to make sure that everything is rendered correctly we've height was 100 percent 100 pixels element type is in the expected string okay refreshing where is this use oh i think we don't have a themed image so i'm gonna import it from from react native oh my god what did i do let me try to i'll get another url a more prettier one so and from the ss folder let's uh move our data in the assets because we'll need it for later so i'm gonna move this here in our project and inside data i have categories and here i have a normal url for the movie home screen oh my god and let's paste in the normal url save and nothing is happening here [Music] container are you displaying at all flex 1 background color export default styles bro okay all right that's a bit better so we we see our poster here on the top and we see it underneath the the top bar here on the top from android the status bar yeah the status bar is called so in order to adjust that but it's safe area provider why it doesn't work okay maybe we'll add some margin where i'm not sure why why it's not working because it has a safe area provider save area view okay i think the provider okay that's the provider and we need to give it a safe area view and put everything inside it inside the up.sx let's see if it will work hey come on come on why you're so slow do you typically use a component library like paper ui or prefer styling yourself i usually prefer styling them myself but we are using variac native elements which is a very minimal like component library come on what's happening is it because of this view save yeah it was because of that view okay never mind so back to our home screen our image style image okay let's think how to properly style this image for the container we can add some padding and that will solve it 20. all right the image i think for the image we can give it a a fixed height and weave yeah i think i think it should be a fixed height and weave because we see all the images have the same height and weave across across the application it doesn't depend on the image size so i'm gonna try i don't know the height 200 and this one 150 250 maybe something like that for the image what else um let's give it a resize mode and the resize mode will be um contain no no it's going to be cover because we want the image to cover the whole space of of this container let's save that and because if we give it contain it's going to look a bit different yeah now it uh it zooms in in order to make sure that the whole container is covered what else what else does this image have border radius i'm not sure if we can see anything there because let me try background color white to see if anything changes yeah we see that the border radius actually has an effect and here it's very very subtle like even even 10 is too much i think it's it's a 5. something like that yeah i think that's that's cool with the image right so we have the image now we need to replicate this image and to render it multiple times in order to render this list of movies so it basically okay here duplicate is not possible so basically that's what we need to do to duplicate it uh however uh yeah that's that's not how we do it because our uh movies are dynamic and they are coming from the database and we need from a list of movies to render uh a list of posters so the the list of movies we will take it from our dummy data and that's in asset data categories and each category has a list of movie like these movies and yeah the movie has an id a poster which is a url and so on and this is like um yeah this is a list for a row of movies let's import uh our categories in our home screen uh import categories from uh assets data and categories and having this image we need to render a list of images to do that i'm going to import a flat list component and the flat list component allows us to okay i see that i have four spaces top i need to adjust that so a flat list component allows us to render a list of items so our why no it doesn't give me any items um yeah the items will be the categories let's do it like this let's take the first category first category will be categories dot items because items is our la array of categories dot items at position zero so the first one not items but data so our data is going to be the list of movies so its first categories dot movies yeah and it's going to be this array now we need to send a function a component to the flat list in order to tell to tell the flat list how to render each of this movie so we have an array of movies we need to show him how to render to render these movies and to do that we will send a render item function and here we'll receive the item itself and we will render here our image that we defined so let's render the image i forgot the curly braces there let's save and let's have a look here yeah we see a vertical list of uh images but all of them are the same because here for the uri we are still we still have this hard-coded url but instead of a hardcoded url we need to send them the poster url that we receive in our item so our item will be a movie which will contain an id and a poster item dot poster let's save and wait until they render and now the posters are different and they're coming from our dummy data what else we need to make sure that these uh posters are rendered horizontally so let's uh define that not for horizontal equal to true or we can leave it just horizontal that's the same thing let's save and now they are horizontally scrollable let's add some spacing between the images and to do that yeah in the image i'm going to add a margin five yeah that's that looks good and i'm gonna delete the background white from the container because that was only for testing uh here we can fit free uh yeah i think that we can we we should make the posters a bit smaller so for the weave probably 100 and for the height 200 or 150 um something like that okay 170. perfect okay now we have this uh horizontal list of movies uh let's add the title for uh the title for this category no i'm late don't worry we just started and the video will be published on the channel so we need to add a title for our category and we can do that by writing here a text and the text will be i don't know popular on all right popular on netflix um yeah let's start with uh just a simple hard coded text but we write inside here let's save and the style will be style dot title let's go ahead and implement this title bond 24. font size font size yeah probably too much 20 and font weight bald i think to make the text bold font weight bold save yeah kinda like that probably they have a different phones uh yep a different font but we are okay with that popular on netflix okay so we have uh we have created uh where is it come on yeah we have created uh we have rendered a poster of a video we have now rendered a list of uh of movies and we have rendered a title for that now we need to take this uh whole part the whole code that we created right now and duplicate it for other categories that we we also have and yeah when we need to duplicate the same code that means that we need to create a component out of that code so yeah that code will be the text and the flat list this is a category so let's create this new component in our components let's create a new folder and that's uh home category right in the home category i will create the index.tsx and also the styles.tsx i'm gonna copy the styles of the home screen and in the home screen i'm gonna delete the image on the title because we will not need it here let's save and let's move to our styles of our newly created component which is called home category and paste in our styles here uh probably will not need the style server container but we'll see maybe we'll need we'll we'll see about that for the index uh here i'm lazy and i'm just copy paste the our home screen and paste it here in our home category so we actually don't need this view so we can delete it but we cannot delete it completely because a component should return only one child so that child can contain other components inside it but it should be only one so for that reason we can create an empty tag just so that react will be happy about it so yeah instead of home screen this is a home category home category export default home category we don't need the view what else styles title styles okay for uh the home category uh where is it home screen yeah here we will have a list of a list of categories but because let's delete these things first category and categories now we need to be able to somehow send data from the home screen to the home category and i can try to render it here home category we need to send data from here because we yeah we want to render the first category so we will do something like category we want to render now the first category so it should know um like which data it should render so yeah that's how we send data through props and let's now implement uh receiving these props in our home category component let's save what did i do here uh yeah let's go to our uh where is it home category index and here we will uh we we need to receive properties uh about the category that we want to render to do that yeah we will receive them here the props and uh yeah in javascript that's it because we are using a typescript we need to define the type of these props so let's create a name like home category props and let's define uh let's define this interface for the props so that we know what exactly we what data exactly we expect in this component so interface home category props uh it's gonna have we can easily look at the categories here so one category yeah this is one category so we need to define the data model of this category which contains an id of type string a title type string movie which is an array and so on so id will be string title will be string movies will be an array of id string and poster also string let's save uh okay okay um i forgot that we need to uh put ever put these uh values inside the category because that's how we send it category category is this one and that's why we need to save the category is of this type because it's easier to send we would be able to do that as well but we would have to separately send the id there title and movies and that's three properties but now we can send this category which contains these ones and it's going to be easier to to get them okay but our now let's take our oh i hate it i have four four space tabs yeah let's take our uh category out of our props equal to props now our category contains the title movies and so on so instead of first category we can say that we want to render the category.movies and here instead of just rendering a hard-coded text we can render the category.title where is it category dot title let's save and i'm going to home screen here category dot category d title movies type id string title string movies i messed up with movies um i think it's movies is an object and that's an array i think that's how you do it right yeah now with uh the red arrow disappeared so let's save let's open our emulator and now we see back our first category and we if we want to render the second category we can just change the data that we send to that home category save and now it's a different one with a different title and so on now our home category components is fully reusable and from outside we just need to send this data and it knows how to render it and how to display it now let's implement this list of categories um and that's going to be implemented as well with a flat list as we have done for the movie posters flat list the data is our data come on the data is our list of categories come on not like this categories okay uh and the render item here we need to send a component so yeah we first receive the item in this function and based on this item which will be one category out of all the array and for each item we will render a home category component and we will send the item through probes equal to item data why doesn't like data for simple categories oh categories dot item items that's our list and we don't need the first category variable here save and now we see this vertical vertically scrollable list of categories and each category displays multiple movies but we can scroll horizontally all of them have different titles uh and yeah when you look at the code it's pretty simple so here we just have a flat list of home category and the home category is just a title and another flat list that renders the images so yeah i think that uh i hope this is um clear like why we did that why we extracted that into separate components what everything means so uh yeah i think that's that's probably it for our home screen okay let's commit everything and we'll change uh we'll change it if we will find some missing parts home screen ui and we can close everything okay just not to forget to change back to the code oh how do you explain that syntax movies is an object and it's an array yeah sorry maybe uh i explained it poorly so let's go back where is it home category index here yeah so basically how is let's simplify it a bit how is the syntax of defining that we expect an array of something for example um where is it let's say that we we expect uh the cast to be an array of strings which will be the names of people that are casting in this movie so that's how we will define that the cast should be an array of string and whenever we will render our home category or yeah let's say that the category that we will send here will be an object it will have an id and blah blah blah and also it will have a cast which will be an array of string uh yeah actor a actor b and so on so this is how you would say that the cast should be an array of string but in our case uh we don't uh our movies movies is an array the same as like the cast is an array but it's not an array of a simple uh type like a string a number uh a boolean or so on but it's an array of objects so each movie will have an id movie and one and a poster so um yeah we already know how to render how to define uh what we expect an array an array type and the only difference is that instead of a string which is a primitive type in javascript and in typescript we define a custom type which is an object so movies is an array and each item in that array is an object that contains id and poster hope that is a bit yeah that's clear first uh okay is that clear you are liganda thank you okay ytsx instead of testing styles i did yeah that's that's my mistake the style should be ts [Music] yeah because uh in styles we we do not have any gsx syntax and the jsx is yeah rendering these components so whenever we have jsx in a file we need to end it with x and that's basically tsx or gsx if you're doing javascript and because in styles we do not have any uh jsx we do not need the x so yeah that's probably a bit confusing for for beginners but now nothing will break if you'll write style.tsx it's just for conventional where are you from i'm from moldova so uh i think that there are a lot of people that are joining right now so let me give just a brief introduction what we are building what we are doing right now so yeah on this channel we uh we are doing project based learning and we are learning react native aws amplify and all these cool technologies by building projects uh and today we start a brand new project which is going to be the netflix clone the mobile application over netflix in this episode we are cloning the most important parts of a ui over ui yeah in react native and sorry and in the next video we are gonna integrate this with a back end so in just two videos we're gonna have a fully working full stack application uh both front end and back end uh that will cover the most important parts of of this application so yeah we are gonna build the home screen uh the movie detail screen that will display the the player also it will display a list of uh episodes and also will build a movie player so yeah we are using expo we we're using react native writing everything in typescript and so on so hopefully that's a bit more clear for you and we can move uh to the next step home screen i think i'm missing something but okay so let let me check if there are any questions here in the chat and we can move on okay uh show horizontal scroll indicator someone is suggesting me to disable the scroll indicator of well not here yeah uh if but i don't even see it but it should be there right maybe because uh it's dark on dark however yeah our flat list usually displays a scroll indicator like a scroll view so if you want to hide that we can send the show horizontal scroll indicator pulse and this will hide the scroll indicator yeah thank you very much uh people in the chat can i only make ui to get practice on react nature because aws is way too advanced yeah of course uh you can follow along the ui part and usually i split them in different videos so yeah you can uh you can implement the ui of netflix along with me now uh and also you can check our builds that we have on the channel for whatsapp for uber and so on okay and all right all right all right let's move to the next step and here um yeah the home screen create a separate component for a category render vertical list of category components yeah we have finished that and our next step is i'm missing a slide here i don't know why but we should do youtube where is it yeah let me just duplicate it netflix screenshots and it should be this one you have a page of yeah this page the detail page of a movie or a series and so on okay this is not episode list this is the movie and detail screen and we'll figure out what to do we don't need a plan okay let's create a separate screen for this for this page and we are gonna do that in our screens uh let's create a new folder and this is going to be the movie details screen movie detail screen let's create the index dot tsx and the styles dot yes in the index i think it should be functional component react functional component uh no i don't like it or a function component e function something like that yeah i should learn them movie details screen oh that was react native i think yeah never mind view from now let's import the view from our themed view because we already have the dark background view instead of a div what else what else what else i don't like function there i prefer an arrow function yeah that's it let's declare the styles so let's try react natives wrath native style rock native styles okay iraq natives component with styles no red native functional component no okay i'm gonna go with this one it's still something there import style sheet from react native and export default styles and in our index let's import the styles yeah a lot of boilerplate from these directory styles okay okay now um yeah now we need to render this component because now our home screen still renders um our home screen component of course but uh before getting into navigation we're gonna exp i'm gonna explain uh it a bit later let's just open our bottom tab navigator let's import um come on let's import our how is it called movie detail screen and in our home stack in the home stack is in the component instead of home screen i'm going to send the movie detail screen and that will make sure that we are rendering it here yeah like this react native okay for functional component okay i'm gonna try that let me try it right now [Music] array fc or is it rnafc no okay nevermind movie details screen first thing we will render the poster of a movie or no this is actually not the poster of a movie this is the poster of the first episode or or the next episode that you you're gonna watch so okay that's gonna be just a image image source is equal to uri and let's let's uh check the damage data that we already have the it's going to be easier just to to render everything in our assets data we have a movie dot yes and this is the date about one movie so it has an id it has a title for example suits a year of production number of seasons uh all the information about plot cast creator and so on and also it has an um an array of seasons with every episode but this is uh yeah we're gonna get into these details a bit later so let's import this movie here it's going to be easier to work with actual data without writing it two times so import movie from that assets data movie come on movie okay for the image let's first take the first first episode it's going to be movie let's think how to access the first episode movie seasons dot items movie season items no yeah and we take the first item then episode item first okay uh items at position zero and this is the first season and in that season we want to access the episode episodes dot items at position zero and this is the first episode right why movie cannot find namespace movie movies here what's what's wrong with you i think it should be okay let's just uh console.log first episode first episode where is he doesn't like this one it failed missing semicolon no oh why in port vadim come on const constance oh here in uri i will give a first episode dot poster save image we need to import image forgot to import image from react native let's save okay and we don't see the image but that's because we don't have any styles compiled with warnings let's yeah here is uh our console log for the first episode and i think we access it correctly uh let's give a style to style style dot image and let's declare this style image the width will be 100 percent because we want to take the uh the whole screen and the height let's let's try it 100 for now and then we'll we'll edit it here what do you want all right uh it's there yeah however on this page we already have um a top bar with a back arrow and if we go to our uh navigation bottom tab navigator you know what i'm just because it has different options i'm just gonna uh copy and first one i'm gonna rename it not to home screen but to uh movie details screen movie detail screen and second one will the component will be home screen and this one won't have a header show on false it will have a title empty string for now let's uh not forget to add the types because we see in the red arrow for vet i'm going to open types.tsx homeparam list here on the fine hey brian thank you very much for the donation what's up how are you doing undefined okay let's see if we now have will there be payment processor uh this application but i have a video that i have to make public or these days so probably at the beginning of the next week the video will go public and it's going to be about how to implement in-app subscriptions and in-app purchases in react native so stay tuned for that what i was doing what i was doing uh why is the first one home screen tab one why is that movie detail screen all right that's already better uh now it doesn't have any title and it doesn't have a back arrow because we the back arrow will be there whenever we will navigate because right now it doesn't have where to go back that's why but yeah that's good let's move on for the image style that's where we stopped [Music] image style i can play with the aspect ratio of i don't know three to four no always too much oh or is it four by three four by three [Music] okay and cover resize mode if i do contain no no i don't like this aspect ratio five three and resize mode cover to cover the whole space hover yeah i think that's good so by specifying the aspect ratio our height of the image will increase at the same time as our width because we set the wave to be full screen so if uh we're going to have like a very wide screen uh when we want to increase the height as well so this will make sure that um the kite uh is yeah free on top of five like of a weave that probably doesn't make sense what they said but 16 by nine 16 by nine should we go with uh yeah that's better thank you very much all right i resize mod cover okay let's move on with okay we have a poster we need the title and title title here we will need a text for the title you know what uh i would have to [Music] i'll probably uh implement i'll render all the all the components that i think that we'll need and then we'll style them properly because that's going to be faster so the title is our movie dot title title then we have a line here and for that line we need a separate view to render it properly first one is going to be a text style equal styles dot match and we are gonna write 98 percent match the next next text is gonna be the year the movie dot ear then what do we have here an interesting view that i'll waste a bit of time to implement oh come on a view inside that view will have a text the view will have style styles dot age contain container and the text here will be let's say initially it's going to be 12 plus age hey maxime thank you very much for joining the new jazz developer um membership yeah that's that's really nice uh thanks for the support and yeah write me out um a private message so we can uh chat about and you can get all the benefits of being a member of a channel and supporting it the next one is a text nine seasons number of seasons i have here number of seasons and it has the same style as the year it's just yeah it's just a great text and the last one is probably expo icons it's probably an icon we can work with an icon there if i can find it in vector icons hd hd we have only this one um not sure if that's exactly what we need but yeah let's let's go with it material icons i'll see if i can adjust the style of it to to look a bit closer to what we have from here and it's here name hd 25 color let's try white okay this is the a style this one will just have probably a flex a flex direction row in order to display all the items inside in the same row flex direction row so i'm gonna write it here in line okay we have to implement the styles now for the match here age container and age number of seasons oh but number of seasons wait it's the same year yeah we don't have a styles for it yeah i think that's that's it okay let's uh let's move let's open our emulator i will put it side by side so we can see it like this okay um what do we have yeah we we still we we see them already there uh and also we have a title title save view title you know what yeah i'm gonna put everything inside a separate view everything except the top image uh in order to add a padding to it so we would not have to add this uh padding to every component and here i can even do it in line because later on i think it's going to be a bit different so parting 15 12 okay suits yeah i think that's better styles title uh font size 20 don't wait bold 24 save style i forgot to add the style here dot and styles the title save all right that's good match first of all color green will it be a good green not a very good one oh i cannot choose here colors the same way i did in web store so red green blue oh my god zero zero that's a bad green okay doesn't matter [Music] no i'm not gonna find a good color like this i'm okay with that and i see that the font weight is as well bold here font weight bold save okay um match let's add some spacing uh we can add it as margin horizontal five will be okay okay i don't want to val left margin right five for the ear the color will be i don't know light gray save i think it's not with like this ear color light gray does it work yeah it does oh my god color picker like this no okay like this better oh come on okay that's that's better for the age container each container will have a background color of a kind of a yellow okay background color yellow okay then align items align justify content center and the line i'm center to make the text in the middle a line items center uh adding some border riders border radius of i don't know two pixels and adding some padding probably only horizontal we need horizontal three and for the age itself that's gonna be color black font weight bold okay so let's add some margin right to the ear and also to the edge container what's up here i think that's nine okay nine season number of season and then save that green i cannot stand it but i have no idea which one is better oh look that's a very good match okay uh two two two two the next step is to render two buttons uh before that vadim will you use mongodb with rack native just curious uh yeah uh a lot of people are asking uh to do something with mongodb and node.js express so i'm thinking that i'm gonna do that and that's gonna be pretty soon probably the next build will be uh node.js with mongodb with probably graphql api and so on uh context api yeah i used it in some builds probably uber not heavily like some to share some data like very small uh redux uh i might use that if when i'm gonna implement um [Music] uh ecommerce website i think in that case it makes sense to use redux [Music] um i really want to join adjust developer senior how will that work uh any insight on how not just in your work so to join it go to the channel and press on the join button i know that it's not available on in every countries uh but if you uh okay chill chill gel if you press join here you would be able to to join a tear and here if you join the no of the the senior part you will be able to join uh join with me live stream and code along uh for example a feature i'm gonna either explain it to you in the live stream or if you have more experience you can take over and implement a feature yourself in the live stream so that's that's the perks other than that you will also be able to pick and vote a topic for future videos and live stream uh you'll have early access to new videos that are published uh and you're gonna have a page the custom emojis uh and a special role in our discord channel so that's that's the perks that you'll get okay with that being said let's move on because we still have a lot of things to do here on this page a lot of a lot of components rendered here let's open back our index and after our vis after this view which is uh our line here we need to do this uh to render two buttons this one and this one for the buttons uh we are using a pressable component pressable um and this pressable can accept that on press and this is going to be a function that is going to be called whenever a user taps that button so right now we can save it it's just going to console worn play later on we'll implement the logic behind it and for the styles it's gonna be styles dot play button but then inside that button we need to render a text and the text will be play and also an icon i can i can play how does it look just as as simple as possible and typocontrollerplay i can put it inside the the text itself so to have it in the same line very much another coffee thank you okay let's import the type of from uh from from from here from vector icons okay that's the first button i will add some comments probably it's gonna make more sense play button and the next one is gonna be the download button download button and for the download we used which one and design download and uh the color yeah probably is the same color and let's change the text to download we shouldn't forget to import the indesign and in the styles here we will have here we will write download download button and for the text download button text and let's do the same okay styles dot and let's do the same for this text this is gonna be play button text play okay let's import and designs from vector icons and now let's add some styles let's add some styles to our play button and download button buttons play button we're gonna have a play button text and the same thing for download button and download button text let's save let's add them here so we can see them side by side where is it here oh so many windows come on okay um play button first of all it has a background color [Music] white save that's good play button text color black uh the container should have a justify content uh yeah justify content center and align items also center to just to render them uh to render the text in the center both horizontally and vertically justify center and align items also center okay that's good not sure why the icon is a bit not centered but okay oh i think that um if we set the same font size as the icon on size but 24 is going gonna be a lot 24 play button text yeah it's it's a lot but it's centered 20 now that's even 16 and font weight bold on weight gold and here let's do also 16. okay the play button has more padding like five so it'll be higher yeah something like that and also it has border radius to make the corners round not a lot that's too much free yeah like that so let's um do the same for the download button and for the download button text uh however the background color here is dark gray will vent work no they're grey like this and even darker that text color is white here and also in the indexed for the uh download button the color is white we can add some margin left here to to this icon mark margin right i mean margin right because it's too close to the text five come on margin right no it doesn't work margin right padding right will you work with padding doesn't want okay i know what to do in these cases you just add an empty space like this and that's it we have space between them play download that's good and for the buttons i'm gonna add some margin vertical five for the play button and for this one as well save yeah that's uh i would say that's perfect the size of the second icon can be adjusted as well perfect perfection all right let's move to the next step okay okay okay uh the next one is to render here the the plot text and inside this text will display movie dot plot save okay i don't think i want to style it anymore i think it looks okay probably smaller size but we are good next one text is cast and we are gonna display the movie.cast and also creator creator movie dot creator save and you know i'm gonna be lazy and i'm gonna give the same style as we give for the the year because that is just a different color like this okay that's good and like this creator cast perfect let's add some margin vertical here margin to give some room to brief merge a vertical tan too much now it's okay justify content and justify content for what uh for the text here with the icon maybe okay okay okay okay let's move to the next part which are these three icons so this is going to be a row with i can buttons and that row will be a view come on that view should only have one style property and that justify content flex direction i always confuse them row save okay inside that we're gonna have three three icons and because viking contains like an end and the title i'm gonna have to put them inside views so this is a plus sign plus and design plus okay that's good and design name plus size 30. come on come on and add text saying my list save color equal white save okay and here for the style we will have what we will have we'll have justify content center or no line items align items center css color picker extension for vs code for the color wheel perfect thank you very much uh hopefully i'll not forget to add it okay now we have i can see if i can easy in the middle and i think yeah um margin horizontal 20. it's a lot of margin there okay like that text my list style it's a bit faster just to to create the styles here so color is dark gray okay but that's okay so yeah i'm gonna copy this view two more times then let's okay rate and share share from up size 30 color white and the last one is share here will i find that it's like okay never mind i'm gonna use which one share social outline or share social from unicorns okay [Music] nikon's share social okay let's what did they do okay that one was the one that we needed here as the second one and yeah this is the third one let's not forget to import this okay no no no no no let's go that's okay uh probably we are too big we can decrease a bit the size uh 24 24 24 save yeah that's uh that's good we can add here margin top five to make some space between them like this yeah you you can uh i think you get the idea and you can work even more and make them even closer to the original one i don't think i will i'll spend more time on this other than adding here margin top 20 like this yes okay so this is our movie detail screen uh yeah it's pretty close to to netflix original um let's have a look what we need here yeah i think that's uh that's it with this screen the next step is to to render the list of episodes here uh and yeah a way to change the season which is underneath yeah i think that's that that's what we are gonna do uh next let's take a short break see what people are saying here how are you doing guys css okay for the share i can search for send instead of share yeah that's probably a good idea send okay onto awesome send and oh yeah this that one is better fond awesome send just outline save okay yeah but that's true hello from indonesia hello okay our screen is already getting uh long and we already see that not all the content fits on this screen so we should either put everything into a scroll view so we would be able to to scroll this screen or we will leverage the fact that we will have a flat list to render all the the episodes here so because of that we can put everything else as the flat list header so we will be able to scroll through it yeah i think that it's going to be a good idea so let's let's start the episodes list uh first of all we have to create this episode component and here i'm speaking about uh this component that will render that will render this poster will render the title and the plot of the episode and as we see they're similar for other episodes i mean the style the position and everything so that's why we need to create a separate component for that uh let's do that where in the component let's create a new folder called episode episode item something like that here index dot index index dot tsx episode item uh style dot ts styles import style sheet from react native and export default styles or okay in the index here let's do react native functional component react native okay we don't need this one and this is going to be episode item and exporting the episode item from this file okay the view and text will import they are not from react native but from our components that are that have some theme attached to them happy sold so now let's try to render this component in our screen movie details index and you know what i'm gonna just render here somewhere on the top just so we can see it uh but later we'll gonna implement the list [Music] should be somewhere here episode okay that's good that's good so we need to send some data to this episode item so it will know which episode to render so we have here our first episode and let's do that episode is equal to the first episode and now we are sending uh some data through props to this component let's save let's you know what i'm gonna put it here inside this view just so it will have some uh padding uh and yeah i'm gonna close this screen i'm gonna close everything except our episode item because that's what we will work with so first of all let's receive our data and we'll receive them from props and the props will be episode item props let's declare the type of these props and episode and if you remember we send there a variable called episode and that episode will contain uh next data let's have a look in our movie episodes and yeah this is the data that one episode will contain so i'm gonna copy it here that's an example of one episode so the id is a string the title is as well is as well as string poster this is the url of the poster string string duration string everything is string plot string and video string let's save and now let's uh destructure this episode out of the props and be sold we distract it from the props so how do we render it okay we have a view we will have yeah let's split this is the whole view which we already have it here this view will have two lines the first line and the second line so the first one is another view because it contains an image it contains title and so on but the second one is pretty simple and obvious and that's going to be the text with a plot so it's going to be episode plot episode plot can i go to the bra from yeah of course should we wait uh okay okay we we see here the plot let's we'll style them a bit later styles dot plot okay inside this view we have we have an image the style will be style dot image and the source will be uri episode.poster this variable episode.poster let's import the image from react native from react native okay that's the image what else yeah this view will have some styles because we need to declare the direction actually no actually yes styles dot roll image the next one the next one is the middle container which contains two texts and because the direction of them is different we will put them inside another view view text this is the title episode dot title and if we duplicate it that's gonna be our episode dot duration prover style i'm gonna go with style the title style.duration and the last one is a download icon which we took from where and design and design download and the color was white white okay let's import and design from from expo letter icons save and and all right let's let's start uh let's start styling this because we have a lot of things to style row row next one is image title what else plot we're all we can start from here just a flex direction row and now we are looking here at this this is our component that we are styling flex direction row i do okay i imported it wrong okay now it's a bit better for the image okay the row will uh have uh justify content as space between to move everything to different parts of the screen yeah probably like that image image will have a height of 50 and an aspect ratio of 16 by nine and every size mode cover and also some border radius border right just free save okay height 50 probably a bit 100 too much 75 75 yes so [Music] for our this view which contains uh styles.title container that's how it's going to be called style i'm gonna add here a flex one probably yes and uh to add some spacing padding turn five is okay and align items center no justify justify content center yeah like that to be in the middle actually title is okay doesn't need any styles here do color dark gray and font size then yeah that's that's better what else justify content i think that's we can put it here align items center so even the yeah the download button will be in the middle you know what i think that's good enough uh for the plot we can say that the uh color is dark gray come on update dark gray and what else the raw let's add some margin bottom five yeah i think that uh that's pretty close to um to the actual design so i'm pretty happy with that um do we need to do anything in this component i don't think so uh let's let's open our uh screen the screen movie details index tsx and here uh let's render our episodes in a flat list so that's going to be a flat list from react native image view this is the view and here is going to be the flat list the data in that flat list data it's going to be movie dot movie dot seasons okay let's let's take the first oh god what did i do let's take the first season into a variable cost first season uh and this is the first season yes and we don't need first episode yet episode item we don't need that one okay i think we need that okay so in the flat list we will send the first episode dot um not first episode first season we need to send all the episodes in the first season episodes dot items this is our data and the way we will render it uh is using um we will receive here the item which is one episode and we'll render a episode item where we will send the item as the episode item save and yeah we cannot scroll it we cannot scroll it because it's down below we cannot see it on the screen however we can put ever all the whole view except the image let's copy the whole view it's gonna be a bit ugly but okay uh yeah let's copy the whole view and add it as the item header or header item component how is it called header list header component is equal uh yeah let's add the parentheses and then paste in the whole component here so this is going to be the header of our flat list and now if we save and if we start scrolling now we see that we can actually scroll uh not sure why we cannot scroll past that uh probably [Music] probably what should we add not sure why we cannot scroll past that and i'm just gonna delete the list header component just to see uh if that's because of it let's save and here we see the two episodes okay i think we will have to add some uh some margins to the bottom so here what styles can we give to their padding but um 100 yeah with margin bottom it kind of works but it needs a bit more i think it's the size of a list header component that's the issue yeah right now we can scroll it all the way till the end and uh one more thing uh in our components episode item style here where is it index for this view for the root view let's add a style margin vertical 10 will it be enough so there will be some spacing between the episodes yeah that's that's already better so let's have a look here um yeah that's how it looks we can scroll we can play yeah that's uh that's how we render this page as a scrollable list yeah the next step on this page is a way to change the season because right now we are rendering by default the first season we send the data here of the first season but we need to be able to change this to change the season and for that we're gonna use a real native speaker and yeah let's use one of the community packages yeah let's go with this one how to do determining the season is one or two yeah that's that's what we want to do and um we will display to the user s selector here and whenever you press here you'll be able to choose from different seasons so if it's the season one two or whatever so for vent i don't remember which which exactly library we are uh we are using uh does export has something like this expo uh picker a component provides access to the system you are picking between several options this library was formally known as drag native picker if you have it library okay okay let's install the expo using expo let's install this speaker i'm gonna open the terminal expo install picker and let's check the documentation yeah it's the same one as here and that's how we will render it and we will render it just above just below these buttons what we have here so our buttons are row with icon buttons that's here and underneath we will display the bigger picker picker picker ok we will have to import it first and selected value let's think what uh our items inside this will be so for the on value changed i'm gonna do anything right now and select language nothing not yet what's wrong here okay like this so first of all let's think on how to uh how to render the items inside here so our items should be the let me open the data.movie and the items should be uh the names of all the seasons that we have so it should be in this case it should be the season one because that's the first season then season two and then that's it investment twice that's the two seasons that we have uh so we okay let's do it where we can do it even here i'm thinking how we will change the component later so it's so so it will make more sense so const season names and here we will do a mapping a mapping on the seasons movie dot seasons dot items and this is the array list of of seasons but each season contains an object and it contains a lot of data but we need only the name from here so we will map from um from an object to to a string and that string will be the name so to do that i'm gonna say map and for each season we're gonna take only the season dot name like this then using this season names we can we can do one more mapping here so for the season names see [Music] some names for each one of them uh we will render then name so we will map again for all the season names and for each name which we'll get here we will render one item one picker item and the picker item will have label season name name just name this one and the value will also be a season name save where is it each child in the list should have a key okay we can send the key here as season name where is this speaker i don't see it oh it's here okay we need some style but we already see the two seasons uh let's see what styles it accepts props style selected value let's try uh to do it with style here style equal color [Music] white yes yes yes i'm gonna do it here does it also has this what happens okay should be here save okay i think it also should have a drop down here icon so now i'm able to uh to see a list of all the seasons that we have and in the movie if i'm gonna add a new season i'm gonna copy this one and i'm gonna add season three this and three now i will be able to see three seasons here okay now we need to uh to be able to change between seasons and when we change between seasons to render different items here and for that we need uh to keep track of a variable like which season are we uh viewing right now which season is active right now and to do that for that we will need a state variable [Music] current season current season how there is a lot of ways to to track the current season however we have a whole season object layer where we have uh the title the name of id the index and so on probably will do the whole object like the whole season object and that's going to be a use state use state and initially the the first um season is going to be initially yeah the current season will be the first one and then we'll be able to change it so let's import the use state from react current season in the flat list now we shouldn't say that the data is uh is coming from the first season but we should say that the data is coming from the current season okay let's make sure that we do that in our picker uh selected value will be current season dot name and on value change item value item index we're going to use the item index and we're going to set the current season we set current season and we're going to set it with season right or how is it called movie dot seasons dot items add position item index let's save now and let's have a look if it works let's change the season here from one to two and we see different episodes if we change back to uh season one we see the value updated also in the picker and also that uh the items rendered here are also updated you know what uh i think i don't like that there is no space uh around the episode here i'm gonna go to the components episode style index here where here all right let's do margin in general vertical and horizontal yeah that's that's perfect so we are able to uh change the seasons we are able to see this season changed no drop down for picker uh i think it should be visible here is just yeah the color is the same as the background because if i do what if i do view for example here background color white yeah you see the the arrow is there but it's with dark color so not sure how to style it let's check the documentation style but speaker style type drop down icon color let's go to the picker and here drop down icon color is equal to white now now yeah now we see that the drop down is is indeed white yeah here we can say that the weave is 200 pixels so that the even 150 even less 100 if we want to make okay that's not what i want if we want to make them the arrow close to the text here woohoo yeah so i think that's that's it with our movie detail screen that was a long uh that was a quite big component commit movie details uh screen can you bring in the drop down closer too yeah here it is uh so are we good here the next step is the next step is to set up the [Music] set up the player the video player that's going to be interesting so for that lots of homework for the weekend yeah sorry for that but we gotta learn because if we do not learn who is gonna okay let's um yeah we're gonna use expo av to render the video let's close some tabs here and let's open the documentation expo av this is a library that helps us uh work with audio and video that's why it's av audio video uh so let's uh let's let's let's install first of all the library expo install and then we will be able to import the video and audio from expo av okay an example with video handle video ref playback object equal to component video rev that's gonna be interesting sound playback object uh yeah i think we did that with audio on uh in our spotify clone where is it so it's pretty much the same as an out as loading and displaying an auto so where is this spotify but if i clone here we have here our components player widget index yeah first of all uh where is it audio are we rendering it somewhere okay yeah that's the beginning of uh the whole process uh yeah we create a video or a sound with create a sync when we set the new sound and where are we [Music] that sound sound and see where we are rendering it but okay so is our library installed okay let's try to uh to render this video and we are gonna uh probably do it where in our uh screen now we're going to create a new component for that video player let's come on let's what's that did he create something wrong new folder video player new file index tsx new file styles dot yes style from react native and const styles x for default styles that's it with styles here within the index graph native functional component i hate it like this const video player is equal to this component export default video player video player will have props video player props and i think we will send just the uh episode object to this player and that's it the whole object interface video player props is episode the episode will be and in this case we share the the same type for the episode so i think we can uh make this type global yeah okay we we can just copy the same things from there here or another way is to go into the global types and create the export type episode is equal to this and this is like how how an episode will look like and if we save the episode we can say that this episode is on episode type like this and we do not duplicate the code and the same we do for the that's a video player episode item here this way we reuse the same types dry concepts don't repeat yourself okay const episode episode is equal to props in our uh where in our screens movie detail screen index i think instead of this image we can render the video player components and the episode will be will be the you know what should we keep it in state yeah let's keep it in state const current episode set current episode in the current episode will be first season dot episodes dot items at position zero and later one will be able to change it so episode is the current episode like this right right video player okay we have here the video player let's try to render it here [Music] video that we will import from expo av handle video ref let's do that as well const yeah it's gonna be interesting to to style everything here okay okay we can load the sink here source initial download first okay so on the playback object let's load a sync and this function expects first one is source source can be a uri okay we can define it as a separate object to keep it more organized uh source will have a uri which will be episode dot video video right and we will send it as a first parameter to the load the sync uh null is not an object playback load the sync playback object ok the initial status that we have a play back playback video expected free arguments okay uh load the sync expects free arguments const initial was it called initial state initial status is another parameter that we need to send and the last one is download first this is a boolean if set to true the system will attempt to download the resource to the device from before loading this valid defaults to true note that at the moment this only works on source of the required powerful okay we're gonna do source the second one is initial status and the first one is false because we don't want to download it first because you would have to wait a lot of time to download to download it uri should play is playing should play is not an object why it is not an object let's console log playback object playing back object oh that's that's a lot yeah but now it didn't give me an error which is good okay what else can we send to [Music] there yeah this is only with playback status let's load let let's do them where is it on playback status update this is the first one this is but create a sync where this is default initial initial status okay let's open the video documentation here because it will give us more information video reference video yeah it's a bit it's a bit different here to be honest we just send the source here the styles and just a reference i think this method is a bit easier let's try it video and here we will send refs styles video you are right for the uri yeah we have a same uri but we can take it from episode dot video resize mode contain is looping i don't need that and status let's keep track of the status of a video gonna import the use state probably i'll not need this one styles cannot be defined okay let's import styles from our styles file let's save and in our styles we will need to define the styles for the video which you think needs to have some to have some what video styles with height something like that at least with 100 percent and right let's say 200 pixels yes we have it we have it and it will even work in full screen so for the height instead of height probably we need to do the aspect ratio 16 by nine save yes like that and [Music] resize mod contain yeah i think for the video it's important to be contained not cover in order not to lose the details of a video if it's in a different format okay it also has it also has a poster i know that we can set uh source and poster source probes customize the source of video contents yeah here poster source and we can set it here is equal to episode dot poster save and the poster should be displayed whenever the video loads we declare some styles for poster as well as an optional property to pass custom styles to the poster image i think we're good hey poster why are not displayed poster style with i don't know 100 percent right doesn't want to show the poster i think the poster just displays while it's loading i think when the video has finished loading it doesn't display the following yeah probably when it finish it doesn't display oh use poster here use poster equal true come on come on yeah right now it uses the poster and i think i don't even need the styles like this and if i press nothing happens because use poster is always true oh no yeah it actually works so we can put it full screen we can turn the screen around will you i think i don't have oh come on how to rotate but it should might be we're not able to rotate if we go to up.json orientation here is portrait let's have a look what value it should be to have both portrait and expo json control find or orientation default portrait landscape up to a specific orientation with retro default to no lock valid values if we just delete it and we probably might have to rerun it and let's do the outer rotate yeah what's why isn't it working landscape does it if i set it to landscape will it display to landscape by default i don't see it displayed in landscape am i saving the file orientation landscape that's weird i think we just have to um it should be auto or default i don't see auto here i think this locks the the orientation but if it doesn't have probably it it should work i'm not sure why uh on the phone on the emulator it doesn't work and yeah i don't i would like to try it on on the real device because i think it's some issue with with the emulator try to rerun react yeah probably something like that but that's not the that's not a big issue uh let me look for documentation if there is anything else that we need to do poster yeah we do did that use native controls right now yeah we are using the native controls of the device uh however we uh if we don't use native controls we are able to create a custom component for the controls and in that way we can have a play button also we can select the episode from this bar uh and more things i'm not going to get into turn off emulate i'm not going to get into the details because it will take a while and i'm okay with having these default default controls as they are here but just for you to know you are able to customize the control bar here what else okay some interesting things from the library um yeah the other thing that we can do is to be able to change the episodes from here so if we select another episode to change the episode in our player uh so let's do that uh as the last step in our player and in our uh detail movie details page so let's go to our movie details index and here let's current episode yeah we need to call the set current episode whenever we click on an episode here so that's uh in our visitor flat list with episodes there is a on on touch or on select wait let's check the documentation react native flat list on progress legacy remove yeah i don't see that it has i thought that it has a custom features like one select uh but it seems it doesn't so yeah we we can do that by passing uh a function to the episode item and set or on press let's do it like this we'll call the set current episode on press yes and let's go to the episode item component and here the interface will receive it on press which will be a function [Music] that will contain an episode episode sold like this i think it's like this isn't it and let's define let's take the one press from the props and we will change from a view to a pressable uh and we'll declare the on press equal to on press pressable will import from react native save yeah one press no no no on press uh we will call the on press and we need to send here the the episode save in here press episode episode type dispatch setstation yeah the types are a bit different um [Music] on press set current episode if i change the current episode i'm gonna add just to console.log to see if we actually we actually call this function and set current episode episode save here expected come on okay this is this one on press then it's that one without this one here we need to close the episode item episode item then we need to close them i'm so lost save and let's have a look here if we press on this one uh episode one if we press on the next one episode two uh okay okay okay okay but we also need to make sure that yeah we we know that we are setting it properly in state we are calling it whenever we press we can do it like this um the only thing is that we need to make sure that whenever we change the episode the videos will change as well in the player index here source console.log let's console the episode i think it should so this is the first one if we press on the next one it changes to the next one for the i will do a poster style and i'll set the resize mode to resize mode to cover because in this case it doesn't look very good save like this so whenever we change the episodes in the list whenever we click on them we see that the player also changes so we are able to play i hope are we able to play yes we are it's just because the video is loading and that's why it was so slow and also yeah we can change the seasons select a new one for example this one and whenever it changes and the video also changes but the thing is that i have the same url for the video everywhere but you know what i think it's not gonna change the video when it's playing and i think that we will have to to do some heavy lifting here so whenever the we will define a use effect so whenever our episode changes right whenever our episode changes we will have to uh to replace the video in our player so that's video unload i think first of all we need to unload the current video so here we'll have an async function we are gonna call right away and inside this function will await video dot unload a sync this is of type video it's not video it's playback type playback oh dot current object is possible null so we'll do if we don't current we will return first of all we will unload a sync and then we should load another video load using first one is source uri is episode dot video i don't need nothing here why says status is bullying is not boolean oh boolean let's save current file use effect okay we can import it don't mean you don't need to be mean about that okay let's try to play this video okay and if i press on the next one something should happen it should start from the beginning yes that's true and because we have the same video maybe it's a bit confusing but yeah it unloads the previous video and then it loads the next one so that's why it starts from the beginning so if i press on this one uh i will see shortly that it loads the video from the beginning and we are able to play it so that's good yeah um and that's uh yeah that's it that i wanted to do with the video player in this video so i'm gonna do gate add get commit minus m video player video player alright okay guys we have finished the first video so if you have any questions now is the time let's spend a bit of time uh talking and um i'll wait to at the same time next friday in order to continue this series and we will implement the backend for our netflix clone one more thing guys one more thing yeah i'm gonna come back to this slide later but i forgot that we didn't speak about the navigation uh yeah let's uh because initially our application should render our home screen home screen but that's going to be easy save and if i refresh it it should display the home screen and inside the home screen where we have it home screen we have a flat list with home category okay let's go into our home category component yeah in home category component what happened there what happened where run on android and our home category component contains a list of movies and an image yeah this image is a movie we can um yeah we'll put this image inside the pressable because we want to register presses here image goes here and on press we will uh const on movie press is equal to a function console worn movie title let's console warn the movie title to make sure that we move in what does the movie have movie title and here on press will be on movie press and we'll send the item there save okay here is our home screen let's press on this one we see undefined while we see undefined movie press id poster oh movie movie id movie dot id yeah movie dot id movie free if we press on another one movie two movie one and so on that's good so uh what do we need to do here we need to navigate to the movie details screen so let's import import a hook use navigation that will allow us to get access to the navigation from react native native navigation now this one rock navigation native so first of all we will um get the navigation using this hook use navigation and then we simply do navigation dot navigate to the movie details and we will also send some parameters there we send the idea of a movie will be movie dot id save and let's press on a movie navigate with payload name okay let's check the name it's movie details screen if we press now it redirects us so yeah and now uh in the header we see a back arrow which is exactly what netflix has and which allows us to go back to our home screen and choose another movie and yeah at the moment we display the same movie but in the next video we'll be able to query this movie from database based on the id that we send here and display the data specifically about that movie so uh yeah we cover the navigation as well so let me uh commit navigation and i think that's it for today let's uh let's hope that i will not remember something else so uh yeah as i said next week friday at 3 pm gmt as usual uh we are continuing this build and we start implementing the back end of this application where we will implement the authentication so we the users will be able to register to sign up uh to set whether we forgot the password to receive the emails and so on then we're going to implement the database uh that will store uh all the movies um all the data about all the movies above the categories and so on and also we'll implement the storage for the videos and this is like where the actual video files will live so that's that's what we're gonna do next week i'm super excited about that now let's get to some questions if you have any and yeah it's almost four hours i hoped uh that it's gonna it would have been free but no so guys do you have any questions or should we call it a day [Music] okay someone asked probably some time ago can i use amplify for my app like tiktok for storage for better performance yeah amplify is a great backend for application and it scales very well it's very easy to get started with it it's a bit technical uh however it has a lot of things already pre-built for example for authentication it has a lot of components pre-built in that you can just take and use and uh yeah if you set up it correctly it's going to be very performant like it will outperform any the diy solutions okay what else what else is back is back and done today no back end is gonna be done next friday so i'm gonna wait till next friday at 3 pm gmt same time same place what do you think about flutter i think i'm asked about these questions every live stream uh i haven't tried flutter myself i saw some code about on flutter i think that the code looks very messy and unreadable a lot of nesting going on uh but maybe i saw bad code i don't know so yeah that's my opinion but i'm looking forward to to give it a try and to see how it goes uh the uber application real-time job tracking is complete and yeah we finished it previous week so maybe you skipped it or maybe you're expecting something more i don't know but yeah we we have all the real-time jaw tracking for cars that is updated in the user side hello sir i want to ask why do you do tutorials in aws amplify and not in mongodb uh because i think that aws amplify uh is a great backend forth like 95 percent of applications um it's very performant it has a lot of things pre-built so you don't have to uh to rebuild the wheel just thinking about how much time i would spend in a in a node.js with a system to implement for example uh things that do not differentiate an application for example authentication having authentication will not differentiate your application uh from your competitors what else yeah logging uh and stuff like that that are already done in amplify so you can just get going start using them and implement the business logic that actually makes uh makes sense and i i really wish that i started my startup using amplify because my startup yeah it's using node.js mongodb graphql and so on and i spent a lot of time uh building basic stuff that are so easy to do with amplify but that doesn't mean that i'm not gonna do any node.js tutorials with mongodb i'm looking forward to that because a lot of people are asking so yeah we are definitely gonna do in near future a tutorial with uh node.js mongodb backend can we use material ui indirect native uh i haven't used material ui and react native um yeah we should uh we should google it and do and check if there is a library for that i'm not sure and is ui completed for netflix are you wired back and two different things if i want to become front-end developer should i watch your ui video will that be good for me uh yes the ui for the netflix is uh most probably complete we'll see maybe we will have to adjust some things uh when we will implement the back end but not uh yeah this is uh the most important things are already done so if you're looking forward to do only front end uh i would highly recommend yeah i mean yeah go ahead and watch only this video only the front end and implement it yourself but i would recommend to to have a look at the next video as well and you'll see how easy it is to build the back end uh because yeah nowadays uh having like a full stack knowledge uh gives you a lot of opportunity um like more and more uh not nowadays the front end and back end is um is getting closer together and it's not like it's not like it was like i don't know three or five years ago where you had like very specific back-end developer and very specific front-end developer now in all the companies that i worked even at amazon uh most people were full-stack developers and they were handling both front end and back end because yeah a lot of things are interchangeable so i would i would suggest just to watch the next video and if you enjoy it that's great uh if you prefer only front end yeah that's also good you're not missing one best practice is to use facebook skeleton skin you mean the loading skeleton yeah maybe we will implement it in the next video when we will implement like loading screen and so on uh drop down list in react native we used the picker library right now it's pretty basic but it does the job so it renders the native picker element it's gonna be it's gonna look different on ios because it renders where the native the native component where did you learn graphql i learned mostly all the technologies that i know by building by doing by creating by working at startups and projects yeah not just for the sake of learning them but to actually solve a problem so for example i don't know even aws i learned it at my startup because i needed to know it because i'm a cto and i have to manage everything there and too and to to optimize it our architecture on aws that's why i i i also went for the aws certifications uh in order to understand the to have a deeper knowledge about aws and to make sure that i'm optimizing the cost the performance the security of our system in cloud madin thanks so much thank you very much for watching what are you thinking about moti animation in react native i haven't worked with it um i saw some videos about them about this library uh yeah i i can't say anything about that i should have a look probably because before having an opinion okay guys uh what do you say if we continue this discussion uh in our discord channel so yeah the link is in the description join the discord channel and let's talk there uh because it's already four hours so we've come a long way all right thank you very much for watching thanks for sticking till the end if you enjoy this video and if you find this uh this stuff available that i'm creating here on youtube uh please consider subscribing to my channel turning the notification bell on not to miss the future live streams uh because i'm going live every friday at 3 p.m uh gmt um time and yeah this these videos takes a lot of time to to prepare to build and to create here so if you would drop a like subscribe to my channel that would mean a lot to me so thank you very much guys for watching uh probably see you next week so as always guys take care stay hydrated and write link code

Channel: notJust․dev

Views: 97,614

Rating: 4.8896551 out of 5

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, typescript, react tutorial, react native, javascript tutorial, react native clone, react native app, react native for beginners, learn react native, react native project, react native project tutorial, netflix clone, netflix react native clone, aws amplify, react native expo, expo sdk, aws amplify react tutorial, video on demand app

Id: CNaLOa-6X7U

Length: 233min 40sec (14020 seconds)

Published: Fri Mar 12 2021