LCRN EP15 - Food Recipe App - React Native UI | Scrollable Header Animation

hey what's up everyone i hope you all are doing well this is jack from bikeprogrammers.com and welcome back to a brand new episode of let's code reac native in this episode we are going to build a beautiful food recipe app based on the design created by herded year on dribble.com i hope i pronounced your name correctly if not please please please forgive me alright 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] [Music] all right so for this project let me open this up okay so we are going to build three different screens which are the lock-in screen the home screen over here and lastly followed by the recipe screen and for the recipe screen over here we are going to implement the scrollable header animation what it means is that whenever we scroll up and down in the screen the header section over here should be able to animate accordingly don't worry about that for now as we will work in that later on okay so just like the previous episode instead of creating a 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 head over to the starter repo i have included the link in the description below go ahead and download this source code and you should be able to get this and once you got the source code open up the terminal and run mpm install next we need to run react native link and lastly we need to cd into ios and run part install all right now we can then go back to the root folder and run mpx react native run ios okay so as you can see here we have a very basic star template we have a plane lock-in screen that allows us to navigate to the home screen and in the home screen we have the bottom tab navigator over here and also a button that allows us to navigate to the recipe screen like that okay now regarding the star template it's pretty much the same as the one we have for the previous episodes which includes the assets folder the constants folder the navigation folder and lastly is the screens folder now i'm not going to go through the star template in details anymore because we have been doing that for the past 14 episodes but don't worry if there's anything that you don't understand please feel free to leave a comment below and we will try our best to assist you alright okay so that's enough for the introduction the first thing we are going to do here is the login screen okay so go back to the source code in the screens folder open up the login.js file now let me hide the terminal and i would like to get rid of all this we don't need them this one as well and now i'm going to import a few more things from the react native so we need image background and also we need the status bar after that we need to import a couple of things from constants like that so here we need images we need colors we need sizes and also we need fonts so for the login screen we can mainly divide it into two different parts which are the header part or the header section over here and also the details section over here so within the container view we can split it into two different sections which are the header section and also the detail section like that and for the container view i would like to give it some styling flex should be equals to one and the background color should be equals to colors.black save it let me refresh the app and over here i would like to customize the status bar so that it's in white color all right so status bar bar style equals to light content like that save it okay cool now for the header section if you pay attention to this part over here there is actually a slight gradient color and in order to achieve something like this we are going to need a library called react native linear gradient so scroll down and i'm going to just copy this you can use yarn if you want to i'm going to use npm install go back to the source code open up the terminal and paste it over here as usual i would like to run read native link and also we need to cd and do ios and run pod install all right now i would like to close the app like that and cd back to the root folder and run mpx react native run ios alright so now we can then import the react native linear gradient and we would like to import linear gradient like that and for the header section which is this section over here we are going to create a new function and render it over here okay so we will render a new function called render header and we will create this function over here so function render header and we will return a container view with a bit of styling for the height if the sizes dot height is more than 700 then it will be 65 percent if it's not then it will be sixty percent all right and after this we will render the image background like that where the source equals to images dot login background and the style equals to flex will be one justify content will be flex n and the resize mode is going to be covered save it all right so we have the background image in place next we are going to render the gradient color over here okay so to do that within the image background component we will render the linear gradient component like that we need to supply some of the props so start will be x will be zero and y will be zero for the n prop x will be zero and y will be one and for the colors it's going to be an array of colors.transparent and also colors.black and for the style the height will be 200 justify content is going to be flex n and padding horizontal is going to be sizes.padding save it all right as you can see here we have successfully rendered the gradient color and all we need to do now is to render the text component over here okay so within the linear gradient component we will render the text component like this and here it's going to be cooking a delicious food easily give it some stalling with equals to 80 percent color equals to white and the fonts equals to large title save it okay let me try to overwrite the line height like this to 45 save it okay much better and just like that we have completed the header section next we'll move on to the detail section over here so go back to the source code and over here we are going to render a new function called render detail like that and we are going to create this function over here so function render detail return something like that so for the render detail function the first thing we need is a container view like that give it some styling flex equals to one and padding horizontal equals to sizes.padding and within the details section we are going to render the description and followed by the buttons alright so over here we are going to render description and followed by buttons okay so for the description we are going to render the text component and the description will be discover more than 1200 food recipes in your hands and cooking it easily give it some styling the margin top should be equals to sizes that radius with equals to 70 color equals to colors.gray and the fonts should be bodytree save it alright so that's all for the description next we'll move on to the buttons and for these two buttons i am going to create a standalone component right so go back to the source code in the root folder we are going to create a new folder called components and within this folder we are going to create a new file called custom button.js and over here same thing we need to import from react we need to import from react native and here we need touchable opacity and also text after that we need to import from react native linear gradient so that we can achieve this effect over here okay so here same thing we need linear gradient and lastly we need to import from constants we need the colors and fonts all right now we can then create the custom button functional component so constant custom button and for this component we need a few props which are the button tags button container style oops the bracket should be on the um outlay like this after that we need colors and also arm press arrow function and don't forget we need to export default custom button there are basically two different types of buttons over here the one with a gradient background color and also the one without any background color at all okay so over here if the colors dot length is more than zero which means if we supply the background color then we are going to render this part over here and if it's not then we will render something else right so for now i'm just going to render a touchable opacity like that the arm press equals to on press and within the touchable opacity we are going to render a text component and here it's going to be button text give it some styling so text line equals to center color equals to white and the fonts equals to h2 and i'm going to return the same thing over here as well just to see if it works and for the color i'm going to change this to light green all right save it and within the components folder we need to create a new file called index.js file and over here we need to import from the custom button we need to import the custom button like this and we need to export it over here so that we can use it all right save it and now head back to the login.js file over here we need to import from components and we need to import custom button like this all right now in the buttons section over here we are going to first render a container view like this give it some styling flux equals to 1 and justify content equals to center and now within this um container view we are going to render two buttons which are the login button and also the sign up button so over here we have the login button and followed by the sign up button like that so here we will render the custom button component the button text should be equals to login and the colors should be an array of colors.green and followed by colors.line and whenever i click on this button it should navigate to the home screen and you know what for a better user experience we should be using replace and state it basically does the same thing which is basically to navigate to the home screen the difference is that replace doesn't allow you to navigate back to the lock-in screen after you have navigated to the home screen okay all right i'm gonna copy this and render it over here as well the button text is going to be sign up for the colors it's going to be an empty array like this and whenever i click on the sign up button it will navigate to the home screen as well all right save it let me change to a more obvious color alright cool so we have successfully rendered the custom button component in the details section over here all we need to do now is to make some changes on the buttons so that it looks something like this all right so if the colors.lang is more than zero which means this button over here should have a gradient background color and to do that we will wrap this inside linear gradient like that all right we need to supply some of the prop so start equals to x will be zero and y will be zero as well and it goes to x will be one and y will be zero for the colors it's going to be colors and we will include the style like this so button container style all right save it all right cool so we have the background color in place all we need to do now is to supply the button container style prop over here alright so button container style and the padding vertical is going to be 18 and border radius should be 20. save it sweet now that i'm here i'm gonna supply the button container style prop for the sign up button as well so button container style margin top should be equals to sizes dot radius padding vertical should be equals to 18 border radius should be 20 border color should be equals to colors.dark line and border width should be equals to 1. save it nothing changes because we need to include the style over here all right so style we will include the button container style save it perfect so all we need to do now is to change the color to white and i think i need to reduce the font size a little bit maybe h3 i would say same goes for this as well all right a lot better now so that's all for the lock-in screen next we'll move on to the home screen so for the home screen the first thing that we'll be focusing on is the bottom type navigator over here so go back to the source code in the navigation folder open up the tabs.js file and over here we need to import a couple of things from constant so import constants here we need colors and icons all right next we are going to customize the appearance of the bottom type navigator and to do that we can make use of the tab bar options prop like that we do not want the label so show label equals to false and we will give it a bit of styling as well like that position should be absolute bottom equals to zero left equals to zero right equals to zero elevation equals to zero as well background color equals to white border top color equals to transparent and lastly height should be equals to 100 save it all right as you can see here the tab label is no longer visible and also we have customized the appearance a little bit right okay next we'll be working on each of these tab icons over here okay in order to be able to customize each of the tabs we are going to make use of the options props like this and within the options prop we need to supply the tab bar icon property like this we need the focus props over here so that we know which tab is currently being focused all right and then followed by the arrow function and over here we are going to return a standalone component called tab icon don't worry we will work on this later so for the tab icon component it will take in two props which are the focus prop like that and also the icon prop for the home tab it will be icons.home now all i need to do is to copy and paste it for the other tabs as well for the search tab the icon will be icons.search for the bookmark tab the icons will be icons.bookmark and lastly for the settings tab the icon will be icon start settings next we are going to create the tab icon component in the components folder so create a new file name it tab icon.js same thing we need to import from react we need to import a couple of things from react native here we need view and also we need image and lastly we need to import from constants as well here we need colors after that we can create the functional component so constant tab icon it will take in two props which are focus and also icon arrow function and here we are going to return a container view give it some styling align items equals to center justify content equals to center as well height equals to 80 and width equals to 50. within the container view we are going to render the icon so we need image component like this so source will be icon resize mode equals to contain style equals to width will be 30 height will be 30 as well then color if it is currently being focused then the tint color will be colors.green if it's not then it will be colors dot light line all right now we have the icon in place but don't forget we need to render the line underneath as well alright so to do that over here if it is currently being focused then we will return a view give it some stalling position will be absolute life will be zero right will be zero bottom will be zero height will be five border top left radius equals to five border top right radius equals to five as well and lastly the background color will be colors dot dark green all right now don't forget we need to export default tab icon over here save it next head over to the index.js file and over here we need to import from tab icon as well like this and we will export it over here save it and lastly in the tabs.js file we can import the component over here all right i'm gonna import from components and i'm going to import the tab icon component over here see perfect the type icons are now in place great all right next we'll be working on the home screen okay so head back to the source code in the screens folder open up the hum.js file and over here we need to import a couple of things from vxnative so we need view we need text we need image we need safe area view we need touchable opacity we need text input and lastly we need flat list after that we need to import a couple of things from constants all right we need fonts we need colors we need sizes we need icons we need images and lastly we need dummy data alright so for this home screen what i'm going to do is that i'm going to wrap this whole thing wrap this whole thing within a safe area view and then after that we are going to use flat list and build the whole screen by using the bottom up approach what that means is that we are going to use the flat list render item prop to render the categories section over here and then after that we are going to use the list header component prop to work on all the other sections over here all right so go back to the source code and i'm going to replace this whole thing with save a review give it some styling flex equals to 1 and background color equals to white all right now within the safe area view we are going to render a flat list like that the data is going to be dummy data dot categories the key extractor is going to be item arrow function item.id keyboard this means mode equals to on drag shows vertical scroll indicator equals to false we will work on the list header component later but i'm gonna just you know return a normal view for now like that after that we have the render item prop so render item over here we have the item then followed by arrow function and over here just to test if it works i'm gonna just return a view with a text component that renders item dot name all right and lastly we need the list footer component this footer component this is so that the bottom part of the flat list will not be blocked by the button type navigator later on okay so this is going to be a normal view with a bit of styling where the margin bottom equals to 100 that's all save it all right so we have successfully rendered the categories over here in the flat list next we are going to work on each of these items so that it looks something like this so to do that i'm going to create a new component over here called category card same thing we are going to import from react we are going to import from react native we need view touchable opacity text and image next we need to import a couple of things from constants we need colors fonts and also sizes all right after that we can then set up the functional component so constant category card equals to and for this component we are going to take in three props which are container style category item and unpress all right followed by arrow function and here we are going to return something don't forget we need to export default category card just to make sure it works i'm gonna just simply return a touchable opacity with a text component that renders category item dot name save it don't forget we need to include it in the index.js file so i'm gonna just copy this and change it to category card and we need to export it over here save it all right now head back to the home.js file and over here we are going to import from the components and we need the category card like this once we got that we can then render the category card over here all right so i'm gonna render category card and for the category item prop i'm gonna pass the item over save it great it's working now all we need to do is to make sure our category card looks something like this where we have the image and followed by two text components over here okay all right now for detachable opacity we are going to give it a bit of styling flex direction should be equals to row a line item should be equals to center padding equals to 10 margin top equals to 10 as well border radius equals to sizes.radius background color equals to colors.grade2 and lastly we will include the container style like this all right the arm press equals to on press and within the touchpoint opacity we have the image and followed by the details right so here we have the image and followed by the details okay so for the image we are going to render an image component like that where the source equals to category item dot image resize mode equals to cover and the style will be width is going to be 100 height is going to be 100 as well and border radius equals to sizes dot radius save it all right so we have the images in place next we'll be working on the details section over here so for this we need a container view like this give it a bit of styling width is going to be 65 padding horizontal it goes to 20 and within the um container view we are going to render the name and follow up by the servings right so here we have the name and followed by servings so for this we are going to render a text component like that and we are going to render category item dot name give it a bit of styling flex equals to one and the font is going to be h2 save it all right we are almost there for the savings section we are going to need a text component as well and for this we are going to render category item dot duration followed by a separator like that and category item dot serving and followed by the word serving give it a bit of styling color equals to colors.gray and the font it goes to body four save it all right the category card is in place all we need to do now is to supply a bit of the container style and also the unpressed function okay so go back to the home.js file and for the container style we are going to give it a bit of margin horizontal and it's going to be padding and whenever we click on the category card so on press we are going to navigate to the recipe screen and at the same time we will pass the recipe over like this alright save it perfect now if i were to click on this we should be able to navigate to the recipe screen great all right next we can then work on the other sections over here so we have the header section we have the search bar section we have the c recipe card section we have the trending recipe section and lastly we have the category header section over here okay so go back to the source code within the leaseheader component we have the header section like that we have the search bar section we have c recipe card section we have trending section and lastly we have the category header section all right so for the header section we are going to render a new function called render header and we are going to create this function over here so function render header and we will return something so for the header section we have the text component on one side and the profile image on the other side okay so over here i'm going to return a container view give it a bit of styling flex direction equals to row margin horizontal equals to sizes dot padding align item equals to center and height will be 80. now within this container view we have the text section on one side and the image profile image section on the other side right so for the text section we are going to need a container view give it a bit of styling flex equals to one and within this container view we are going to have two text components the first one is the greetings and the second one is the question right so we have two text components the first one is going to be hello by programmers and the question is what you want to cook today all right now we need to give it a bit of styling color equals to colors.green and fonts equals to h2 this one as well style margin top equals to tree color equals to colors.gray and fonts equals to body tree save it all right so we have the text section in place next we'll be working on the profile image section over here okay so for this i'm going to wrap it within a touchable opacity and whenever i click on it i am going to console log profile like that okay now within this touch for opacity we are going to render an image component where their source is going to be images.profile and the style will be width 40 height 40 as well border radius equals to 20 save it perfect all right next we'll be working on the search bar over here okay so to do that we are going to render a new function over here so we are going to render render search bar and we will create this function over here so function render search bar and we will return a container view give it a bit of stalling flex direction equals to row height equals to 50 align item equals to center margin horizontal equals to sizes.padding padding horizontal equals to sizes.radius border radius equals to 10 background color equals to calories dot light grade save it alright so we have the container in place next we need to render the search icon and followed by the text input over here okay so here we need to render an image component the source is going to be i can't start search and the style is going to be width 20 height 20 and tint color equals to colors.grade after this we need to render the text input component so for this the style is going to be margin left will be sizes that radius and the font is going to be body tree all right placeholder text color it goes to colors.gray placeholder will be search recipes all right save it perfect okay next we are going to work on the see recipes section over here okay same thing we are going to render a new function called render c recipe card and we are going to create this function over here so function c recipe card and we are going to return a container view give it a bit of styling flags direction equals to row margin top equals to sizes.padding margin horizontally equals to sizes.padding as well border radius equals to 10 and background color equals to colors dot light green save it all right now within this container view we are going to render image and followed by the text components over here okay so we have image and followed by the text components so for this we are going to render a container view as well give it a bit of styling width will be 100 align items equals to center justify content equals to center as well now within this container view we are going to render image component whether source is going to be images that recipe and the style is with at d and height 80 as well like that save it okay so the image is in place next we'll work on the text components over here okay so for this we need a container view as well give it some stalling flux equals to one and padding vertical equals to sizes dot radius all right first thing we need here is a text component i'm gonna hard code it too you have 12 recipes that you haven't tried yet like that give it a bit of stalling width will be 70 and the font is going to be body four all right save it all right so all we need to do now for this section is to render the c recipes button over here okay so after this text component we are going to render a touchable opacity give it some styling where margin top equals to 10 and whenever i click on this button i would like to console log c recipes like that all right now within this touchpad opacity we are going to render the text component that says c recipes give it a bit of styling color is going to be colors.green and the text decoration line is going to be underline and the fonts will be h4 right save it perfect all right next we are going to move on to the last major section of the home screen which is the trending recipe section over here same thing we are going to render a new function which is called render trending section and we will create this function over here so function render trending section and we will return a container view give it a bit of stalling margin top equals to sizes dot padding the first thing we need here is the section title okay so we need a text component that renders trending recipe we need some styling as well margin horizontal equals to sizes.padding and the font will be h2 save it all right so after the section title we are going to render a flat list all right like that where the data is going to be dummy data dot trending recipes it's going to be horizontal and the show's horizontal scroll indicator should be false key extractor will be item item dot id like that and lastly we need the render item prop so for this we need item index arrow function and for now i'm just going to return a normal view like that and here it's going to be a text component that renders item dot name all right save it all right cool so we have the flat list in place all we need to do now is to make sure each of this item looks something like this okay so in order to achieve that i'm gonna create a new component over here called trendingcard.js same thing we need to import from react we need to import from react native and we need view we need touchable opacity we need image we need text we need platform and also we need style sheet like that after this we need to import from constants as well we need sizes colors fonts and icons all right and now we can create the functional component so constant trending card and for this component we are going to tack in three props which are container style recipe item and um press arrow function and here we are going to return something don't forget we need to export default trending card like that and for now i'm gonna just return a touchable opacity with a text component that renders recipe item dot name just to see if it works all right save it make sure we need to include in the index.js file as well so i'm going to just copy and paste it like this and change it to trending card and we need to export it over here save it now go back to the home.js file at the top we need to import the trending card over here and we can then use it over here in the render trending section over here alright so i'm gonna render trending card and for the recipe item prop i'm gonna pass in item all right save it cool it works alright next we are going to work on the trending cart component so for the touchable opacity give it some stalling height will be 350 width will be 250 margin top is going to be sizes that radius margin right is going to be 20 border radius is going to be sizes dot radius and we will include the container style like this okay the unpressed will be on press now within the touchable opacity the first thing we need here is the background image okay so over here we are going to render a background image which means we need an image component like that where the source is going to be recipe item.image resize mode is going to be cover and style is going to be width 250 height 350 and border radius equals to sizes.radius all right save it all right so we have the background images in place okay next we need to render the category over here so go back to the source code right underneath the background image we need to render the category so for this we need a view give it a bit of styling or the position equals to absolute top will be 20. life will be 15. padding horizontal is going to be sizes dot radius padding vertical is going to be five background color is going to be colors.transparent gray and border radius is going to be sizes radius all right now within this container view we are going to render the text component and here is going to be recipe item dot category give it a bit of styling color equals to white and fonts equals to h4 all right save it perfect we have the category in place as well all right now for the last part of the trending recipe section we are going to work on the recipe card info over here now this is a little bit tricky if you pay close attention to the background it is actually a blur view so in order to achieve this effect we are going to use an awesome library called react native blur so scroll down and copy this you can use yarn if you want to but i'm using npm install go back to your source code open up the terminal paste it and hit enter like that all right same thing we need to run mpx create native link and we need to cd into ios and run pod install all right so now i'm going to close the app and we will cd back to the root folder and run mpx reac native run ios alright so navigate to the home screen so in order to work on the recipe card info section over here i am going to render a standalone component for this so here we have the card info section and i'm going to render recipe card info and i will pass the recipe item over like this okay and now we are going to create the recipe card info component over here so constant recipe card info and this component is going to type in recipe item arrow function and we will return something now over here we are going to import from react native community slash blur so we need the blur view like this all right now for the recipe card in full component we are going to return a blur view like this the blur type is going to be dark and the style i'm going to use stylesheet for this so styles that recipe card container and i'm going to create this style over here alright so constant styles it goes to stylesheet.create recipe card container position is going to be absolute bottom will be 10 left will be 10 right will be 10 height will be 100 padding vertical is going to be sizes.radius padding horizontal is going to be sizes.base border radius is going to be sizes.radius alright save it okay as you can see here the blur view is in place great now go back to the recipe card info component now if you're running on android you will most probably hit some issue with the blur view the reason being is because we are rendering multiple blur view within this particular flat list right it works totally fine on ios but it doesn't really work so well in android so for that reason we need to do a bit of handling over here so if the platform dot os is ios then i'm going to return the blurred view version like that if it's not then i will return a normal view version like this okay so for this view give it some styling we are going to include these styles like this so styles.recipe card container and we will include the background color which is going to be colors.transparent.great dot great like that okay all right and now within the view container we are going to render another standalone component called recipe card details all right and we will pass the recipe item over as well like that same thing i'm going to just copy and paste over here as well for the android version and now we will create the recipe card details functional component over here so constant recipe card details equals to we will take in one prop which is the recipe item arrow function and here we will return a container view like this all right give it a bit of styling flex equals to one now within this container view first thing we need to render here is the name or the title and followed by the bookmark icon then after that we will render the duration and serving section okay so over here we have the name and bookmark section followed by the duration and serving section okay so for this we need a container view give it a bit of stalling flux equals to 1 flux direction equals to row justify content equals to space between all right so within this container view we are going to render a text component and here it's going to be recipe item dot name give it a bit of styling with is going to be 70 color is going to be white font is going to be h3 and i would like to overwrite the font size to 18. all right save it okay so we have the name in place next we need to render the bookmark icon so over here we need to render an image component where the source if the recipe item dot is bookmark is true then we are going to render the icons.bookmark field icon if it's not then it's going to be icons.bookmark like that all right give it some stalling width equals to 20 height will be 20 as well margin right is going to be sizes dot base and tint color is going to be colors dot dark green all right save it okay so as you can see here the bookmark icon is in place as well next we'll move on to the duration and serving section okay so over here we need to render a text component all right and here it's going to be recipe item dot duration followed by a separator and recipe item dot serving and followed by the word serving okay give it some styling color is going to be colors.like gray and the font is going to be fonts.44 all right save it perfect okay all we need to do now is to supply the container style prop and also the on press pro okay so go back to the home.js file and over here we need the container style margin left if the index equals to zero which means it's the first item over here then the margin left is going to be sizes.padding if it's not then it's going to be zero and whenever i click on the trending card component all right so on press we are going to navigate to the recipe screen as well and of course at the same time we will pass the recipe over like that okay save it okay so we have the trending recipe section in place now if i were to click on any of this item we should be able to navigate to the recipe screen like this great okay so the last section that we are going to work on is the category header section over here okay same thing we are going to render a new function called render category header and we will create this function over here so function render category header and we will return a container view give it a bit of styling flex direction equals to row align item equals to center margin top equals to 20 and margin horizontal equals to sizes.padding and now within this container view we have the section title and followed by the viewo button okay so here we have the section title and followed by the view all button okay so for the section title we need the text component and we are going to render categories give it some styling flex equals to 1 and define equals to h2 and next for the view old section we are going to need a touchable opacity and within the touch opacity we need the text component that renders view all all right give it some styling color is going to be colors.gray and the font is going to be body 4. all right save it let's see perfect so we have the category header section in place as well great all right so that's all for the home screen next we'll move on to the recipe screen so for the recipe screen which is the last screen of this project we are going to make use of the flat list bottom up approach as well which means we are going to use the flat list render item prop to render this part over here okay and then we will make use of the list header component prop to render all the other sections over here all right and also later on we'll have to look at how we can implement the scrollable header animation over here alright so go back to the source code in the screens folder open up the recipe.js file and here we need to import a couple more components from react native so we need view text image touchable opacity animate it and platform we need the use wrap hook as well like that we need the blur view so import react native community blur and here we need to import the blur view after that we need to import from constants we need sizes fonts colors and icons and lastly we will declare a constant variable over here called header height which is going to be 350 and the header height variable is actually referring to the height of the header okay all right next for the recipe functional component we need to have two props which are navigation and also route okay so the first thing we are going to do here is that we need to make sure we can retrieve the selected recipe pass over from the home screen to the recipe screen right so to do that we need to first create the state so constant selected recipe set selected recipe react use state and the initial value is going to be now and over here we are going to make use of the use effect hook like that so we need to retrieve the recipe pass over from the home screen like this it goes to route dot params and once we got the recipe we are going to set selected recipe recipe all right save it now that we have the recipe in place next we can start to work on the recipe screen so i'm going to remove these two properties and change it to background color it goes to colors.white and then we are going to wrap the whole screen by using animated.list the reason why we are using animated.flatlist is so that we can animate the header letter on okay so for the flat list the data is going to be selected recipe dot ingredients the key extractor is going to be item arrow function item.id shows vertical scroll indicator should be equals to false and for the list header component i'm going to just return a normal view for now the scroll event throttle should be equals to 16 and we need the unscroll prop to be able to perform the animation so on scroll animated dot event native event content offset y and we will assign it to the scroll y like that all right and over here we need to make sure the use native driver should be equals to true okay and we will create this scroll y animated value over here so constant scroll y equals to use ref new animated dot value initial value is going to be zero dot current okay all right next we can then work on the render item prop so render item here we have item arrow function and just to see if it works i'm going to return a normal view and within this view we have a text component that renders item dot description all right save it perfect so we have the flat list in place all we need to do now is to make sure each of this item looks something like this okay so what we have here is basically the icon section followed by the description section and lastly is the quantity section okay so now i'm going to give the container view a bit of styling flax direction equals to row padding horizontal equals to 30 and margin vertical equals to five and within the container view we have the icon section we have the description section and lastly we have the quantity section all right so for the icon section we need a container view give it a bit of styling align item equals to center justify content equals to center as well height equals to 50 width equals to 50 border radius equals to 5 and background color equals to colors.light grade all right now within this container view we are going to render the image component where the source is going to be item dot icon and the style will be height 40 and with 40 as well all right save it okay so we have the icons in place next we'll move on to the description section over here okay so for the description we need a container view as well give it some styling flex equals to one padding horizontal equals to 20 justify content equals to center and over here we need a text component that renders item dot description give it some styling as well the font should be equals to body tree save it all right and lastly we'll move on to the quantity section over here okay so for this we need a container view as well give you some stalling align item equals to flex n and justify content equals to center and over here we need the text component that renders item.quantity gives some styling where the font equals to body tree as well all right save it sweet all right so we have completed the ingredient list section next we are going to make use of the list header component prop to work on the header section the info section and lastly is the ingredient header section over here all right so go back to your source code and the list header component over here we have the header section we have the info section and lastly is the ingredient title section right so for the header section we are going to render a new function called render recipe card header and we will create this function over here so function render recipe card header and we will return a container view like this give it some stalling the line item equals to center all right now within this container view we will need to render two different things which are the image background and followed by the recipe creator card the reason why we didn't include the back button as well as the bookmark button in this section is because i do not want these two buttons to be scrollable so don't worry we'll work on these two buttons later on okay so now go back to your source code and over here we have the background image and followed by the recipe creator card section right so for the image we are going to render animated that image all right and the source is going to be selected recipe dot image resize mode equals to contain and the style will be height header height width will be 200 and now try to save it and see what we got okay so we have the background image in place all we need to do now is to make sure we can animate it so to do that we will make use of the transform property okay and here i would like to set the translate y like that and we will use the interpolate method so scroll y dot interpolate and here the input range will be negative header height zero and header height the output range will be negative header height divided by two zero and header height multiplied by zero point seven five all right save it so what we are doing here is that whenever we scroll up you will notice that the background image is slowly moving upwards as well and whenever we scroll down the background image is slowly moving downwards okay next i would like to scale the image so over here scale will be same thing scroll y dot interpolate and the input range equals to negative header height 0 and header height and for the output range it will be 2 1 and 0.5 save it all right so what we are doing here is that whenever we scroll the flat list the header image the header background image will scale accordingly like this okay all right now all we need to do is to set the overflow over here to hidden like that save it now let's try to scroll it okay it's almost perfect i would say at least whenever we scroll up the background image will scale accordingly like this just that we need to do some handling when we scroll downwards as we do not want the blank space on the top right so to do that there is a bit of work around we would like to set the margin top to negative 1000 and we'll set the padding top to 1000 all right now save it if we were to scroll the list now the animation should work perfectly fine okay perfect next we'll be working on the recipe creator card alright so over here we are going to render an animated view as well like that give it a bit of styling so position should be equals to absolute bottom equals to 10 left equals to 30 right equals to 30 height equals to 80. all right save it let's work on the content of this animated view first which is this part over here and we'll see how we can animate this later on okay so for this i am going to create a standalone component called recipe creator card info and i'm going to pass the selected recipe over like this select the recipe yep and now we are going to create this component over here so constant recipe created card info and here we'll be taking in the selected recipe arrow function and we will return something now if you take a look at the background of the card info it is actually a blur view as well and since we would like to standardize the ui appearance with the previous screen which is the home screen so here we are going to check if the platform dot os is equals to ios then we are going to return the one with blur view if it's not then we will simply return the one with normal view right so for this it's going to be blur view like that give it some stalling flux equals to 1 and border radius equals to sizes that radius and the blur type equals to dark for android we are going to return a normal view give it some styling as well flex equals to one border radius oops border radius equals to sizes.radius and the background color is going to be colors.transparent blacknight that one okay save it alright so we have the container in place next we'll be working on the cart info itself okay and to do that we are going to create another standalone component called recipe creator card detail and same thing we are going to pass the selected recipe over like this same goes for android as well okay and now we are going to create this component over here so constant recipe creator card detail we will take in one prop which is the selected recipe arrow function and we will return something so for the card info we have basically three different sections over here we have the profile picture followed by the label and lastly is the button okay so over here we are going to return a container view give it some stalling flux equals to one flex direction equals to row and align item equals to center now within this container view we are going to render the profile photo the labels and also the button okay so for the profile photo we need a container view like this give it some stalling with equals to 40 height equals to 40 as well and margin left equals to 20. and over here we need to render the image component and the source will be selected recipe dot author dot profile pic and the style will be with 40 height 40 as well and border radius 20. all right save it okay so we have the profile photo in place next we'll move on to the labels so for this we need another container view give it some styling flux equals to 1 and margin horizontal equals to 20 and for this we need to render two text components so we need two text components over here like that the first text component is going to render recipe by give it some stalling color equals to colors.light gray 2 and the font will be body 4 after that we need to render the name so selected recipe dot author dot name here is some styling as well so color should be white too like that and font should be h3 all right save it okay so we have the label section in place lastly we'll go for the button okay so over here we will be rendering a touchable opacity give it some styling with equals to 30 height equals to 30 as well a line item equals to center justify content equals to center margin right equals to 20 border radius equals to five and border width equals to one and lastly the border color equals to colors.light green one okay save it as you can see here we have the frame in place all we need to do now is to render the arrow icon okay so over here we are going to render an image component the source is going to be icons dot right arrow and the style will be with 15 height 15 and think color colors dot light green one like that all right save it okay so whenever i click on this button on press i would like to console.log view profile right it's working okay so what i'm going to do next is that i would like to hide this create a card with animation whenever we scroll up to a certain point right whenever we scroll up to a certain point i would like to be able to hide the created info by using animation let's see how we can do that so navigate to the recipe card header function let me see yep over here we would like to be able to animate this view and to do that we can make use of the transform property like that translate x same thing will be scroll y and we will use the interpolate method like that the input range will be 0 170 and 250 whereas the output range will be 0 0 and 100 the extra bullet will be claimed all right now save it now whenever we scroll up to a certain point the creator card will be hidden with animation like this right perfect so whenever we scroll up the creator info will be hidden great alright next we'll be working on the header bar over here so the header bar basically consists of the back button as well as the bookmark button but to make it a little bit more interesting i am going to include some animation components as well over here okay let's see how we can do that so first thing first we need to render the header bar function over here so after the flatless component okay we are going to render header bar so this one's actually had a bar like that and we will create the function over here so function render header bar and we will return a container view give it some styling position should be equals to absolute top will be zero left will be zero right will be zero height will be 90 flex direction equals to row align items equals to sorry flex n justify content equals to space between padding horizontal equals to sizes.padding and padding bottom equals to 10. so within this container view we have the back button and followed by the bookmark button right so for the back button we need a touchable opacity give it some styling align item equals to center justify content equals to center as well height will be 35 width will be 35 border radius will be 18 border width will be one border color is going to be colors.library and the background color is going to be colors.transparent black 5. alright so whenever i click on the back button i would like to go back to the previous screen and within the touchable opacity we need to render an image component where the source is going to be icons.black and the style will be width 15 height 15 and thin color it's going to be colors.light gray all right save it perfect we have the back button in place and whenever i click on it it will navigate back to the previous screen okay next we'll be working on the bookmark button same thing we need a touchable opacity as well give it some styling align item equals to center justify content equals to center as well height will be 35 width will be 35 and within the touchable opacity we are going to render the image component so for this the source will be if the selected recipe is bookmark equals to true then we'll be using icons.bookmark field if it's not then we'll be using icons.bookmark all right give it some styling as well width equals to 30 height equals to 30 and thin color equals to colors.green alright save it perfect and you will notice that the header bar will not be impacted by the flat list which is exactly what we want right next what i'm going to do is that i would like to add a screen overlay for the header bar section over here so that whenever we scroll up after the creator info card is hidden i would like the screen overlay to slowly turn the background into black color alright let's see how we can do that so over here right above the back button i would like to render a screen overlay okay and for this we need to use the animated dart view give it some styling position should be close to absolute top will be zero left will be zero right will be zero and bottom will be zero as well the background color is going to be colors.black and over here we are going to animate the opacity property same thing we are going to use the scroll y and the interpolate method all right so the input range is going to be header height minus 100 and header height minus 70 for the output range is going to be zero and one all right save it now whenever we scroll up you will notice that the screen overlay with the background color black will slowly become visible like this right like this okay so the screen overlays in place next i would like to include a header bar title as well that will only be visible after you scroll up to a certain point okay so to do that i'm gonna render the header bar title over here like that and for this it's going to be animated.view as well because we need to animate it give it some styling so position equals to absolute top equals to zero left equals to zero right equals to zero bottom equals to zero as well a line item equals to center justify content equals to flux and padding bottom equals to 10. i think let us keep it this way first and we will work on the animation shortly so within this animated.view we are going to render two text component the first one is going to render recipe by like that and the second one is going to render selected recipe dot author dot name give it some styling so color equals to colors.light gray two and the font will be body four this one as well give it a bit of styling so the color is going to be colors.y2 and the fonts will be h3 all right save it alright so as you can see the header bar title is over here like i said we only want it to be visible after we scroll up to a certain point right so to do that we are going to animate the opacity property same thing we are going to use the interpolate method so scroll by that interpolate and the input range is going to be header height minus 100 and header height minus 50 and the output range will be zero and one all right save it as you can see here the initial opacity is zero which means it's not visible however whenever we scroll up to a certain point the opacity will become one and it is visible as you can see here right and to make it even fancier i would like the header bar title to slide up from the bottom so to do that we are going to animate the transform property like that and over here is going to be translate y same thing scroll y dot interpolate and the input range is going to be header height minus 100 and header height minus 50 whereas the output range will be 50 and 0. extrapolate is going to be claim alright save it now if we were to scroll up the list the header bar title should animate accordingly as well like that see like that alright it'll be more obvious if the list is longer but it's actually working perfect all right so that's all for the header section next we'll move on to the recipe info section over here okay so go back to your source code and over here in the flat list list header component over here we are going to render a new function called render recipe info and we are going to create this function over here so function render recipe info and we are going to return a container view give it some stalling flex direction equals to row height equals to 130 with equals to sizes that width padding horizontal equals to 30 padding vertical equals to 20 and lastly the align item should be equals to center all right now within this container view we basically have two different sections which are the recipe name section and followed by the viewers section okay so over here we have the recipe section and followed by the viewers section so for the recipe name we are going to render a container view give it some styling flex equals to 1.5 and justify content equals to center now within this view we need a text component that renders selected recipe dot name all right give it some stalling the font should be equals to h2 next we need to render another text component 4d duration and serving right so over here we will render the selected recipe dot duration followed by the separator and select the dot recipe sorry selected recipe dot serving followed by the word serving okay give it some styling margin top equals to five color equals to colors.light gray too and the font will be body four all right save it okay so the recipe section is in place next we'll move on to the viewers section so to do this we need a container view as well give it some stalling flex equals to one and justify content it goes to center okay so for the viewers section over here we are going to create a standalone component called viewers okay so over here we are going to render a standalone component called viewers and we will pass the viewer's list over so viewers list equals to selected recipe dot viewers okay so all we need to do now is to create a new file in the components folder called viewers.js all right so same thing we need to import from react we need to import from react native we need view we need image and also we need text next we need to import from constants like that and here we need the fonts and also colors all right now over here we will create the functional component so constant viewers arrow function and for this component it will take in one prop which is the viewers list all right so arrow function and just to see if it works i'm gonna just return a normal view like that with a text component that renders viewers okay so don't forget we need to export default viewers as well save it and now in the index.js file we need to import the viewers like this some viewers and also we need to export it over here all right save it now go to the recipe screen over here and on top we need to import the viewers component so over here we need to import components we need to import viewers like that okay all right save it and see if it works now navigate to the recipe screen great so the viewers um component is indeed working now go back to the viewers.js file and over here there are basically a few different handlings depending on the number of viewers so if the viewers list that length is equals to zero which means nobody have seen the recipe before we are going to return something else if the viewers list dot length is less than or equal to four then we are going to return something else else if it's more than four then we will have a different layout as well okay all right so if the viewer list is equals to zero then we are going to return a container view like this give it some styling align items equals to center justify content equals to center as well and within the container view we are going to render a text view and for this we are going to render b first be the first one to try this give it some styling color equals to colors dot light gray two and the font will be body four now if the viewers list is less than or equals to four then we are going to render a container view as well and now within this container view we are going to render the profile image section over here and followed by the text section over here okay oops all right so within the container view we have the profile section and followed by the text section so for the profile section we need another container view give it some stalling flex direction equals to row align items equals to center justify content equals to flex n and margin bottom equals to 10. and now over here we are going to use the map method to render the profile images all right so viewers list dot map item index arrow function and here we are going to return a view where the key will be index and the style will be height 50 with 50 and for the margin left if the index is equals to zero then the margin left will be zero if it's not then it will be negative twenty all right now within this view we are going to render the image component where the source will be item.profile pic and the style will be with 50 height 50 and border radius 25 all right so that's all for the profile images section next we'll move on to the text section so for this we need two text components like that the first text component is going to render the number of people so viewers list that length people give it some styling color equals to colors.light grade 2 text align equals to right fonts equals to body 4 and we would like to overwrite the line height to 18 and for the second text component we are going to render already try this like that give it some styling color equals to colors dot light gray 2 same thing text align equals to right fonts equals to body 4 and we would like to overwrite the line height to 18. now if the viewers list is more than 4 then we are going to return a container view as well just at this time the ui will look something like this where we have three profile images and followed by the remaining number of people okay so same thing we have the profile section and followed by the text section over here so for the profile section we need a view like this give it some styling flags direction equals to row align item equals to center justify content equals to flex n and margin bottom equals to 10. now within the profile container view we are going to render the profile images by using the map method as well so viewers list that map item index arrow function and here we are going to return something right so if the um index is less than or equal to 2 like that we are going to return the profile images all right ifd index is equals to three then we are going to return the remaining number of people right okay so if the index is less than or equals to two then we need a container view oops i should use the curly braces over here and here as well all right now give it some styling height will be 50 width will be 50 and for the margin left if the index is equal to zero then the margin left will be zero if it's not that will be negative 20. we need to supply the key as well so the key will be to index and now within this view we will render the image component where the source is going to be item.profile pic and the style is going to be with the height 50 and border radius 25 now if the index is equals to 3 then we will return a container view as well we need to supply the key prop which is equals to index and we need to give it some styling height equals to 50 with equals to 50 align item equals to center justify content equals to center as well margin left equals to negative 20 border radius equals to 25 background color equals to colors dot dark green all right now within this view we are going to render the text component all right so we have a text component over here and we will render viewers list dot length minus three and followed by the plus sign like this all right give it some styling color equals to white and the font equals to body four all right so that's all for the profile image section and for the text section it is actually the same as the one over here so i'm gonna just copy like this and paste it over here all right now save it okay so there you go for this recipe we have four viewers which is why we have four profile photos stacking on each other like this okay so let me try to open up the other recipe let's try this one okay so for this recipe there are five viewers which is why we have three profile photos stacking on each other and followed by the remaining number of people right let me try the other one okay so this one has three people which is correct and for the nasi lemak yep we have zero viewers and this is what it will be rendered on the screen perfect all right let me try the animation as well yep it's working now i would like to give some spacing at the bottom part of the flat list so to do that head back to the recipe.js file look for the flat list over here and we are going to add another prop called list footer component and for this it will just be a normal view like that with a bit of styling where the margin bottom equals to 100 all right save it okay a lot better now and now let me try the animation perfect all right so the last section for the recipe screen is the ingredient header section over here alright so to do that in the list header component over here we will render a new function called render ingredient header and we will create this function over here so function render ingredient header and we will return a view give it some stalling flags direction equals to row padding horizontal equals to 30 margin top equals to sizes dot radius margin bottom equals to sizes dot padding all right so within this container view we need two text components all right so for this text component we are going to render ingredients give it some styling flex equals one and the font equals to h3 and for the second text component we are going to render the number of items okay so for this we are going to render selected recipe dot ingredients dot length and followed by the word items give it some styling color equals to colors.light grade 2 and font equals to 44. all right save it perfect all right it's working let me quickly go through the app for a bit okay all right guys we have finally completed this beautiful food recipe app based on the design created by herded yeah on jupiter.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 on shop the byprogrammers.com and i have included the link in the description below if not that's totally fine as you can still achieve the same result by getting the star template for this project and follow along with 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: 27,555

Keywords: react native, react native tutorial, app development, react native food app, react native project setup, react native animation navigation, react native animated header scroll, react native animation, food recipe app, food app, react native animation basics, react native animation beginner, react native animation tutorial, react native animation library, react, react native project structure best practices, react native ui, lets code react native, react native project tutorial

Id: W-Oqe8Ph_eM

Length: 100min 33sec (6033 seconds)

Published: Tue Jun 08 2021