LCRN EP12 - Movie Streaming App - React Native UI

hey what's up everyone i hope you are doing well this is jack from buyprogrammers.com and welcome back to a brand new episode of let's code react native in this episode we are going to build a cool looking movie streaming app based on the design created by resum on dribble.com just so you know the full source code for this episode is not available on sharp.buyprogrammers.com for just a few dollars so be sure to check that out and if you haven't already be sure to subscribe to our channel and turn on the notification for more videos like this alright now with that being said let's get started [Music] just like the previous episode instead of just setting the project from scratch we have actually prepared a star template so that it will be a lot easier for you guys to follow along so all you need to do is to download the source code unzip the file and this is what you're going to get once you open up your source code the first thing you need to do is to open up your terminal and run npm install all right next you need to run react native link after that you can then cd and do ios and run pod install all right now you can then navigate back to the root folder and run react native run ios alright so as you can see here the starter template is actually a very very simple app where we have the bottom tab navigator over here we have a text component over here and also we have a touchable opacity that allows us to navigate to the movie detail screen and pretty much that's about it next we'll quickly go through the project folder over here first thing we have is the assets folder where we have the fonts that we'll be using which is roboto as usual and icons that we'll be using in this project and also the images that we'll be using in this project you see we have all sorts of series images and also the dummy profiles all right we are going to use this later on don't worry and next we have the components folder for the starter template i've only included the tab icon component which is nothing more than a view and an image component that will use it to render the bottom tab over here all right okay so after the components we have constants folder and within the constants folder we have dummy.js which is basically all the dummy data that we'll be using in the project later on as you can see here we have the season name which is barbarians we have thumbnail we have the profile and so on and so forth all right later on we'll use this um dummy data and present it to look like a mark like this okay so after the dummy.js we have icons.js which is basically all the icons that we'll be using in the project later on okay images and also team.js so over here we have the dimensions of our screen the width and height we have the colors that we'll be using we have all sorts of um different sizes and also we have the fonts and of course we need the index.js file and export them so that we can use it in the project later on so next we have the navigation folder again this is pretty straightforward we have created the bottom tab navigator over here and within the functional component we have returned the tab dot navigator where we style the bottom tab bar over here as you can see the background color is black and the height is 100 and within the tab.navigator we will include the tab.screen component which is basically these four tabs over here so as you can see we have hum tab we have play tab we have search tab and also we have profile tab oh and over here we are using our very own custom component to render the tab bar icon over here okay and last but not least we have the screens folder so within the screens folder we have ham.js which is a very simple screen that renders the text component and also the touchable opacity over here and the same thing goes to movie detail screen alright so that's all for the project structure now the first screen that we'll be doing is the home screen which is this screen over here let me open this up okay now before i begin let us first you know import the components that we need from react native okay so back to the home screen and over here i'll need the save area view i'll need view i'll need text i'll need flat list i need touchable opacity i need touchable without feedback i need image i need image background i need animated this is for the darts over here okay we need to animate these darts later on all right and lastly we need scroll view all right next we'll need to import from the constants so import from constants over here we'll need the dummy data we need colors we need sizes we need fonts we need icons and also images okay so for the home screen the first thing that we'll be doing is to wrap this whole thing within a safe area view with a background color black alright let's work on that first so i'm gonna delete this whole thing and change it to save a review give it some styling so flags equals to 1 and background color equals to color stop black alright once we have set up the container view which is this save a review the first section that we'll be working on is the header section over here which basically includes an image button on the left and also on the right okay so within the safe area view we will need to render a function called render header and we will create this function over here right so function render header and i'm going to return something okay so we need a container view like that give it some styling so style equals to flex direction equals to row justify content equals to space between align item center padding horizontal equals to sizes dot padding okay all right so within this container view we need two components which are the profile button over here and also the screen mirror um button over here okay so first we have the profile and followed by screen mirror so for the profile we need a touchable opacity give it some styling align item center justify content center with equals to 50 height equals to 50 as well and whenever i click on this button i would just simply console.log profile like that and now within the touchable opacity we need an image component the source will be images dot profile photo style is going to be with 40 height 40 and border radius equals to 20. all right so the profile showing over here next will be the screen mirror button okay so over here same thing we need detachable opacity as well give it some styling so justify content equals to center align item equals to center as well with equals to 50 and height equals to 50 as well and when whenever i click on this button i will just simply console.log screen mirror like that so within this touchable opacity we need an image component as well source will be icons dot airplay the style is going to be width 25 height 25 and the thin color it's going to be colors.primary excuse me all right cool so the header section is now completed alright so next we'll be working on the new season section which is this part over here so for this part we'll be using an animated flat list the reason why it has to be animated is so that we can control or animate the dots section over here and for each of the item in this flat list we will have a touch pool without feedback okay this whole thing is actually a button we have the image background okay we have the play now section and also the steel watching section over here all right now let's see how we can do that so the first thing we need to do is to wrap this whole thing this whole part over here into a scroll view so that it is scrollable over here all right so right underneath the render header function we will be having a scroll view like this and the content container style is going to be padding bottom 100. the reason why we need to give it some padding bottom is so that the scroll view content will be blocked by the bottom type navigator over here okay all right so within the scroll view we will render a function called render new section sorry new season section and we will create the function over here so function render new season section and over here we will return something okay like i mentioned earlier we'll be using animated flat list to render this part okay so animated dot flat list and for this flat list it has to be horizontal padging enable snap to alignment equals to center snap to interval equals to sizes that width shows horizontal scroll indicator equals to false scroll event throttle equals to 16 deceleration rate equals to zero content container style equals to margin top sizes dot radius the data is going to be dummy data dot new season key extractor equals to item arrow function item dot id on scroll equals to animated.event native event content offset x new season scroll x and don't forget we need to set the use native driver to false so what we are doing here is basically getting the horizontal scroll position and assign it to the new season scroll x reference variable and of course we'll need to create this variable over here so constant new season scroll x equals to react dot use ref and the initial value is going to be new animated dot value zero and over here it has to be oops it has to be dot current like that and lastly we will have the render item prop so render item it goes to item index arrow function and over here we will return something okay like i said these are actually buttons this whole thing so i'm gonna use touchable without feedback like that and whenever i click on this i will navigate to the movie detail screen and at the same time i will pass in the param as well so selected movie will be the item now because you can't really style the touchable without feedback um component so we'll need a container view over here all right so view the style is going to be with equals to sizes that width align items equals to center justify content equals to center as well and within this container view we will have the movie's thumbnail and we are going to use the image background to render this part so image background like that oh and this part is actually the thumbnail okay so for the image background the source is going to be item.thumbnail [Music] resize mode equals to cover style is going to be width equals to sizes that width multiplied by 0.85 and for the height same thing sizes dot width multiplies by 0.85 as well and the justify content equals to flux n all right so save it and see what we got all right cool it seems like the thumbnails are being rendered properly within the flat list perfect now in order to give the image background a bit of border radius over here we will need to use another prop called image style so border radius equals to 40. perfect all right now within this image background we will have a container view okay so give it some styling so style equals to flex direction equals to rho height equals to 60 width equals to 100 percent margin bottom oops okay margin bottom equals to sizes.radius and padding horizontal equals to sizes.radius as well now if i were to give this a background color of um let's say primary you see that it's actually being rendered over here okay and this is actually where we are going to render the clean out section and also the steel watching section over here okay so let me remove this and now within this container view we will have the play now section and also steel watching suction so for the play now section we will also need a container view like that give it some styling flex equals to one flex direction equals to row align item equals to center and now within this view we will have another view for the icon over here the play icon over here so same thing we also need to give it some styling so align items equals to center justify content equals to center as well with equals to 40 height equals to 40 border radius equals to 20 and background color equals to color shot oops colors.transparent white okay so we have it here and within this view we will simply render the um image right so source will be icons.play resize mode equals to contain style is going to be width 15 height 15 and tint color equals to color style white [Music] perfect now all we need to do is to render the plain out text component right beside the play icon right so over here we will render the text component and here will be play now and we need to give it some styling so margin left equals to sizes dot base color is going to be white [Music] and the font it's going to be h3 alright so lastly we'll be working on the steel watching section over here just that we need to do a bit of handling just in case that no one is currently watching this season all right we need to do a bit of handling over here so for this we will only render the steel watching section if the item that's still watching that length is more than zero like this okay and over here we will render a container view give it some stalling justify content equals to center and within this view we will have the text component that renders still watching give it some styling as well so color is going to be white and the font is going to be h4 so after the text component we have these profile section and we are going to create a standalone component for this part over here all right so head over to your components create a new file called profiles like that same thing i'm going to import from react i'm going to import from react native over here we need view we need text we need image and also stylesheet we need to import a couple of things from constants as well from constants so we need colors fonts and sizes so now we can then create the profile functional component so constant profiles equals to we'll be taking in one prop called profiles arrow function and we will return something over here don't forget we need to export default profiles as well now over here we need to include the style sheet so constant styles equals to stylesheet.create so the first thing we have here is the container flex direction equals to row align items equals to center and after this we have the profile image whereby the width equals to 40 height equals to 40 border radius equals to 20 and border with equals to two and lastly depart border color is going to be black okay now before we proceed further we will just simply return a text component and see if it works so view tags and over here i'll just simply render profiles all right so we need to include it in the index.js file as well so i'm going to rename this to profiles and i'm going to export it over here like that and in the home components or in the home screen we can then import the profile component like this from components and this one's going to be profiles and i'm going to render this profile in the steel watching section over here so i'm going to do this profiles and see if it works all right so it's working the text component is being rendered directly underneath the still watching text component now that i'm here i'm going to pass in the um profiles props as well so profiles equals to item dot steel watching all right so now head back to your profile.js and over here there will basically be two different return statements so if the profiles that length is less than or equals to 3 then i'll simply return the profile like this if it's not i mean if it's more than 3 we will return the profile like this together with a text component next to it like this okay so i'm gonna simply cut and paste from here all right so if it's less than or equals to three within the return statement we will have the container view give it some styling the style is going to be styles.container which we have already set up over here and within this view we'll be using the map method to render the profile so profiles dot map okay item index arrow function and over here will return a container view the key is going to be profile index and for the style if it's the first item index equals to zero then it's going to be now if it's not we will return margin left equals to 15. this is to create the overlapping effect like this okay so within this view we will have the image component source is going to be item dot profile resize mode equals to cover and style is going to be styles.profile image right now if it's more than three we need a container view as well so style is going to be styles.container same thing we're going to use the map method to render the profile so profiles.map item index arrow function and over here if index is less than or equal to true which means we will only render a maximum of three profile images over here all right so we will return a view the key is going to be same thing profile dash index and the style is going to be same thing as well if it's the first item it's going to be now if it's not then the margin left equals to negative 15. and now within this view we will have the image component the source is going to be item.profile resize mode equals to cover style equals to styles.profile image alright so after the profile image don't forget we need the text component as well so text so over here we will render plus profiles dot length minus three and the style is going to be margin left equals to sizes.base color equals to white and the font is going to be body tree save it perfect so we have the steel watching section ready as well cool all right so next we'll be working on the dots section over here so to do that go back to the home.js file and we are going to render a new function over here so we are going to render render dots function and we are going to create this function over here so function render dots and we are going to return something okay so over here we need a container view give it some styling so margin top has to be sizes.padding flex direction equals to row align items equals to center justify content equals to center as well now within this container view we are going to use the map method to render um these dots over here all right so dummy data dot new season dot map item index oops arrow function and we are going to return something over here so for now i'm just gonna return an ordinary view without animations so view i'm going to do like this the key is going to be dot index style is going to be border radius sizes that radius margin horizontal equals to three width equals six height equals to six and background color equals to i'm going to use primary color for now all right cool so we have the dots over here next thing we need to do is to animate it and to do that we need the dot position so over here constant dot position equals to animated dot divide new season scroll x sizes start with all right so once we got the dot position we will be using interpolate to animate the opacity the dot width and also the dot color all right so within this map method the first thing we have here is the opacity so constant opacity equals to dot position dot interpolate the input range will be index minus one index index plus one and the output range will be 0.3 1 and 0.3 extrapolate equals to claim next we have the dot width equals to dot position interpolate i'm gonna just copy and paste it from here and change the output range to 6 20 and 6. lastly is the dot color so constant.color color equals to dot position dot interpolate i'm going to paste it over here as well and the output range is going to be colors.light gray colors.primary and followed by colors.light gray all right next we need to change this um to an animated view like that and the opacity equals to opacity the one we have already set up over here the width is going to be dot width and the background color is going to be dot color save it oops a bit of typo over here all right let's see if the animation works oops perfect the animation is working perfectly fine cool alright so next we'll be working on the continue watching section so for this section there are basically two main parts the first part is going to be the header where we have a text component over here and followed by an image component on the right okay let's work on the header section first so come over here underneath the render dots function we are going to render a new function called render continue watching section and we are going to create this function over here so function render continue watching section and we are going to return something so first thing first we need a container view with a bit of styling the margin top equals to sizes.padding now within this container view like i said we have two main sections over here the first one is going to be the header and the second section is going to be this list over here okay so the first section is going to be the header and followed by the list so for the header section we need a container view as well give it some styling flights direction equals to row padding horizontal equals to sizes dot padding and align items equals to center and within this view you will have the text component all right so text and we are going to render continue watching give it some styling flux equals to 1 color equals to white and the font is going to be fonts.h2 all right so next we need the image component the source is going to be icons dot right arrow style is going to be width 20 height 20 and tint color colors dot primary all right so the header section is ready next we'll be working on the continue watching list section so this whole thing is basically a flat list and within this flat list for each of this item we will have you know the button itself this whole thing is actually a button we will have the thumbnail we will have the movie name which is a text component and also we will have a progress bar right underneath the text component as well and for the progress bar since we are using it in multiple different places in the detail screen as well we are going to create a standalone component for this progress bar later on all right so go back to your source code in the list section okay i'm going to create the flat list so for this it's going to be horizontal shows horizontal scroll indicator equals to false content container style it goes to margin top will be sizes that padding data is going to be dummy data dot continue watching key extractor will be item arrow function item id and lastly is the render item prop so we have item and index followed by arrow function and return something okay so like i said this whole thing is actually a button so we are going to use the touchable without feedback component like that and whenever i click on this button i am going to navigate to the movie detail screen and at the same time i'll pass over the item as parameter as well so selected movie item like that and since we can't really style the touchable without feedback component we need a container view over here like that so i'll give it some styling style equals to margin left and if it's the first item index equals to zero margin left will be sizes.padding and if it's not it's going to be 20. for margin right if it's the last item where index equals to dummy data dot continue watching dot length minus one then it's going to be sizes that padding if it's not it's going to be zero all right so within this container view we will have the thumbnail the name and also the progress bar so over here we have thumbnail we have name and also progress bar so for the thumbnail it's actually a normal image and the source is going to be item.thumbnail resize mode equals to cover style is going to be width sizes sizes that width divided by 3 height equals to sizes that width divided by 3 plus 60 and the border radius equals to 20 save it alright so we have the thumbnail being rendered properly underneath which is good oh and on a side note if you haven't watched prison break already be sure to watch it especially the season one you won't regret it trust me all right come back to our source code so after the thumbnail we have name so over here it's a text component like that and we will render item dot name and the style is going to be margin top sizes dot base color is going to be white and the phone will be h4 alright next for the progress bar which is this part over here we are going to create a standalone component for this so head over to your components folder create a new file called progress bar same thing i'm going to import from react i'm going to import from react native and for this i only need the view all right and don't forget we need to import from the constants as well so input from constants we need the colors and sizes so next we can then create the functional component so constant progress bar for this we'll be taking in three props which are container style bar style and bar percentage arrow function and return something so after this we need to export default progress bar like that for now i'm going to simply return a view and a text component and see if it works so over here i'm going to render progress bar make sure to change the color to white or else you can't see it like that and next we need to include it in the index.js file so here progress var and we need to export it over here i need to save this as well and go back to your home.js file import the progress bar so over here or import progress bar and i will head over to the continue watching section which is this part right underneath the name i am going to render the progress bar like that save it oh let me include the text component for now like that all right cool so it's working so back to the progress bar component we need a container view like this give it some styling and the style is going to be container style prop like that and within this container view we need two more views to render the bar all right so for the first view the style is going to be position absolute bottom zero left zero with equals to one hundred percent margin top equals to sizes dot base background color equals to colors.gray and we will include the bar style as well like that and for the second view the style is going to be same thing position absolute bottom zero left zero just that the width is the bar percentage um comp oh sorry props bar percentage for the margin top will be sizes dot base background color is colors.primary and of course we will include the bar style as well like that save it all right now go back to your home.js file over here we need to include some of the props so we need to include container style where the margin top equals to sizes dot radius bar style equals to height will be 3 oops this one should be here like that and lastly the bar percentage [Music] equals to item.overall progress save it there you go so we have completed the continue watching section as well great alright now for the second screen which is movie detailed screen this screen over here what we are going to do is that we will basically wrap this whole thing within a scroll view all right this whole thing within a scroll view and then we will divide the screen into three different sections which are the header section this whole thing over here the category and rating section over here and also the movie detail section over here all right now go back to your source code navigate to the movie details screen all right now the first thing we are going to do is to import a couple of um components from react native so we need image background we need touchable opacity we need image we need style of sheet we need scroll view and also we need platform this is so that we can do some you know additional handling for android devices as well all right after that we need to import from components so import from components and over here we need the progress bar component for the movie detail section over here and lastly we need to import from constants as well so here we have colors we have sizes we have fonts and also we have icons let me include the navigation route over here as well some navigation route like that and then we'll need to create the react state hook to you know keep track of the selected movie so constant selected movie set selected movie equals to react.ustate now and over here we need to use the use effect hook so react.use effect arrow function like that and over here we need to extract the selected movie from route dot params once we got the selected movie over here we need to set selected movie equals to selected movie just like that all right next we'll be using a scroll view to wrap this whole screen over here all right so i'm going to remove this and change it to scroll view give it some installing so the content container style equals to flex 1 background color equals to black now if you were to scroll the scroll view like that you see there's a white background behind the scroll view so to get rid of that we will use the style prop and set the background color to black as well see it's gone all right okay so the first section that we'll be working on is the header section which is this whole part over here all right so to do that we will render a new function over here so render header section and i'm going to create this function right on top so function rather headed render header section sorry and over here i'm going to return the image background this one over here all right so image background the source is going to be selected movie okay details that image resize mode equals to cover and the style equals to with 100 and for the height if the sizes that height is less than 700 then the height is going to be sizes that height multiplied by 0.6 and if it's not then it's going to be sizes start height multiply by 0.7 save it and see what we got all right now within this image background we will create a container view excuse me and the style is going to be flex equals to one now within this container view the first thing we need to render is actually the header bar over here so we will need to render a new function called render header bar and i will create this function directly on top so function render header bar and we will return something so for the header bar we basically have two different components which are the back um back button by image button actually and also the upload image button on the right let's see how we can do that alright so within this return statement we will have a container view like that give it some stalling so flex direction equals to row justify content equals to space between align items equals to center margin top equals to now if the platform is equals to ios then the margin top will be 40. if it's not then it will be 20. and the padding horizontal equals to sizes.padding right now within this header bar we will have the back button over here and also the share button right so we have the back button and also the share button so for the back button we need the touch opacity touchable opacity the style is going to be align item center justify content center with 50 height 50 border radius equals to 20 background color equals to colors dot transparent black and whenever i click on the back button i will need to navigate back so navigation dot go back just like that now within this touchable opacity we will simply render the image component the source will be icons.left arrow and the style is going to be with 20 height 20 and tint color equals to color start white save it alright cool so the back button is in place so i click on it it will never get back to the hom screen right and now for the share button i'm going to copy this whole thing and paste it over here or a better practice to do this is actually to create a standalone component for this icon button i'll leave that to you but for this tutorial for this project i'll keep it this way all right so now whenever i click on this share button i will console.log share and the source will be i can't start upload it should be share actually but it's okay and the style is going to be 25 for the width and same thing goes for the height save it and there you go the header bar is ready so we have the share button and also the back button cool all right so after the header bar next we will be working on this section over here now if you pay attention to the image itself there is a slight gradient at the bottom of the image right it goes from dark to transparent so in order to achieve this result we will need a library called react native linear gradient so scroll down and copy this you can use yarn if you if you want to so copy this and paste it in your terminal and press enter now as usual every time after we install a plugin we will need to restart our app so i'm going to close our app and over here we will run the read native link after that we'll cd into ios and run pod install now we can then navigate back to the root folder and run react native run ios all right now in the movie details screen the first thing we need to do is to import sorry linear gradient okay so import excuse me linear gradient from react native linear gradient just like that now we can go back to the header section over here and right underneath the render header bar function we will render a container view like this give it some styling flex equals to 1 justify content equals to flex and now let me navigate to the movie detail screen first all right now within this container view we will have the linear gradient component so linear gradient like that start is going to be x equals to zero and y equals to zero and n is going to be x equals to zero and y equals to 1. and for the colors we have the transparent and also black color like that and for the style we have width equals to 100 height equals to 150 align items equals to center and justify content equals to flex n all right now let me hide the terminal save it there you go as you can see the linear gradient is being rendered properly over here now within this linear gradient component we need to render two more text components all right so the first one is for this part the season 4 season title and the next component the next text component will be used to render the movie name all right so here we have the season oops we have the season and also the name all right so for this we will have a text component and we will render selected movie details dot season and the style is going to be color equals to white and the font will be body four save it alright so we have the season over here next will be the name same thing text component and we will render selected movie name and the style is going to be margin top equals to sizes.base colors will be white and the fonts will be h1 perfect alright so after the header section next we'll be working on the category and rating section over here so go back to the source code over here let me just put some comments this one is for header next we'll be working on category and ratings and lastly will be the movie details all right so for the category and ratings we will render a new function called render category and rate things and we will create this function over here so function render category and rate things return something all right so now the first thing we need is a container view like that give it some stalling flex direction equals to row margin top equals to sizes dot base align items equals to center justify content equals to center as well all right now that we have the container view in place next we will have three different set of views for these three different components the first one we have here is the h group all right after default by genre and lastly is the raythings now because the style is more or less the same i'm gonna put it in the style sheet over here so constant styles equals to stylesheet dot create category container the flex direction equals to row align item center justify content center as well margin left equals to sizes dot base padding horizontal equals to sizes dot base as well padding vertical equals to 3 border radius it goes to sizes dot base background color it goes to colors.gray one all right now back to the category and rating section over here like i said we have um three different components over here so we have h we have the genre and lastly is the ratings all right so for the age we will have a container view give it some styling i will use array instead because i would like to overwrite the margin left to zero like that so the style will be styles.category container just that i would like to overwrite the margin lab to zero now within this view we will have a text component that renders selected movie dot details dot h and for the style will be let me just arrange it properly all right now for the style the color is going to be white and the fonts will be h4 all right now save it there you go the edge is showing over here now for the genre same thing it's going to be a container view as well for the style we will need to override um the category container as well so here i'm going to put styles.categorycontainer just that we need to override the padding horizontal through sizes.padding and now within the view we have the text component as well and we will render selected movie dot details dot genre and for the style it's going to be color will be white and the font will be h4 there you go and lastly will be the ratings so same thing i need the container view as well give it some styling so the style is styles dot category container like that and for the ratings we have the star icon followed by the rating itself so over here we will render an image component where the source will be icons dot star resize mode equals to contain style is um the width will be 15 and height is the same as well 15 let me save it all right so we have the star icon over here so after the image component we will render the text component so over here we will render selected movie dot details dot rate things give it some styling margin left equals to sizes dot base color equals to white and font equals to h4 perfect all right next we'll move on to the last section of this project which is the movie details section over here so same thing we will render a new function over here so i'm going to call this function render movie details right and we will create this function over here so function render movie details and we will return something okay so what i'm going to do is that i'm going to create a container view to fill up this whole area first so um the container view give it some stalling where the flux equals to 1 padding horizontal equals to sizes.padding margin top equals to sizes.padding as well and justify content equals to base around this is so that the components within this view within this container view will fill up this area over here all right now within this container view we will basically render um two sections the first one is the title running time and also progress bar so the first section is title running time and progress bar and the second section is actually this button over here so i'm going to call this watch all right so for this i'm going to create a view like that and within this view i'm going to create another view for these two components these two text components all right so this one is actually for title and running time so within this view give it some styling the flex direction should be row so here we have um a text component that will render selected movie dot details dot current episode give it some styling so flex equals to one color equals to white and font equals to h4 save it all right so we have the episode title over here next we will render the running time so same thing text component over here we will render selected movie dot details dot running time and the style equals to color colors dot light gray and font equals to body four oops now save it oh a bit of typo over here all right so we have successfully rendered the title and also the running time all right so we have successfully rendered the title and also the running time next we need to show the progress bar underneath all right so over here we are going to show the progress bar so i'm going to use the component that we have created earlier so progress bar i'm going to supply some props the container style equals to margin top will be sizes dot radius bar style equals to height will be five border radius will be 3 and bar percentage it goes to the selected movie dot details dot save it now the reason why the red bar is not showing is because the bar percentage for this um series is zero so let me go back and change the other series let's say i'm prison break my favorite of course there you go the red bar is actually working there you go the progress bar is actually working fine all right now the last thing we need to do is to render this button over here so for the watch section we need a touchable opacity like that the style equals to height will be 60 align item center justify content equals to center as well margin bottom now if the platform is equals to ios then the margin bottom will be equals to sizes.padding times two if it's not then it will be zero the body radius equals to 15 and background color equals to colors.primary now within detachable opacity we will need to render a text component now if the selected movie dot details dot progress equals to zero percent we will render watch now like that if it's not we will render continue watch don't forget to give it some styling the color should be white and the font equals to h2 save it all right so the button is showing over here let me check the other series as well house of cards all right it's working for the barbarian it should be watch now perfect all right guys we've just coded this cool looking movie streaming app based on the design created by resum on juba.com now if you like to support our work or if you're in a hurry the full source code for this project is available for just a few dollars on shop.buyprogrammers.com and i have included the link in the description below if not that's totally fine as you can achieve the same result by getting the starter template for this project and follow along the video so if you like the video we'll be more than happy if you can give it a thumbs up comment share to your friends and also don't forget to subscribe to our channel for more videos like this i will see you guys in the next video happy coding peace

Channel: ByProgrammers

Views: 14,232

Keywords:

Id: FbGrkTzx3r8

Length: 69min 18sec (4158 seconds)

Published: Mon Mar 29 2021