LCRN EP8 - Food Delivery 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 good looking food delivery app based on the design created by ilia on juba.com before i begin i just want to say sorry to keep you guys waiting in fact we wanted to work on this exciting project last week but i wasn't feeling so well so we had to push it to this week thankfully i'm feeling a lot better now and let's see what we can achieve today now 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] all right so first thing first we are going to create the project and set up the project structure like we always did in the previous videos so in your terminal you can type in react native init i'm gonna call this project food delivery app all right now let me just rearrange my project structure a little bit all right next i'm going to paste in all the assets that we need throughout this project which includes fonts icons as well as images paste it here copy folder next we'll need to create the file called react native config.js without this we wouldn't be able to use the custom fonts in our project all right next to make it easier for us to use all the assets that we have here especially the icons and images we are going to create all the references within a folder called constants so we have icons we have images sorry we have team and this time we have maps as well this is for the third screen and also we need the index file so for the icons i'm going to include all the all the icons that we have imported in the assets folder like this next i'm going to repeat the same thing for images as well like that all the images that we have imported in the assets folder as you can see here and lastly for the theme of our project i'm going to just paste it here so inside our team folder sorry inside our team file team.js file we have the dimensions of the device we have the colors that we need we have the sizes all sorts of sizes that we need to use in the project later and of course we have the fonts as well save it i'm gonna save this as well and not to forget we have maps.js this time which we are going to include the google api key sorry google api key like that okay next we are going to export everything in the index.js file so that we can use it later on in our project like that okay cool what i would like to do now is to install a plugin called react navigation which basically helps us to do the navigation later on in the project so it's a series of plugins you can either pause this video and copy everything or you can actually copy from the blog itself on byprogrammers.com press enter and now what i would like to do is that i would like to try to run the project and see if everything is o uh i mean if everything is working properly all right so to do that i'll run react native link make sure they're linked properly and i'm going to cd into ios and run pod install now i'm going back to the root folder and run react native run ios alright so as you can see here we can run the project successfully and next we are going to set up the screens folder so from the mod we can see here we have three different screens the first one is called i'm going to call it home screen and this one will be the restoring screen and lastly this one will be the other delivery screen let's create the basic structure for these screens now i'm going to create a screens folder and within the screen folder i'm going to have home.jazz rastoren.js order delivery.js and of course we need the index file as well all right so for the home screen i'm i'm going to just um create a basic structure import react from react import i'm going to just import view and text for now from react native i'm gonna create a functional component for home just a simple view and text view like that and of course we need to export default the home component as well all right cool now i'm gonna just copy and paste and sorry i'm gonna just copy and paste it in the other two screens all the delivery rename it and of course restoring as well rename it and lastly don't forget we need to export all these screens in the index file like that all right now that we have the basic structure for our screens next we'll move on to the app.js file normally i'll remove everything and start from fresh so we need to import react from react we need to import create stack navigator from react slash stack this one and we need another one called navigation container navigation container from react navigation native now that we are here we are going to import the screens as well screens okay restoring order delivery um i'm gonna import home as well but we need to remove this later because home will be will actually be the tab navigator all right so um next we can create stack navigator constant stack equals to create stack navigator we will create an app functional component like this return oh let me just um change the spaces to four this is my preferred spaces okay and of course don't forget to export default the app as well okay and within the return segment we need to return navigation container like that inside the navigation container we have stack dot navigator oops stack dot navigator and just to see if we are doing it right i'm gonna just include the home screen for now so we are going to do stack dot screen name hom oops home and the component will be home as well and for the stack dot navigator we are going to include a prop called screen options because we want to remove the header and of course we need to set the initial route name to home okay let's see if it works all right it works as you can see it's um the home is showing here next i'll just include the stacked out screen for restaurant and all the delivery screen we don't need them now but we will need it later so i'm gonna just put it here first that's all right paste okay okay as of now we have successfully created and set up the basic structure of this project the first component that we'll be working on is this bottom navigation bar or bottom tab bar over here we are going to first create an ordinary bottom tab bar then we will slowly turn it into a fancy tab bar let me see if i can zoom in okay cool then we will slowly turn it into a fancy tab bar with a floating button like this let's see how we can do this to do that i would normally create a tabs.js file within a folder called navigation tabs.js okay so in the tab.js file we need to import a couple of things so we need to import react from react we need to import view i think we need image as well that's it for now i think from react native we need to import from the react navigation bottom tabs this one we need to import create bottom tab navigator and also bottom tab bar i think we need touchable opacity as well let me just put that in okay now we need the home screen and also we need to import colors and icons from our constants file as well now we can call the create button tab navigator function and assign it to a variable next i'm going to create a functional component called tabs return and don't forget to export as well so within the tabs functional component we are going to return tab.navigator and within this we are going to include tab.screen which is basically all the tabs that we're gonna see here we have four different tabs here screen okay so type dot screen we have some props that we need to include first thing is a name we have component which is going to be home and lastly we have an we have a props called options where we will include the type bar icon here all right so what we are doing here is basically to set the tab bar icon by using an image component so we are setting the icons to be cutlery and um the thin color when whenever the tab is being focused we will be using the colors.primary color and if it's not then we'll use the secondary color as simple as that now let's try to save and see if it's working properly oh it's not showing because we need to import it in our app.js file here import tabs from navigation tabs and i'm going to change the home to tabs okay so it says export icons is not defined i'm pretty sure my index file here is not being yep that's correct i need to export icons as well and let's see okay cool see we have our first tab here let me just remove the label so within this tab.navigator um component we have a prop called tab bar options which we can actually set the show level to false like that cool now what we need to do is to copy and paste the tab.screen component four times for four different tabs okay and we are going to change the name of course the second tab will be search okay we have search the component since we are not building the other components for the other tabs we're gonna just reuse the home component for now so the image is going to be search the think color maintain the same and the third type we have a light icons is going to be light yep and lastly we have user icons is going to be user okay cool save there you go yep it's working as expected it's working as it should now we are going to turn this ordinary looking bottom tab bar into a fancy one like this okay oh and you have you may have noticed that this fancy tab bar over here this part is transparent right so in order to achieve this we need to make sure our tab bar is transparent first so we can set that in the type dot navigator here within the tab bar options we can have a style and i'm going to set the background color to transparent there you go and i'm going to remove the top border as well by setting border top width to zero okay cool now that i'm here i'm gonna set the elevation to zero as well this is for android okay and in order to achieve a unique shape like this this curvy shape like this we are going to need a library called react native svg so we can install it like this in your terminal npm install react native svg after that you need to run sorry you need to cd into ios and run pod install okay cool now i'm going to create a custom tab bar button to do that within the options prop within within the options prop i can actually add in tab bar button props and here i'm going to return a new functional component called tab bar custom button i'm going to copy the exact same thing to the other tabs as well all right now we can actually create the tab bar custom button functional component and in the parameter we are going to need three things which are accessibility state children and arm press all right so what this means is that if a particular type bar button is being selected i'm going to return this if it's not i'm gonna return this okay now make sure you import from react native svg like this import svg path from oops sorry from react native svg okay it's gonna show you an error because we haven't set up properly that's okay that's fine so um if it's selected if a particular tab bar button is being selected i'm going to return this component with a curvy view curvy shape and a floating button however if it's not being selected i'm going to return a normal touchable opacity like this okay okay the reason why it's showing error is because of a bit of typo here it should be accessibility ability state yeah like that now you should be fine that's weird supposedly it should move up like this um just oh this one should be selected not is selected sorry okay let me try to um close the app and reopen it and let's let's see how it goes i'm gonna run react native link i'm gonna cd into ios and run pod install okay finally it works now so um whenever i click on tap on another tab it will flood it like this the button will float like this which is exactly what we want so i'm gonna explain a little bit what's going on here um first thing first we have imported the svg and path from real native svg so in case you don't know we can actually convert svg from png file all right you can either draw this this svg right here is actually the curve this curve and i actually got this from stack overflow you can actually you know convert it from a file you can you can draw sorry you can you can design the image file yourself and you can convert it into svg from png or jpeg file it's up to you so if i were to remove this as you can see now the shape is gone see so this svg is actually the curvy shape all right and these two views is actually to you know fill up the empty spaces on the side so here we have the view container for the whole thing and the first view we have is for the svg the shape the curvy shape and next we have the touchable opacity which is um this floating button over here we but we use we use the top property and set it to negative 22.5 so that it floats up like this and pretty much that's about it right and if it's not if it's not being selected which are like these three tabs over here we are going to just show a an ordinary touchable opacity which is just a button all right i'm not sure if you can see this but the bottom tab bar doesn't actually text up the entire spaces here you see there's quite a bit of space here especially for iphone 10 11 12 series right because of this um this bar over here so to get rid of this we are going to create a custom tab bar which can be included in the tap dot navigator props let me see um yep here so we need to create a custom type bar so we use tab bar props type bar props um sorry should be parenthesis not curly braces i'm gonna return a custom tab bar okay so i'm gonna create a custom tab bar functional component return bottom tab bar oops some error over here let me see what's going on okay now we need a closing curly braces here all right that should be fine that should do it okay cool everything stays the same but now we're going to create a view here a view container and we are going to create a an empty view all right an empty view with a style of position absolute bottom zero left zero right zero i want it text the whole width and a height of 30 and the background color has to be white like that okay see it's gone this view over here has filled up the spaces um the empty spaces just now all right that's cool however since this only happens to iphone 10 iphone 11 and 12 series we're going to install another plugin called react native iphone 10 helper all right so i'm going to just copy and paste it in okay now i'm going to import it like this import this iphone 10 from create native iphone 10 helper all right cool now inside this custom tab bar i will only return this if it's iphone 10 if it's not i would just return bottom tap bar as if nothing happens oops iphone 10 i've imported is iphone 10. this iphone 10 is iphone 10 okay let's see okay cool all right so we have finally got the bottom tab bar up and running it's looking good so far next um we'll be looking at the home component the home screen header section which is this section right here let's see how we can do this so we will first go to home.js and i'm going to import the components that i'll be using later on so i need a safe area view i need stylesheet touchable opacity image and also flat list and i'm going to define a couple of styles for this screen khan styles okay so we have a style for container and we have another style for the shadow oops we'll need to import the colors as well so i'm gonna import from our constants and i'll import icons images sizes colors as well as fonts we need all that all right so the first thing i'm going to do is to change this into save area view give it a style of sorry styles.container and within the surface review i'm going to call a function called render header all right so i'm going to create a function here render header so by looking at the mark we are going to need um two image buttons and a view in the middle all right so there are three different components two image buttons and a view in the middle all right let's see how we can do that so we have the container view in the flex direction of row and now i'm going to create the image button so touchable opacity let's give it some style with 50 padding left i'm going to give it sizing sizes dot painting times 2 justify content center so inside this touchpad opacity i'm going to include the image so source will be icon start nearby resize mode contain [Music] style with 30 and height 30. okay next we'll have a view in the middle all right flex 1 align item center justify content center this text over here is actually the i'm pretty sure it's the current location we are going to include the dummy data later on but for now i'm gonna just put current location like that or maybe just you know location style will be fonts.hatch3 and for this view because we are going to give it a background color like this so style with 70 height i want it to be full height background color will be colors.light gray tree align item center content center border radius sizes dot radius okay cool almost there now we need another image button okay touchable opacity give it some styling writing right sizes dot padding times two justify content center so within this touch uh touchable opacity i'm going to include the image the image icon all right so source will be icon stop basket resize mode content style will be the same which is with 30 sorry with 30 and height 30. okay cool all right now that we are here i'm going to copy and paste all the dummy data that we are going to need in this project all right so i'm gonna paste it here there are a lot of a lot of quotes here there are a lot of quotes here so um you can either copy and paste from the source code and continue from there or you can you know pause this video and type it up but i'm pretty sure it's really hard because it's a lot easy so we have the initial current location street name is kuching by the way this is on a side note this is actually my hometown kuching it's a beautiful city and i strongly recommend you to you know visit at least once in your lifetime after the pandemic is over right we have good food here we have good people you know i'm i'm pretty sure you enjoy it all right so back to the code we have category data see rice noodles hot dogs salads and so on and we have the restaurant data these one these are the constants for price rating affordable fair price and expensive so these are the restaurant data we have name rating categories and so on all right cool and lastly we'll set all the dummy data into the respective stat hook all right so now for the location let me just go back here so for this location i'm i can actually put current location dot street name which is the dummy data that i've just pasted in there we go coaching my hometown all right the header section is now completed next we'll be working on the man category section so to do this we are going to need text component here to render man categories label and we need a flat list a horizontal flat list over here to render the um food categories all right let's see how we can do this the first thing i'm gonna do is to create a function called render man categories function renderman categories return something right so we need a container view oops give it some styling all right next we need effects component right so to render main categories there are actually a few ways to do this you can also set a fixed width to the text but i'm gonna split it into two text components instead categories give you some styling i'm going to use h1 for this same goes for categories all right let's see what we have here okay cool next we are going to need the horizontal flat list all right to do that we need flat list of course data is going to be categories it has to be horizontal i don't know i do not want to show the horizontal scroll indicator key extractor is going to be the id item dot id like that render item is going to be render item i'm going to create this later on and lastly we need to add in the content container style padding times two now the reason why we need to add in some um vertical padding to this flat list is so that we can have some um spacing in between like this so next we can move on to create the render item function we can do it from here constant render item item it's going to return something right so what we have here is actually a touchable opacity which is a button an image um perhaps a background view and also text all right so touchable opacity i'm gonna give it some styling padding sizes padding sorry i need to give some padding bottom as well background color i'm going to keep this at um colors.primary for now i'm going to use a primary color for now border radius line item center justify content center margin right sizes.padding and some shadows of course all right almost there i think next we need to add the image all right so before we can add the image we need a background view right so come over here give it some styling border radius 25 align item center justify content center and for the background color i'm going to keep it white at the moment all right so we got this now we need to add in the image dot item.icon resize mode equals to contain style will be width 30 and height dirty like that okay cool the next thing we need here is of course the text right so i'm gonna come down here create a text component and within the text component i'm going to render item dot name okay now it's time to give it some styling margin top because i need some spaces here in between so margin top sizes dot padding the color is going to be white at the moment later on we need to make some changes to it and the font is going to be body 5 like that next we need to be able to select these category like this and to do that we need to include the unpressed props here so whenever the user click on this i am going to call a function name on select category and i'm going to pass in the item which is the category all right so let's create this function we can create on the top okay here function unselect category parameter will be category now we need to do two things here one of them is of course to set the selected category like this other than that we also need to filter the restoring list by using the filter method so filter restaurant restoring lists restoring data these are dummy data i'm going to use filter categories that includes sorry includes category.id so this line of code here will return me all the restaurant lists based on the selected category and i'm going to set it as well restaurants restaurant list alright so next we are going to make some changes on the ui so let's go back down and the background color i'm going to put if the selected category dot id is equals to item.id i am going to give it the colors.primary color if it's not i'm gonna use colors.white all right cool and for the background color of the image i'm gonna make some changes as well if the selected category dot id equals to item.id i'm gonna give it white color if it's not i'm gonna use light gray okay a lot better now and lastly will be the tax all right same thing if the selected category dot id equals to item dot id i'm gonna give it a white color if it's not i'm gonna use black okay a lot better now next we'll be working on the restaurant list which is a vertical flat list this time so what i'm going to do now is to create a function called render restorant list all right i'm going to create a function here i'm going to return something so this is going to be a flat list data is going to be restaurants key extractor is going to be item dot id render item is going to be render item which we will be creating later on and lastly we need the content container style so i'm going to give it some padding horizontal and also padding bottom the reason why we need to add a padding bottom dirty is because i do not want the last item of the restaurant list flat list to be blocked by this floating tab bar button over here okay so now let's create the render item function constant render item equals to item like this okay so this whole thing is going to be a button so we are going to use touchable opacity as our um container view all right so touch popacity i'm going to give it some styling margin button sizes stop padding times 2 and for the on press i'm gonna come back here later because the on press is going to navigate to the restaurant patch or the restaurant screen all right so within the flat list item the first thing we're gonna see is the image so let's create the image now image source is going to be item sorry item.photo resize mode is going to be cover style is going to be width of 100 height of 200 and a border radius of sizes dot radius oops sorry a bit of typo here okay next we are going to create the um duration label over here at the bottom left corner of the image right so um to do that i will create another view and i'm going to give it some styling this time and the style is going to be position absolute and we want to position it to the bottom left of the screen of the image i'm sorry bottom zero height is going to be 50. with it's going to be sizes dot width times 0.3 background color is going to be white border top radius sorry border top right radius is going to be sizes dot radius border bottom left radius is going to be sizes the radius as well line atom center justify content center and lastly i'm going to give it some shadows as well so within this view let me try to save it yep that's correct it's being rendered properly so within this view we are going to create the text component and we are going to render item dot duration like that okay now i'm just need to give it some styling for this text component which is fonts.h4 there you go next we need to add in some restaurant info right we need the name we need the ratings and so on all right let's do that so after this image sorry i'm gonna create the restaurant info section so the first thing we're going to render is the name so item dot name like that i'm gonna give it some styling and perhaps i'm gonna give this view a margin bottom of sizes dot padding all right now we have the name in place next we are going to render the ray thing so i'm going to create a container view i'm going to give it some styling oops okay stalling margin top is going to be sizes dot padding and flex direction is going to be row so the first component is going to be ray thing and it's actually an image the star image source equals to icons.star style i'm going to give it um height of 20 width of 20 thin color is going to be colors.primary and excuse me i'm going to give it some margin right all right now we have rendered the star next we need the rating itself so i'm gonna create a text component and render item dot rating all right cool just need a bit more styling for this font start body tree a lot better now all right so next we need to create the categories label okay so um categories i'm gonna create a view content some styling as well flex direction roll and margin left 10. so within this view we are going to render the categories by using the map method item.categories.map category id arrow function and i'm going to return something so here i'm going to return a view i'm going to give you some styling as well flex direction equals to row and the key is category id so within here we are going to show a text component of the category name and to do that we are going to create a new function called get category name by id and we are going to pass in the category id to the function all right let's create this function at the top underneath this function all right on select category so function get get category name by id the parameter is going to be id and here i'm going to use the filter method to retrieve the category names data id equals id if it has result which is that length more than zero then we are going to return category name the name of the category based on the given id if it's not we will just return empty string like that okay let's see there we go so i'm going to just give it a bit of styling for this text component font start body tree all right and we need a bit of a separator as well fonts at three colors going to be darkway okay a lot better now so after the categories we need to render the price in dollar sign okay let's see how we can do that so here we're going to um give it a price section okay so within this i am going to first create an array of one two and three because i know that from the given dummy data the price is only label s um let me find it one two and three right so i'm gonna go back here so for the price i'm gonna first create an array of one two and three and then i'm gonna use the map method to render the dollar sign price rating this one's going to be a tax component it's a dollar sign okay now we just need to add in a bit of styling the key is going to be price rating and the style is going to be fonts dot body tree and the color will be if the price rate thing is less than or equals to item.price rating then i'm gonna give it a black color if it's not it will be dark gray okay now as you can see the restaurant list is being shown in the flat list and this flat list will be filtered based on the selected category as well like this all right so it seems like the first screen is completed right so now we are going to move on to the next screen which is the restoring screen but before we can do that i'm going to include the on press for the restaurant list here this is so that i can navigate to the next screen which is the restaurant screen alright so on press equals to navigation dot navigate to restaurant and now that i'm here i'm going to pass in some parameter as well item and current location which we are going to um use it later on in this screen let's try to save it okay i didn't it seems like i didn't import the navigation into this component let me see yep i need to import it here all right okay all right so for the next screen the first thing the first component that we'll be building is the header component so um same thing we're going to have two image buttons and view and text component in the middle let's try to work on it alright so i'm gonna navigate to the restaurant page and now i'll be importing all the components that we'll be using later on so i need stylesheet i need save area view i need view i need text touchable opacity image and also animated i'm going to explain later on why we need animated alright so um oh and i need the react native iphone x helper as well and of course we need to import the constants icons colors sizes and fonts the first thing we're going to do is to actually store the um hang on there we go okay to store the parameters being passed over from the home screen to the restaurant screen inside react statehook variables all right so i'm going to do that now i'm going to create restoring set restaurant it goes to react use date now constant current location set current location equals to react use state and um null as well all right so um we are going to use react.use effect so that whenever we navigate into this screen we are going to store the parameters all right okay before we can access the parameters we are going to pass in the route as well like that that item current location it goes to route.params and here i can actually set the restoring and i can also set the current location all right cool next i'll change this to save area view alright so within the safe area review i'm going to render header which is the first component that we'll be building for this screen but before that um i need to include i'm i mean i need to do some styling for this as well so styles oops let me include it here constant styles equals to style sheet dot create container flex 1 background color is going to be colors dot light gray 2. all right so style equals to styles dot container and now we are going to create a function called render header here okay all right so we need a container view i'm gonna give it some styling which is um flags direction equals to row then i'm going to create the image buttons this one so um it's going to be touchable sorry touchable opacity to give you some styling as well with 50 padding laughs sizes dot padding times two justify content center and whenever i press on this back button i am going to navigate back oops i need to include this one here as well all right i need to navigate i mean navigation dot go back go back to the previous screen so within this button i'm going to include the image source equals to icon start back resize mode contain style will be with 30 and height 30 sorry let's see all right cool now we have the back button next we need to render the restaurant name all right so you can come over here and this is going to be restaurant name section so view style flex equals to one align item center this is actually the container view justify content center as well so within this view i'm going to create another view and with some styling so height equals to 50 align item center justify content center padding horizontal is going to be sizes.padding times street border radius is going to be sizes dot radius and background color will be colors.light gray tree so within this view we are going to render a text component showing the restoring name like that so i'm going to give you some styling as well it's going to be fonts.h3 all right cool and lastly i'll need another image button over here so i'm going to create another touchable opacity i'm going to give you some styling same thing with equals to 50 padding [Music] right that's going to be sizes dot padding times 2 justify content is going to be center and within this touch opacity we're going to render the image source equals to icons dot list and resize mod will be content resize mode is going to be contain styles it's going to be sorry with 30 and height 30. all right looks cool all right that's it for the header section next we'll be working on the food information section one thing i would like to tell you guys is that i um i mean we couldn't really find a good transparent food image like this but we did manage to find some pretty cool pretty delicious food images and i think the concept is still the same and to achieve the food information section we are going to use animatable scroll view the reason why we need it to be animatable is because we wanted to control these dots over here let's see how we can do it all right so the first thing we need is to create a new function called render food info and i'm going to create the function here all right so within this function i'm going to return animated scroll view and for the scroll view we are going to include some props so um we need to be horizontal hedging enable scroll event throttle equals to 16 snap to alignment center shows horizontal scroll indicator equals to false and we also need to define the on scroll props but we are going to do this later this is where we are going i mean this is where we can actually control the three dots i mean the dots over here the dots underneath the foot info all right so within the scroll view we are going to render a list of food images and we are going to do that by using map method like this restoring menu dot map item index arrow function all right so within this i'm going to return a view i'm going to give it some styling the key is going to be menu dash index style is going to be align item center so within this view i'm going to create another view with a style height of sizes height times 0.35 all right so the first thing we are going to render is the food image so image source equals to item photo resize mode equals to cover style equals to width sizes with height 100 all right there you go so after the image we are going to render the quantity section or the quantity buttons all right so after the food image here comes the quantity section so i'll create a view i'm going to give it some styling position absolute bottom negative 20 with equals to sizes.with height equals to 50 justify content center flex direction equals to row all right so within this view let me just hide the terminal okay so within this view we have touchable opacity and i'm going to render negative oops negative within this button right now i need to give some styling wrong color white okay now a line item has to be center justify content center okay border top left radius equals to 25 border bottom left radius equals to 25 as well so that we have the i mean we have that nice curve right and i'm going to set the font of this text as well so style equals to fonts body one all right cool now we got the minus button next we are going to render the quantity itself okay so it's going to be view and within this view is going to be text of some quantity let's say five [Music] okay i'm gonna give you some styling with equals to 50 background color white align item center justify content center okay and this one it's going to be fonts h2 all right we will add in the functionality later for now we focus on the ui first all right so next we'll create the plus button so another touchable opacity i'm going to give it some styling with 50 background color white align item center justify content center border top right radius equals to 25 border bottom right radius equals to 25 as well so within this same thing i'm going to render the plus icon or the plus symbol and the style is going to be fonts body one perfect now don't worry about the functionality first we will come back to this shortly all right so next we'll be adding the name and description as well as the calories so uh i will add it here name and description so it's going to be view and i'm going to give it some styling with sizes.with line item center margin top 15 padding horizontal equals to sizes dot padding times two so with thins view we're going to need a text component that renders item name dash item price to fix to two decimal places okay now i'm going to add a bit of styling for this so style equals to margin vertical 10 text align center and fonts is going to be h2 perfect so after the name and the price tag we are going to need the description so underneath this text we are going to need another text component that shows item.description so the style is going to be body tree okay after the description we need calories calories so calorie i need view as well so um some styling flex flex direction equals to row and margin top equals to ten and within this view i'm going to render the fire icon or image source icons fire style equals to with 20 height 20 and margin right 10 okay after the image or after the fire icon i'm going to render the calorie itself in the text component so item.calories to fix to two decimal places calorie okay i'll just need a bit of styling for this text so it's going to be fonts body tree and color is going to be colors dot dark gray perfect dark grey yep all right now the food in full section is completed next we'll be working on the order section all right so as usual we are going to create a new function called render odor and i'm going to create it here so i'm going to return a view and the first thing i'm going to render is actually the dots so i'm going to create a new function here called render dots the reason being is because i would like the dots to always stay on top of the order section right so i'm gonna create the function here function render dots and i'm going to return something right now since we would like to animate the dots whenever we scroll the foot info we need to first create an animated value here scroll x equals the new any method that value and the value is going i mean the initial value is going to be zero sorry zero so back to the render dots function here we need to get the dot position dot divide scroll x sizes dot width all right so for this style for this view i'm going to give it some styling height 30 so we are going to need another view here and the style is going to be flex direction roll align item center justify content center and height it goes to sizes dot padding here we are going to use the map method to render the dots restoring menu.map item index arrow function and here we need to return something before the return statement we are going to use the interpolate method to do the animation opacity equals to dot position dot interpolate input range index minus one index index plus one output range equals to 0.3 1 and 0.3 extrapolate goes to clean constant dot size the position interpolate put range index minus one index index plus one output range sizes dot base times 0.8 then size is the base times 0.8 extrapolate claim lastly we need to animate the color as well the position dot interpolate input range index minus one index index plus one output range call this dot dot great because this.primarycolors.create and extra bullet is going to be claimed and now we are going to use these values in the animatable view component so the key is going to be dot dash index opacity equals to opacity style equals to both the radius sizes radius margin horizontal is going to be six with equals to dot size height equals to dot size and background color equals to dot color at this point it doesn't work right see it doesn't move that's because we need to include the unscroll prop here all right so let's do that one scroll equals to any method dot event native event content offset x scroll x and here i will include the use native driver like that all right now it should work yep see whenever i scroll the dot will animate all right cool now we'll move on to the order section so um underneath the render dots all right i'm gonna create a view and i'm going to give it some styling background color equals to white border top left radius equals to 40 border top right radius equals to 40. that's because we want the curve here right and within this view we are going to create another view with some styling as well flags direction equals to row justify content space between padding vertical equals to sizes dot padding times two padding horizontal equals to sizes dot padding times 3 border bottom color equals to colors.light gray 2. and border bottom width equals to one so within this view we are going to need the number of items in the card and also the total amount or the total price right so within this view we are going to need attacks component items and card style is going to be h3 and we need another one as the total amount so i'm gonna hard quote a value first and i'm gonna revisit later on okay so style is going to be fonts h3 like that so after this we need to render the location and also the card number all right so view some styling flex direction equals to row justify content oops justify content equals to space between padding vertical equals to sizes dot padding times two padding horizontal equals to sizes dot padding times 3 so within this view i'm going to create another view and the style is going to be flex direction row and now we can create the location icon or image so source equals to icons.pin style equals to width 20 height 20 10 color is going to be colors dot dark gray and i want to include the resize mod as well content like that all right so that's the location icon and also we need the location itself style margin left sizes dot padding and the fonts is going to be h4 so now we got the location next we need to render the master card number or card number so view style equals to flex direction row i'm going to just keep this under one line like that okay so within this view i'm going to create an image with the source of icons dot master card resize mode is going to be content style is going to be with 20 height 20 thin color colors dot dark gray all right so after this image we need the card number and i'm going to give it some styling margin left sizes dot padding and fonts h4 oops some syntax error all right and now lastly we need the order button right order button and it's going to be touchable touchable opacity i'm sorry you know what i'm going to create a container view first and the style is going to be padding sizes dot padding times two align items it goes to center justify content center and within this view i'm going to create detachable opacity so style equals to width sizes that width times 0.9 padding it goes to sizes.padding background color equals to colors.primary align item center border radius equals to sizes dot radius all right almost there and within this um button we need a text view sorry a text component that renders the text order all right i'm gonna give you some styling as well so color is going to be white and font is going to be h2 perfect and now to fix this empty gap here due to the save area view we are going to create an empty view to fill up the empty space so if this iphone x i am going to return a view with the style of position absolute bottom negative 34 left 0 right 0 height 34 background color is going to be white [Music] okay done all right now that we have completed the ui for restaurant screen we will now work on the functionalities for the minus and plus buttons and to do that i'm going to first create a function at the top called edit order so this function is going to take three parameters the first one is called action after that it will be menu id and lastly is the price and i'm going to need another state hook as well so um constant order items set order items it goes to react dot u state and empty array all right all right so within this function i'm going to check if the action is plus people are adding the quantity or if it's minus right so if it's plus what i'm going to do here is that i'm going to duplicate the other items by using the slice method and i'm going to filter based on the menu id order this filter a dot menu id equals to menu id so if i have already added this item or order before which is length more than zero then i will increase the quantity right plus one so item zero dot quantity equals to new quantity and i'm going to update the total amount as well dot total equals to item zero dot quantity times price however if this is a brand new item which means i haven't added to the cart yet i'm going to create a new object called new item equals to menu id quantity equals to 1 price equals to price and total equals to price and here i'm going to push the new item and after this i can set order items order list now let's try to see if this function works let's navigate to render foot info i'm looking for the plus button so on press it goes to edit order this one is going to be plus item dot menu id item.price and to check if this is going to work i'm going to create another function that will get the order quantity based on the menu id so i'm going i'm going to create this new function underneath the edit order function parameter will be menu id so i'm going to filter the other item based on the menu id so if the menu id is valid order item.lang is more than zero then i will return the order item dot quantity if it's not then i'll just return zero all right so let's see if the plus button works all right it works now we are going to work on the minus button all right so let's head back to the uh edit order function and here under the else close we need to filter the order list based on the menu id as well well in fact i think i can take this out like that and we use it in both operator plus and minus so if item.length more than zero and if the item quantity is more than zero as well then our deducted quantity by one so here i'll be assigning the new quantity value and i will recalculate the total amount as well so at the end i'm going to set order items based on the updated order list let's see if this works before that i'll need to call the edit order function in the negative button sorry in the minus button so i'm gonna copy and paste this to here the minus button and change the action to negative or minus now let's see if this works all right it works next we'll add a new function that will calculate the total items in the cart all right so that i'm gonna scroll all the way up and create the new function underneath get order quantity so the function is called get basket item count and here i'll be using the reduce method to sum up all the quantity a plus b sorry p dot quantity and the initial value will be zero once we got the total quantity we will just simply return it so we can actually call this function from the order section me see item in cart yep here i'm gonna call this function here and see if it works all right it works three four okay now i'll need to create a new function that will sum up the total right so i'm gonna create the new function and the function name is going to call some order and i'm going to create this function right underneath the [Music] get basket item count function all right so new function here some order and i'll be using the same reduce method to do the calculation order items that reduce and the initial value is going to be zero so once we got the total we will return it and fix it to two decimal places all right it works all right guys so what we are going to do next is that we will add the on press props for the order button in order to navigate to the order delivery screen okay so i'm gonna head over to the order button so it's on the render order order button over here so i'm gonna add in the on press props right navigation.navigate i'm going to navigate to older delivery screen now that i'm here i'm going to pass over some parameters as well restaurant restaurant current location goes to current location all right so if i click on this button over here it will bring me to the order delivery screen all right so what we are going to do next is this screen right here the foot sorry the order delivery screen so what we have here is the map itself of course we are going to render a car icon on the road the route as well as the destination other than that we will also be rendering the header bar the zoom in and zoom out buttons as well as the models as well all right let's see how we can do that so head over to your order delivery screen and now i'm going to give the container view some styling style flux equals to one and here i'm going to render a new function called render map right i'm going to create a function over here so i'm going to give it an empty view first so that the error will not be shown okay now in order to show the map on the on the screen on your device we are going to need a library a plugin called react native maps all right so scroll to the bottom and click on the installation instructions copy the npm install or you can use yarn as well it's up to you paste it in your terminal now because we are going to do a bit of configurations so to be safe i'm going to close the app for now all right i'm going to close this as well now that we have already installed the plugin we need to do a bit of configurations in order for the map to be shown on our device and we have already documented the steps needed to integrate google maps in real native app on our blog right by programmers.com so just head over here and since we are not building for ios i would just follow the ios section and of course if you want to build for android you need to scroll down and follow the android steps as well so on the ios the first thing we need to do is to run react native link all right so next we will cd into ios and run pod install so cd into ios and run pod install all right let's see what we're going to do next and actually if i'm not mistaken up to this step you can actually use the apple map right but since we are going to use google maps we need to continue to do the configurations all right next we'll need to open up the appdelegate.and file so head over to your ios folder project folder appdelegate.m file and here we are going to import the google maps so just add this line copy and paste and we also need to copy this line as well under the method of did finish launching with options so we can do it here all right so this one over here you need to replace it with your google api key again we are not going to go through the steps that you need in order to generate a google api key because the process will be too long for this video however we have actually documented all the steps that you need in order to generate the google api key on our blog byprogrammers.com and i have also included the link in the description below so do check that out if you want to generate your very own google api key so i'm going to paste my api key over here like that and next we will need to copy and paste this into our pod file all right these are the read native maps dependencies so we'll need to head over to our ios parts i'm sorry part file and paste it right above the use native modules here all right i'm going to save this and run pod install one more time all right i think i think that's about it i think that's about it so i'll try to run our project now let's see if it works fingers crossed all right so um i'm going to navigate back and run react native run ios all right so far so good so let me just head over to the delivery screen and now i'm going to import react native maps so import from oops from react native maps so here we need to import the map view and also provider google and marker all right now that i'm here i'm going to import some of the components that i need as well so we need image and also touchable opacity all right now the moment of truth let's see if our map view is showing on our device so i'm going i'm going to give this container style a flex one this is very important okay and within this view i'm going to create the map view oops sorry i should do this like that and for the map view we need to add some styling as well this is very important or else your your map will not be shown all right so we want it to text up the um full area so save all right great it works our map is showing on our device all right so what i'm going to do next is to import all the constants that we need in this screen all right so i'm going to import from constants we need colors fonts icons sizes and also google api key and for the order delivery functional component we need we're out to get the params and also we need navigation all right so next we'll be creating some of the re-extend hooks that we need so constant restoring set restaurant equals to react dot u state and the initial value is going to be now constant street name set street name and the initial value is going to be empty string constant from location set from location and the initial value is going to be now constant true location set to location initial value is good excuse me initial value is going to be now as well and we also need the region set region react.used initial value is going to be now so here we are going to create the use effect function right so use effect okay so this is where we are going to access to the route parents so let restoring current restoring sorry current location it goes to route.params this is actually where we pass over from the restaurant screen over here right so based on this information we can actually calculate the map region right so to do that let from location it goes to current location.gps let to location equals to restaurant dot location some typo here restoring location okay and street it goes to current location dot street name like that and now we can set up the map region it goes to latitude from location.latitude plus 2 location dot latitude divided by 2 longitude from location dot longitude plus two location dot along youtube i think some typo here yep longitude okay dot longitude all right divided by two as well latitude lag d2 delta maths.absolute from location.latitude minus 2 location.latitude times two longitude delta goes to max dot absolute from location longitude minus two location dot longitude times two as well all right so we got all the information that we need so it's time to set it into our state so it's that restoring let me just hide this set restoring restoring set street name excuse me street set from location from lock set to location to lock set region equals to map region all right something is wrong here let me see what's going on let me just try to console lock and see what's inside it's undefined okay ah some typo over here so it's restoring so if i were to refresh this and it should work now all right let me just get rid of that and um so now we can actually head over to our map view and add in some new props over here so we need the provider it goes to provider. sorry provided underscore google and we need to render the initial region let's go to the region that we have calculated earlier and now if we were to save it there you go the region excuse me don't know what happened to my troop alright so the region as you can see here is based on the calculation that we did over here all right so what we are going to do next is that we are going to render the destination marker so destination marker i'm going to create the function over here like that and here we are going to return marker right so for the marker we are going to set the coordinate to to location so within the marker we have the container view excuse me and i'm going to give it some styling height equals to 40 width equals to 40 border radius goes to 20 align item center justify content center background color it goes to white okay as you can see it's here and now within this view i'm going to create another view i'm going to give it some styling as well so it's height 30 with 30 border radius 15. um align item center justify content center and background color is going to be colors dot primary there you go and now within this view we are going to render an icon all right so the source is going to be icons.pin and the style is going to be width 25 height 25 think color equals to colors dot white sweet now that we have the destination marker in place next we are going to render the car icon so i'm going to do it underneath here car icon oops car icon yep same thing i'm going to create it underneath the destination marker function so constant car icon equals to bracket arrow function return something so we are going to return marker and same thing we are going to set the coordinate as well to be from location all right so we want to set the anchor point for this car icon as well so anchor x 0.5 y 0.5 and we want it to be flat and actually we need to include the rotation as well but i'm going to do it later on right so within this marker we will render an image which is basically the car icon and the style is going to be with 40 height 40. all right there you go the car icon is here and the destination market is over here all right now that we have the car icon and the destination icon in place next we'll be working on the route right something like this so to do this we need another plugin called react native maps directions so scroll down to the installation section and copy the npm install and paste it in your terminal enter all right now to prevent any unwanted issues from happening i'm going to reopen the app okay reac native run ios all right so just let's um navigate to the order delivery screen and now i'm going to import the react native maps direction so import from react native maps maps directions all right and here it's going to be map view map view directions like that alright now let's go back to the map view so within the map view right before the destination marker function we are going to render map view directions so here we have the origin from location we have the destination to location and we need to provide the api key as well this is going to be the google api key the stroke width i'm gonna put five stroke color will be colors dot primary optimize waypoints is going to be true and let's see what we have now it says missing api key let me see i think i've imported that it should be fine let me try to restart the app i did supply the api key ah okay some typo here i'm so sorry it should be like that all right so after we restarted the app it's finally working as you can see the direction is being drawn properly from the current location which is this point over here all the way to the destination and now the map view directions actually has a props call on ready which will return some useful data that we are going to need to build the screen so i'm going to call this result arrow function right so this result object will return us the duration which we are going to need it for the header bar over here you see duration over here and we need to be able to sorry we need to be able to store it in our state so i'm gonna call this set duration like that and now we will need to create a couple more react state hook right so constant duration set duration equals to react dot u state zero constant is ready set is ready goes to react.ustate false constant angle this is actually the car angle as you can see the angle is always pointing upwards but we need the card to be able to point in an appropriate directions right so set angle equals to react.ustate zero all right so now i'm gonna go back to the map view directions and here i want to say if it's ready equals to false then i would like to do something to fit the routes into the maps all right oh and before we can do this we need to set the reference for the map view so rav equals to map view and we need to create the reference on top over here so i'm going to do it here constant map view equals to react dot use ref all right so here i'm going to select the map view by using the reference current.fit to coordinates result.coordinate padding right sizes dot width divided by 20 bottom sizes dot width sorry sizes.height divided by four left sizes dot width divided by 20 top sizes dot height divided by eight all right cool next i would like to reposition the car reposition the car this is so that the car will be rendered on the road instead of the building blocks all right so let next lock next location equals to latitude result coordinates zero longitude okay and here i'm going to set the from location to next lock and i'll set the is ready state to true all right all right so what i would like to do next is that i would like to give this car icon over here an angle it should be rendered in accordance to the route okay so before the set from location i am going to write if result.coordinates dot length more than or equals to two then here i will create a new function called calculate angle result coordinates and i'm going to pass it over here so now we will create this function at the top over here so function calculate angle coordinates all right so here what i will do is that i will copy and paste the formula that we have already did beforehand okay this is the formula to calculate the angle of the car icon i'm so sorry i wasn't really good at this this was actually being created by my partner vincent so if you don't understand how this formula works don't worry then some will write an in-depth article on byprogrammers.com to describe or to explain this particular formula over here right so let's go back to our repositioning the car so here once i got the angle i'm going to set the angle all right so let's see if it works oh the reason why it's not working is because i need to set the rotation prop over here for the car icon sorry so rotation prop equals to angle let's see i think i'll need to refresh it because it has already been run i mean the the it's ready flight has already been turned that's why it's not working let me try to rerun this so order there you go see the car icon has been rendered in the correct angle all right so now we have the um route ready we have the car angle being rendered properly next we will be working on the header bar over here all right so what i'm going to do is that i'm going to render a new function over here so render destination destination header and i'm going to create this render function over here so render destination header i'm going to return something so here i'm going to return a view i'm going to add some styling position absolute top 50 left 0 right 0 height 50 align item send justify content center and within this view we need another view like that so this view i'm going to give it some styling as well flags direction row align item center with equals to sizes dot width times 0.9 padding vertical is going to be sizes dot padding padding horizontal is going to be sizes dot padding times two border radius will be equals to sizes that radius background color will be white let's see what we have here all right we have rendered bar here almost done so within this view i'm going to render an image icon so source equals to icons.red pin style equals to with 30 high 30. margin right yeah i need margin right sizes dot padding all right so the icon is showing here i'm going to create another view with flags equals to one and within this view i'm going to create a text component that shows the street name all right so um i'm gonna give this text a bit of styling as well so it's going to be body tree there you go a lot better and lastly we need the duration so i'm going to come over here and i'm going to render a text component and within this text component i'm going to show the duration so ceiling duration minutes right just like that oh a bit of styling for this text as well so i'm gonna give it the same font style body tree all right cool so the header part is done all right so next we'll be working on the delivery info all right so same thing i'm going to render a new function over here called render delivery info and i'm going to create this function over here so function deliver render delivery info and i'm going to return something all right so here i'm going to create a container view and give it some styling so position absolute bottom 50 left 0 right 0 align item center and also justify content center alright so now i'll create another view with some styling of width it goes to sizes dot width times 0.9 padding vertical equals to sizes dot padding times three padding horizontal equals to sizes.padding times 2 border radius sizes dot radius background color equals to white all right so the um model is showing here all right so within this view we are going to need another view and the styling is going to be flex direction equals to row and align item equals to center so here we are going to render avatar so image source excuse me equals to restoring career not avatar all right so the image is showing but it's too big so i'm gonna give it some styling so width equals to 50 height equals to 50 and border radius equals to 25 all right a lot better now so after the image we are going to need another view style is going to be flex 1 margin left sizes dot padding so within this view we need to show the name and ratings right so it's name and rating view style equals to flex direction goes to row justify content equals to space between all right so within this view we will render a text component of the name so restoring career name all right so i'm going to give it some styling for this text so it's fonts.h4 and after this text component we will create another view and the styling is going sorry the styling is going to be flex direction row so with this v within this view we need an image component source is going to be icons star style is going to be with attend height 18 thin color colors colors.primary margin right equals to sizes.padding alright so we have the star image and next to the star we are going to render a text component that shows the rating so restaurant great thing style equals to font style body tree all right perfect so underneath this view underneath the name and rating view we will render the rastoran's name all right so go back here i'm going to create another text component so text this one is going to be res dorin so text we have restoring name and the style is going to be color colors.gray fonts dot body four perfect all right so now we need to create two buttons underneath right so let's come over here i'm going to create okay this one's going to be buttons and i'm going to create a view over here with some styling flex direction equals to row margin top equals to sizes dot padding times two justify content equals to space between all right so within this view we have touchable opacity and i'm going to give it some styling style equals to height 50 with sizes dot width times 0.5 minus sizes dot padding times six background color equals to colors.primary align items equals to center justify content equals to center and border radius equals to 10. all right so within this button within this touch opacity i'm going to create a text component and render call and here i'm going to style this text component so it's going to be h4 and color is going to be white oops background color is going to be primary okay now since we need two buttons over here i'm just going to copy and paste it here and i'm going to change the text to you know um maybe cancel and the background color this time i'm going to change it to secondary cool now let me see if i can get rid of this with property over here see if it's doing anything good and what if i change it to flux one all right so let me see if i can set the margin right okay perfect and now for the call button i'm going to create an unpressed prop that will basically navigate back to home all right since we are not implementing the call function in this project so on press navigation dot navigate back to home and here for this cancel button i'm just gonna go back to the previous screen so come over here dot go back okay all right so let me just get rid of this okay all right guys we are almost done so what we are going to do next is this zoom in zoom in and zoom out buttons all right so let's see how we can do this same thing i'm going to render a new function over here render buttons and i'm going to create this function over here so render buttons and i'm going to return something so i'm going to return a view i'm going to give it some styling so um position absolute bottom sizes dot height times 0.35 right sizes dot padding times two width equals to 60 height equals to 130 and justify content equals to space between and now within this view i'm going to create a zoom in button and also zoom out button so within this it's going to be touchable opacity and the styling is going to be with 60 height 60 border radius 30 background color equals to colors.white align items center justify content center and this one is going to be plus icon so um the style is going to be fonts body one so same thing i'm going to copy and paste it over here and change the text to minus all right so we have the buttons over here next we need to add in the functionality so whenever i click on the zoom in button i'm going to call the zoom in function and same thing whenever i click on the zoom out function sorry zoom out button i'm going to call the zoom out button all right so i'll create this two functions over here okay right above the random map function so i'm going to create zoom in and also zoom out so for the zoom in i'm going to create a new region goes to latitude region.latitude longitude region dot longitude latitude delta region dot latitude delta divided by two longitude delta goes to region dot longitude delta divided by two and here i'm going to set the region new region and i'm going to use the map view reference and call the animate to region method new region 200 okay now i'm going to copy this whole thing and paste it over the zoom out function and change the divide to multiply all right save it let's see if it works so whenever i click on the plus button it should zoom in like this whenever i click on the minus button it should zoom out like this alright so we have completed the map the icons header bar zoom in and zoom out buttons and also we have included the what you call delivery info underneath here all right so let me see if i miss out anything else well i think that's about it let's go back here if i click on the cancel button it should go back you may see a bit lagging here um that's because i am currently opening a lot of different programs you know i'm recording my screen i'm recording my voice a lot of things going on that's why it's a bit heavy for my laptop to handle but it shouldn't be happening on your site so if i go back to the delivery screen and if i click on the call button it should never get back to home all right guys we have just coded this good looking food delivery app based on the design created by ilia on dribble.com the full source code for this project is available for free on buyprogrammers.com and i have included the link in the description below now this project is not easy all right we have spent hours and hours to work on it so if you like the video if you think you have learned something new from this video you'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: 326,877

Keywords: React, ReactJs, React Native, Mobile, Development, UI, ecommerce, learning, mobile frontend, mobile ui, react native ecommerce, react native project, react native ui, react native app, react native tutorial, react native ui design, speed code, let's code react native, app development, maps, google maps, apple maps, map marker, route, custom marker, custom route stroke, food delivery app, grab clone, uber eat clone

Id: diUDjNwZ8Lg

Length: 146min 23sec (8783 seconds)

Published: Mon Dec 07 2020