REACT NATIVE FOOD APP UI

guys this is hiking welcome back to the channel so in today's video i'm going to show you guys how to build this food up you is a react native so stay tuned so this is going to build in this video let me walk you guys through the app so right here we have the onboard screen we have an image right here and below the image we have a test of delicious food below the text you have on that text over here and right here we have the slider indicator note this indicator is actually static we are not implementing any sort of slider so that's why i'm leaving it i'm static so below the indicator we have i'm a guest direct button once i click on it it's going to cost a whole screen with a button tab navigator over here we have a test of hello arrays the text of what do you want to eat and a profile image right here below it we have a search input and also we have a sort button right here and below it we have the list of categories and once i click on it it's going to select the category which has no effect on this card below the category we have a card the food image food name ingredient price and a add to card button and once i click on the card it's going to go to the details screen with the image of the food the name of the food details of the food a favorite icon and add to cart button once i click on this back arrow button it's going to take us back to the home screen and once i click on this card icon it's going to cost a new tab a list of food in the card the test of total price the total price and a checkout button so this is what i'm going to build in this video i'm making the project available for you guys to download i'll put in the link in the description down below so if you like this kind of video please like and share and see if not subscribe to the channel please consider subscribing turn on post notifications download a new video and that's why i do let's start coding okay guys so welcome back it's already created a project and also have started the project so i'm letting okay guys totally structure the project so right here i created a folder called src inside the folder i created a folder called asset so this folder is to hold the um asset of the project that is the image of the project and over here i created a folder called categories which is going to hold the image of the categories right here i create a folder called const and i clarify categories so inside this file is a list of categories and it's just an array of objects so each object contain the id of category name of the category and the image of the category and i exported the categories over here so i created another file called colors.js and this is just the colors of the app the white color that color primary color secondary color light color and the gray color then i sprayed the object over here so right here i created a file called foods.js so these are the files that hold the list of the food this is just an area with object of each food so each object contains an id name of food ingredient price and image of food so i created on that food are called views so inside is useful that we have a folder called component so this is just for the component for the external components i created for that call navigation so this folder is holding the button navigator so we have um a bottom navigator in the app and also i created a folder called arm screen so this is just the photo that is holding the screen of the app the cast screen detail screen home screen and onboard screen so inside the app.js added the navigation container and over here added the status bar um component this is just for the status bar and also i change the background color to white and also the bar style content to dark so that the items in the status bar will be able to show up so i did the onboard screen so this is just the first screen and right here i added the home screen so this home screen is the bottom navigator so the button navigator is the component that is going to hold all the tabs then below it either the details screen so that's all for the storage project let me run the app okay guys i just run the app and right now i have a blank screen with the test of on board so this is the onboard screen so i want to first start working on the onboard screen so right now i'm going to open the onboard screen and file i'll start working on it so this is the text that is showing up right here i'm going to get rid of the text i'll start working on it right now so if i start working on the onboard screen let's take a look at the ui so right here we have an image this image is going to be inside the view so we're going to add a view before adding view we are going to start the um safe area view so add a style inside this tab i want to give it a flex of one this is just for the view to um take the available space so give it a background color of white say background color and get it from the colors object so white and that's all for this type for the safe area and view so inside the safe area view we are going to add a view for the image so save you but i want to add a style to the view of this style we'll give the height of 400 pixels all right now i want to add the image so add the image component we are going to add a style for add the stylus let's add the um source to the component so i'll say source and i want to require the image so this image is going to be from the assets folder and it's going to be on board image so say on board dot png and this is the image over here this image right here um right here we are going to give it a width of 100 percent so i want to take the full weight of the screen then i'll give it a resize mode of content let's say resize mode give contain so right now we have the image but we have the image at the center of the screen so i want the image to be at the top of the screen so to do that i want to add top of -150 pixels so this is going to push the image inside the screen that's all for the image the next step i want to um add this delicious food test to it so to add the text we are going to add a view so this view is going to hold the protest delicious food text and this text below so i'm going to open the project and over here we're going to add a view so below the view of the image you add a view [Music] and i want to add a text component so add the text which is delicious food and we are going to style the text so we give it a style we give it a font size of arm 32 pixels a font weight of both a text alignment of center so i want to center the text and that's all for this text so right now we're going to add the other text so i want to add a text component and i'm going to get the text right now i'm going to paste the text right here and we are going to start the test component so give it a style we get imagine top of arm 20 pixels plus imagine top 20 pixels a font size of 18 pixels text alignment of center also something that it takes and a color of gray so say color and get it from the colors object so called loss dots gray and i think that's all for this text so um let's take a look at the ui so over here we have some padding between the text so we are going to wrap this view inside the container and we are going to give it a style of test container so over here i'm going to add a view we should have add that um earlier so i want to get this view over here now paste it right here then we are going to add a style i will say style dot test container so i want to create this tile right now so right here i'm going to create this style i'll say const style scrolls to style sheets so we're going to import the style sheet concept dot create i'll add the um style so for the test container we are going to give it a flex of one because it flex one will give it a padding horizontal 50 pixels so the padding horizontal 50 pixels justify content of a space between and a padding bottom of 40 pixels just a padding bottom and give 40 pixels so right now we have the padding and that's all for the test container so the next step i want to add the indicators to this screen so this is the indicator i want to add right now this indicators over here so for the indicator we are going to add a view so this view is going to hold the three indicators so add a view then all these indicators are going to be a view so i'm going to open the project and over here i'm going to add the view so add the view and i'm going to give this style also so this style we'll call it indicator container so the indicator container right now i want to add this type so i want to copy this style and over here we'll add the style so give the height of arm 50 pixels a flex of one justify content of arm center a flex direction of row so i want to um position the indicator from left to right so the flex direction row not flex flex direction and we'll give it a align items of um center so the align items give center and that's all for the indicator container so right now i want to add the indicators so right here i'm going to add a view and we are going to add um three indicators which two are of same style and one is different style so the first indicator is going to have a different style why these two indicators are going to share um similar styles so let's add the first indicator that's the one with um its own style so add a style you say dot um current indicator so we are going to give it a name of current indicator all right now i want to add this style so for the current indicator i want to give it a height of 12 pixels so say hi 12 pixels a weight of 30 pixels ebola is just of 10 pixels then we're going to add the background color to it let's say background color of um colors dot primary and imagine horizontal five pixels let's imagine horizontal five pixels i'll hit save and see so right now we have the first indicator let's add the two indicators i'm going to duplicate this and i want to change this tie to um just indicator so i'll get rid of this current now change it to indicator so i want to add this type of indicator right now over here i'm going to add this style and for this indicator we'll give the height of 12 pixels also a width of 12 pixels then i'll give it a powder radius of 6 pixels want a round shape to see whether it does give 6 pixels i'll give it a background color of gray we get the um color from the colors object we'll say dots gray and we'll give it a matching horizontal or five pixels imagine horizontal five pixels and that's all for the indicator so right now we have the um indicators so the next step i want to add is get started button so to add the button we are going to create under component for the button since we'll be making use of this button in different screens of the app so making of this same button in the onboard screen will make use of the button in the um details screen and the card screen so i want to create a standalone component for the protein so i'm going to open the folder and over here inside the component i want to create a um a file called buttons.js so say buttons.js so this is going to be for the um button component so inside the button.js i want to import react then we are going to create the component right now so say const we create a component called um primary button say primary button and this component is going to take in some props so i want to take in um the title of the button so i want to pass in a title and also we are going to pass in on press function dice optional so say i'm type 2 and also we're passing the um on press function so this unpressed function is actually optional so we are going to set it to anonymous function so in case if we don't pass in um an unpressed function won't run into any errors so set it to a function so right here i'm going to return a touchable opacity component and before continue styling the um button i'm going to export the button right now so i want to export it so i'll be exporting the button using the default keyword because i want a spot multiple button so i'll be creating under button call secondary button later on i'll say primary button and i'm going to export it so inside the onboard screen right here we are going to um import the button so below this view that is holding the indicator content now we are going to add the button for the primary button or import it right here and we are going to pass in the title so the title is going to be get started and we're passing a function which is going to be on on press function and it's going to navigate to the home screen so we are going to make use of the navigation i'll say navigate i'm going to pass in the home screen so uh once you click on the button it's going to take us to the um home screen so right now i want to start working on the button so um for the total opacity component we are going to add the active opacity to um 0.8 so i want to increase the active opacity and also we are going to um add the impress to it which is going to be this compressed function over here cutting from the props so just pass it right here inside the touch of opacity component we are going to add a view so add a view so i'm going to add this style i'm going to call this style and btn container say btn container and over here we're going to create this style so create this time say style custom style sheet so important style dot create so inside the style sheet we are going to add the bit and container style so say ptn all right now i'm going to start styling it so give it a background color of colors dot primary and we are going to give it a height of um 60 pixels we'll say height 60 pixels we give it a butter radius of um 30 pixels a justified content of center so on to center the text and also an align items of center so right now we have the button showing up the next step i want to add the text in the button so to add the text i want to add a text component so right here add a text component and inside the component i want to add a title so this is the title pass from the props so add the type tool and also right now i'm going to style the text component so for it we're going to give it a style of title and over here we're going to create this type so i'll say tie to i'm going to give it a color of white so i'll say colors dot white we give it a font weight of board and a font size of i'm 18 pixels so i'm actually we have to import the test component so i'm going to import it right now and the error should go away right now so i think that's all for the onboard screen so um let's take a look at the ui so right now i'm going to start working on the home screen but if i walk on the home screen we have to set up the bottom tab navigator so actually i make use of the react navigation library for the navigation and also making use of the vector icon library for the icons i should have mentioned that earlier so i'm going to open the navigation folder and inside the folder we are going to um open the bottom navigation so over here we are going to add these screens for the um bottom navigation so we are going to add these screens so inside the tab dot navigator we are going to add these screens right now and other screens will make use of the tab object so say tab dot arm screens and which is going to take a name so the first screen we want is the um home screen so give the name of home screen then add the component which is the home screen component so input the home screen component and also we are going to um add an option to the tab so say option and we are going to add the tab icon close the tab icon so this tab icon takes in a function then we are going to bring in the props of color because we are going to make use of the color so say color and over here we are going to um return the icon so i'm going to get the icon from the vector icon and the icon i'm going to make use of for the um home screen is the home arm icon so give the name of home home dash field so let's save and see so right now should be able to navigate to the um home page so right now if i click on the button right here it's going to take us to the autumn navigator so if i click on it right now in the bottom navigator the next step i want to start these tabs over here that is the tab icon so inside the bottom navigator so we are going to change the icon color so say color and give it the color we get from this prop and also we are going to um give it a size of 28 pixels what's this size and give it 28. so right now we have the icon so i'm the next step i want to start the tab navigator itself so i'm going to change some styling needs so right here i'm going to add the tab option so the tab option then add the style props so over here i'm going to give it a height of 55 pixels so we are working on the tab navigator right here we'll give it a border top width of zero pixels i want to get rid of this um water over here so say border top width i'll give it 0 pixels so this is going to get rid of the border over here and also we are going to give an elevation of zero so get rid of the shadow also so right now we no longer have any shadow so the next step i want to get rid of this um this label so to get rid of the label we say show label and set it to false then also we add the active um tint color so want to change this color to um the primary color once the tab is active so the activating color i'll set it to um colors dot primary all right and that's all for this style for the tab navigator so the next step i'm going to duplicate these screens and i'm going to change this to its corresponding tabs so i'm going to duplicate these four times i think so i want to change them to the corresponding um tab and icon for the next screen i'm going to change the name to um local mall so since you're not going to work on the on on this screen i'm just going to leave the um home screen component then for the icon i'll change it to i'm look at that small so say local a small we are going to skip the third tab because i want to add a custom style to it and over here i'm going to duplicate this then for the fourth tab i want to give the name of favor right and for the icon also i want to give it a name of favorite i am going to leave the component as home screen then for the last tab we are going to give it a name of cards i am going to import the card screen so say cards screen so um let's import the card screen over here so for the touch screen we change name to search and right now should be able to navigate to the home screen okay guys so right now we have the tabs so the next step are going to add the customs type to the middle tabs over here so that is this um custom search button so to do that inside the tab of search we are going to add a view over here add a view then i'm going to take this icon and put inside the view so right now i'm going to start styling the view so i want to add a style we'll give it a height of arm 60 pixels a weight of 60 pixels then we are going to give it a justify content of center so i want to center it and align items of center then we are going to give the background color of white so the background color say colors dot white then we'll give it a border color of primary so say border color say colors dot primary and also we're going to add about that way to eat so say border weight and give the border width of two pixels so right now we have the button with the border so the next step we are going to um give it a border radius of 30 pixels that were able to have the round shape so simple radius and give 30 pixels then also we are going to change the icon over here so where i would change this icon to search then for the icon we are going to give the color of primary so say call loss dot primary then right now i'm going to position the view to the top so over here will add the top i'll give it a minus 20 pixels so this is going to position it to the top then also i want to add an elevation to it so it's elevation and give it five so i think that's all for the size tab button so right now we are going to work on the home page but before we do that we are going to change this icon to a cat icon so forgot to change the icon so over here we change it to um a card icon so say shopping cart dash cards all right now we have the cat icon so right now i'm going to start working on the home page so i'm going to bring up the ui so for the home page we have a text here and also we have this text and we have this um profile image so this is going to be in a view with instead of header inside the home page i want to get rid of the text and also i'm going to start styling the um save ar view so add this type we'll give it a flex of 1 then we're going to give it a background color of white so see background colors we'll get color from the colors object i will say white that's all for the safe area view so right now i'm going to add the view for the header so save view then we'll give it a style of header so say style dot header so right here we're going to create a style then we're going to add the header style for the header style i want to give the margin top of i'm 20 pixels because imagine top will give 20 pixels we get the flex direction of row a justify content of a space between and a padding horizontal of arm 20 pixels and that's all for the header style so the next step are going to add the text so for this text i want to add a view which is going to hold the port text inside the view we are going to add and dive for the hello and arrays text so this hello and arrays are going to be a separate text component then below it i want to add this test component for this text so over here we are going to add the view then inside the view we are going to add a live view so this view is going to be for the um hello and arrest text so add the text component without added text i want to add this type to this view then we'll give it a less direction of row so inside the text component you're going to add a text of hello then we are going to style it so right here i want to add a style we'll give the font size of um 28 pixels and that's all for this style so right now i'm going to duplicate these text and i'm going to change this to aries so i'll change this to aries and over here i'm going to add some style to it so i'll get the font weight of board and i'm going to give it imagine left of 10 pixels so i want a space between the um hello and arrays text and i hit save and right now we have the text so the next step i want to add the text of what do you want today so over here i'm going to add a test component that is outside the view that is holding the spot test or the test component inside the test component i'm just going to get the text and i want to paste it over here then we're going to style the text right now for the text we're going to give this style we'll give the margin top of 5 pixels a font size of 22 pixels so the font size 22 pixels we give the color of gray so say colors dots gray that's all for the um test component so right now i want to add the image component that is the image for the profile image so right here we're going to add an image component and we're going to add this source so this source is going to be from um the asset folder so say require and the image is the person.png so say person.png all right now i'm going to start the image so i want to add a style but give the height of 50 pixels a width of 50 pixels also then we'll give it a border radius of 25 pixels for that radius of 25 pixels all right now we have the profile image the next step i want to add is search input and also this sort button to add the search input i want to add the view so the view is going to hold a view which is going to hold this search icon and the text input then outside the view we are going to add a view which is going to hold this um icon so over here we'll add a view so outside the header view where the view and we are going to style the view so we'll give it a style we'll give it a margin top of 40 pixels a flash direction of row then we're going to give it a padding horizontal of 20px and that's all for this view so right now i'm going to add the view that is going to hold the icon and the search input so right here we add a view and we are going to start the view so give this style of input container so say style side dot um input container all right now i'm going to create this type so for the input container we're going to give it a flex of one a height of around 50 pixels a border radius of 10 pixels let's see what that radius then we are going to give it a flex direction of row and a background color of light so say background color say colors.light and we are going to give it an align items of center and a padding horizontal of i'm 20 pixels you see align items center padding horizontal of 20 pixels and that's all for this style so right now i want to add the items inside the view so i want to add the icon and let's make sure we import the icon correctly so the icon is imported correctly i'm going to give the icon a name of search so i want the search icon then over here we are going to import the test input so we import the text import and we are going to style the icon so i want to give it a size of 28 pixels and right now we have the icon so the next step i want to type the text input so give this text input a style of flex of one and a font size of 18 pixels font size 18 pixels and we're going to get a placeholder of search for food so add a placeholder i'll say search for food so that's all for the start input so the next step i want to add the um sort button so outside the input content now i'm going to add a view i'll give it a style of um sort button so say style dot sort ptn then inside the view we are going to add the icon so the icon we'll give it a name of tone we'll give it a size of 28 pixels and we're going to give it a color of white so colors dot white and right now i'm going to start the um sort button so for the sort button we are going to give it a weight of 50 pixels so say weight 50 pixels we get a height of 50 pixels also imagine left of 10 pixels then we are going to give the background color of primary so say colors or primary and we are going to give it a border radius of 10 pixels so say for that reduce 10 pixels then justify content of center and align items or center this to center the icon so um that's all for the input and the sort button so right now i want to add the list of the categories so for the list of categories i'm going to create another component for the categories over here we'll create a component called unless categories but before we do that we're going to add a state so we have to track the current category selected so say cost or add the state you say selected category category index and add the set selected category index to set the categories over here i will set it to a state so say react dot use date so use the use state hook and for the default index will give zero so right now i want to add a list categories component so say cost these categories inside the function we are going to return the scroll view this is going to be inside the scroll view so i want the list to be able to scroll and over here i want to map the current list and we are going to style this list button over here so right here we'll add a scroll view so we are going to change the scroll direction to horizontal and also we'll give it show horizontal scroll indicator we set it to false so i want to get rid of the scroller then now we are going to add this type to the scroll view so say content container style and we are going to give it a style of um category list container style so right here we add this style and for the style we add a padding and vertical of 30 pixels it was a padding vertical give um 30 pixels we give align items of center line item center and a padded horizontal of 20 pixels just a padding horizontal we give them 20 pixels and that's all for this style so right now i want to add the categories to add the categories i want to iterate through the list of categories which is this category over here so inside the cons folder this file holding the list of categories so i will say categories dot map so um let's import the categories let's say import categories import it from cost folder and we put the categories so right now people to use the categories so inside here inside here we add a function or bring a category and the index then over here we are going to add it touchable opacity to touchable opacity for the total opacity we are going to add the key props star reaction yellow at us i'll give the index and here we are going to add um active opacity so active opacity will give it um 0.8 so inside the total opacity component i want to add the view component right here and for the view we are going to add this style so give it a style and i want to give it a style of category ptn so actually i want to spread this type because i want to apply other style to it so say category ptn so right now i'm going to create the category btn style for the category btm i want to add a height of 45 pixels so say height we need 45 pixels create a width of 120 pixels imagine write off seven pixels so it's imaging right get seven pixels you get a radius of 30 pixels but i radios 30 pixels align items of center a padding of horizontal of five pixels and a flash direction of row less direction give it row so that's all for the style right now so the reason it's not actually showing up right now because we have not added um any background color but for the background color we are going to add it depending if the category is selected so i want to add two background colors we are going to change the colors depending if it's category selected or not so if the category is selected we are going to add the primary color else if it's not selected we are going to apply the secondary color so in order to know if we selected will make sure that the index is close to the selected index over here so to do that over here we'll add the background property and right here i'm going to add the condition so say if selected category index is goes to the current index which means it's selected or added um primary color i also add the secondary color so say colors dot secondary so right now if i hit save it should show up so actually it's not showing or because we've not added the um the component so over here we are going to add a component so add a component right here as a list categories component all right now to show up so right now we have the um list of categories so actually this is centered in the screen because the list of categories actually not in the view so it's a scroll view component so uh if we wrap this in a view is going to get this fixed so i want to print this and i'll put it inside this view right here and this should fix it okay right now we have the categories positioned correctly so the next step we're going to start adding the name of category and the image of the category so inside the view we are going to add another view for the um image so add a view this view we are going to give it a style of category btn image con for container so say style i'll give the style of um category btn image con all right now i'm going to tile the view so this is actually this white round shape over here that the image is tucked on top so over here i'm going to add this type i'll start styling the view so for this style give it a height of 35 pixels a weight of that five pixels also give it a background color of arm white then we'll give the border radius of 30 pixels so this is the um view right here so the next step i want to center um the element that's the image so i want to keep the justify content of center and align items of center so that's all for this style so right now i'm going to add the image that's the category image so inside the view you're going to add image component so say image then over here i'm going to give it a source so this source i want to get it from the category so that is the category right here then i will say dot image and let's see so this is the image right now so we are going to start the image so add a style we give the height of 35 pixels a width of 35 pixels also and we give the resize mode of cover so say resize mode give it cover so right now we have the image so the next step i want to add the name of the category so outside the view that is holding the image you add a test component so inside test component i want to add the name so say category dot name so um right now we have the name so the next step i want to style the category so i'm going to give the font size of 15 pixels a font weight of bold will give it imagine left of 10 pixels and for the color we are going to change the color to white if the category is selected else we change it to the primary color if it's not selected so right here we add the color property so the color and say selected category index is close to index so if the category selected will apply the white color so the colors are white else will apply the primary color so the colors are primary so right now we have the name with different colors applied to the category if it's selected or not so the next step i want to set the selected category index to the current index which is going to select the arm category so to do that inside the unpressed props we are going to call this set selected category index and we are going to pass in it index which is going to select the category so right here we'll add on press prop and inside the props we are going to add a function which is going to call the set selected category index function and over here we are going to pass the um correct index so right now once i click on the category it's going to select it so that's all for the category list the next step we're going to add the card to the screen so to add the card you are going to create a component for the card so right here i'm going to create a component called card i'll say card and before we start working on the component we are going to add a flat list um component to list the card so over here i'll add a component the flat list and i want to add some props to the flat list so we are going to get rid of the um scroll bar so to do that we say show and vertical scroll indicator will sell it to false then we'll give it a num columns of two so once um two cards in each row just a num columns we set it to two and give the data of food to say foods so we are going to import the food that is the um this food file over here so right here i want to import the food i'm going to duplicate this category change changes to foods and over here i'll change it to foods so for the render item we are going to give it the card component so bring in the item we are going to call the card component and we're going to pass in a props of food which is going to be the um item so right now we'll start working on the card so inside the card we're going to return a view so add a view component and inside the view component you're going to give it a style of card so say style dots card right now i want to create a style for the card style we are going to give it um a height of 220 pixels so say hi 220 pixels it gives a weight of card weight which are going to create right now so say card weight and for the card width is going to be the screen width so take the screen width we'll divide it by 2 and we subtract and 30 pixels from the screen so basically we are going to give each card and half of this screen then for the 30 pixels we want some space between the card so to add the card with we are going to um get the screen width and to get the screen width we say const i want to pull out the screen width from the dimension so say dimension so import the dimension i'll use the method get i want to get this screen then right here i'm going to create the card width so for the card read let's create a variable first it's going to be the width divide by 2 then subtract from 20 not 30. so um right now we have the card width actually we forgot to return this view so let's return the view so we are going to start styling the card we give the card imagine horizontal of 10 pixels so let's imagine horizontal 10 pixels a guild imaging bottom of um 20 pixels imagine top of 50 pixels so it's imagine top 50 pixels let's save so right now we have the card but actually it's not showing up because we don't have um any element inside the card let's add the border radius elevation and background color so right now adipoda radios we'll say border radius we give it 15 pixels an elevation so want some shadow give 13 pixels i'll get the background color of white to say colors dots white so um right now this is the card so the next step will start adding the element inside the card so i want to add this food image the name the ingredient price and this art card button so i want to go to the card component and inside this view i want to start adding the elements so right now i want to add the image to add the email you're going to add a view so add a view and we're going to style the view so for the view i'm going to give it an align items of center all right now i want to add the image to the view so actually let's bring in the props so bring in the food and props so say food inside the view add the image component then for the image component we are going to add the sauce so add the sauce which is going to be the food dot image right now let's take a look at the app so right now i want to start the image of the food so add a style right here and for this style i want to give it a height of 120 pixels we give it a weight of 120 pixels also and that's all for the image style the next step i want to position this image food to the top and to do that over here at the view that is holding the image component we are going to add the top property then we are going to give it a minus 40 so it is going to move the food image to the top so right now we have the food image at the top the next step i want to add the food name so for the food name i want to add the name and the ingredient inside a view so right here we'll add a view and we're going to start the view so give the view imagine horizontal of 20 pixels so add a style imagine horizontal will give it 20 pixels and right now i want to add the food name and the ingredient we'll add a test component then we'll add the food name so to add the food name we say food get the food object then we get the name so right now we have the food name so the next step i want to start the test component so i want to give it a font size of 18 pixels the font size 18 pixels i'll give it a font weight of both so we are done with the food name right now i'm going to duplicate this and i'll change this to ingredients so change this to the food ingredients and also i'm going to style the um the text so i want to change this to 14 pixels we'll change the color to gray so say color i'll say colors dots gray then we are going to give the imagine top of um two pixels so it's imagine top we give two pixels and that's all for the food name and the food ingredient so let's take a look at the ui so right now we're going to add the price and the add to cart button so to do that we are going to add a view so this view is going to hold the price and add to cart button over here below the view that is holding the both text we'll add under view and inside the view we're going to start the view so start the view before start adding the text so add a style we'll give the margin top of 10 pixels imagine horizontal of 20 pixels then we give it a flex direction of raw and we give it a justify content or space between so justify content space between so that's all for the view right now so next step i want to add the price over here we'll add the test component and for the test component to add a dollar sign then we'll add the price so to add the price we get the food object our added price so dot price and right here i'm going to start the test component so to style it you get a font size of 18 pixels font size a font weight of bold and that's all for this um style so the next step we're going to add the add to card button for the add card button we are going to add the view so this view is going to hold the icon so for this view i want to give it a style of um add to card so say style dot add to cart um btn so right now i want to create this style for the art card btn style we give it a height of 30 pixels a width of 30 pixels also a border radius of um 20 pixels we give the background color of primary so say colors dot primary just give the justified content of center and align items of center so i want to center the um icon run items center and that's all for this style so right now we have the art card button which is just a view so the next step i want to add the icon to the um view over here inside if you add the icon component we give the name of add then we're going to give it a size of 20 pixels then we'll give it a color of white so say colors dot white and that's all for the card over here so right now i want to be able to navigate to the details screen so this screen once a user click on the card so to do this i want to add a touchable highlight and we'll add a props then we'll use our navigation to navigate to the details screen actually i make use of touchable highlight instead of touchable opacity because i want to be able to set the underlay color by ourself which the touchable opacity does not have so right here we are going to wrap the card with a total opacity highlight so i'm just going to add the touchable opacity highlight over here so you touch a ball and i'm going to get this card view i'll cut it then i'm going to paste it right here then for the touchable highlight we are going to add the underlay color we'll set it to white so the reason we are adding this on the left color is because of the elevation so if you have to use the touchable opacity component the color of the underlying is going to affect the card shadow so it's going to give us some weird effect that will make use of the touchable highlight so we're going to change the underlay color to white then the active opacity is going to be um 0.9 and we are going to add the unpressed props to it so say on press or add a function then add a navigation so it's a navigation and let's bring in the navigation so right here i'm going to bring in the navigation let's say navigation dot navigate i want to be able to navigate to the details screen so i want to open the app.js and i'm going to get the name so this is the little screen right here i'm going to paste it over here and while we are navigating i want to pass the full details to the um details screen so to do that over here i want to add the food object so right now we're able to get the food details from the details screen all right now let's see if we'll be able to navigate to detail screen so right now in detail screen so um i think that's all for the home screen so the next day i'll start working on this detail screen over here so let me close some file i'm going to close the onboard screen and also the bottom screen and the bottom navigator and component so right now i'm going to open the details screen and start working on the details screen so for the detail screen let me bring up the ui i want to have a view which is going to hold this um this icon and this text over here so we're going to give it a style of header so i'm going to style the save area component i'll give it a background color of white say colors dot white and that's all for this style so the next step i want to add a header so add a view i'm going to give it a style of header so say style give it a style dot header and right now i'm going to create a style so let me bring up the emulator and navigate to the details screen so right here we'll create a style sources const style goes to stylesheet dot create i'm going to add the header style right now so for the header style we're going to add a padding and vertical of 20 pixels a flex direction of row let me navigate to the details screen so over here we give the align items of center then we'll give it a margin horizontal of 20 pixels so inside the view we are going to add the items so right here we'll add the icon we'll give the icon a name of arrow back dash ios so i'll say name let's say arrow slash back ios we give it a style a size of 28 pixels so 28 pixels and also we are going to add on press to it so be able to navigate back to the um home screen so i say on press before we do that i want to bring in the navigation and route so bring in the navigation navigation this is going to allow us to navigate back to the home screen then we'll bring in the route so with this route to be able to get the full details and to do that i'm going to add a variable call um item so this is going to hold the um the full details passed from the home screen so right here to get the food details we'll see route dot params so i'm going to add the um the navigation right here just a navigation dot go back and this is going to take us back to this screen so right now i'm going to console log the the item so that you guys can see so i'll say console.log and i'll console log the item so as you can see we have the full details right here so i'll get rid of the console log i'll start styling the the page so the next step i want to add a test component and add the text of details so add a test component and i'm going to import it measuring body component then we'll add the text of details so the details all right now i'm going to start styling the text so we are going to get a font size of 20 pixels so the font size give 20 pixels and a font weight of board and that's all for the um test component so right now if i click on this it's going to go back to the home screen so right now i'm going to start adding the items to the page so i want to add the image and we are going to add a view for this um section over here we add the name of the food this favorite icon the description of food and the add to cart i'm porting so to do that i'm going to add a scroll view so while we're adding a scroll view is for smaller screens so in case the um element in the screen overflows so right here i'm going to add a scroll view and i want to get rid of the scroll bar i'll set it to false inside the scroll view we are going to add a view for the image then we are going to style the view so add a style we give the view a justify content of center align items of center a height of 280 pixels so say height it's 280 pixels and right now i'm going to add the image itself so right here we're going to add the image we'll add image component then we'll add the source the source is going to be the item dot image then are going to give it a height of 220 pixels and a weight of 220 pixels so say hi 220 and give the width of 220 also so right now we have the image the next step i want to add this section over here that is this um details section to do that below the image this video is holding the image we are going to add a view with the style of details so add a view over here i'll give it a style of details so say style or details and right now i want to add this type so right here we add this die so we're going to give it a pattern horizontal of 20 pixels so say padding horizontal we give 20 pixels a padding top of 40 pixels then a padding bottom of um 60 pixels the padding bottom gives 60 pixels we use the background color of primary just say colors dot primary so this is the details section right now so the reason is not taking the full width right now because it's not added um any element to the view so once you add other elements it's going to take too many space so right now i want to add the border reduce to the top of the details view so say border top right radius we'll give 40 pixels and now i'm going to duplicate this and i'll change this to left to change this to left hit save right now we have the curve shape the next step i want to add the name of the food and this icon over here so to do that i want to add a view which is going to hold the name and this icon so right here inside the details and view we'll add a view i want to style the view so give it a style okay the flex direction of raw justify content of space between then and align items of center run items use them center so let's take a look at the app so right now this is the app so the next step i want to add the food name to add the food name we'll add a test component i'm going to add the food name from the item object this item dot name right now we have the food name so i want to style it right now so give this style we'll give the font size of 20 pixels font size 25 pixels a font weight of board then we are going to give the color of white so say colors and give it colors dot white so that's all for the name so the next step i want to add the icon so to add the icon we'll add the view then inside the view we are going to add the favorite icon so right here i want to add a view so add a view and i want to give the view a style of icon container say style dot icon container right now i want to add this style so for this style we give the background color of white colors dot white will give it a height of 150 pixels a width of 50 pixels also a justified content of um center align items of center also so i want to be able to center the icon and we give the border radius of i'm 30 so it is going to give you the round shape so let's take a look at the app so right now we have the end view for the icon so the next step i want to add the icon to the view so inside the view will add the icon component we say icon we'll give the name of favorite dashboarder social name we will write dash border give the color of um primary just a colors dot primary and we are going to give it a size of um 25 pixels and that's all for the icon so right now we are going to add the text that details of the food to the app so below the view we are going to add the test component and i'm just going to copy the text and paste it over here so right now i want to add a style to the text and we'll give it a start of details text sources style details text all right now i'm going to add this style so add this type over here we'll give the margin top of um 10 pixels so let's imagine top 10 pixels i want to give it a line height of 22 pixels with the line height 22 pixels a font size of 16 pixels font size 16 pixels and a color of white let's say colors colors dot white and that's all for the text so right now i'm going to add the button so right here below the text i want to add a view for the button so add a view i want to style the view so give it a margin top of 40 pixels then imagine bottom of 40 pixels also so for this button it's going to be a secondary button so right now we have to create a secondary um button component so inside the button.js over here i'm just going to get this primary button then i'm going to duplicate this and here i'll change the name to secondary button just a country then we'll export the component i'll add it to this i'll export it then inside the details screen right here we're going to add the button so inside this view add the secondary button i'll make sure we import the button so over here i want to import the button so right now i'm going to add a title props to the bottom which is going to be i'm add to cart then for the secondary button we are going to modify this style so over here i want to add another curly braces to this then we'll take this style and we're going to spread it right here so spread this style so we are going to modify the background color of the secondary protein so say colors.white is going to be a white color i will do the same for the title so i'll add the curly braces and i'll take this title style i'll spread it so i'll be able to add another style to it why for it to just change the color to colors dot primary yeah and that's all for the um button so let's take a look at the ui so this is the i right here so the last screen we are going to work on right now is the card screen over here then bring up the project and emulator and i'm going to navigate back to the home screen now i'm going to um close this detail screen and now click on this card icon it's going to cause the card screen and right now start working on the um card screen for the card screen we are going to start the save area view so give the background color of white so colors dot white and we'll give it a flex of one so inside the view you're going to add the header view this header is going to hold this back arrow button and also this um to so right here i'm going to create the view for the header so add a view i'm going to give the style of header for this style with a style dot header which i want to create right now so right here i'm going to create a style so i'll say const style style sheet dot create i want to add the header style for the header style we give the padding vertical of 20 pixels jose vertical give 20 pixels give it a flex direction of row align items of center and imagine horizontal of 20 pixels also so that's all for the header so right now you are going to add the items inside the header so inside the header i want to add the icon so right here we add the icon then we are going to give it a name of um arrow pack dash ios just a name arrow dash back as ios then we'll give it a font size of 28 pixels this size and that's all for the icon right here so the next step i want to add the text for the title so over here we add a text of cart and we are going to style the text four sided text let's import the text component to import the text component we get a font size of 20 pixels a font with of board font weight and that's all for the text so let's take a look at ui so right now i want to add this list of card over here so to do that i'm going to create a component called cards card so that you'll create a component call cards card for the card so i'll say card card and we're going to return a view so right now i'm going to add a flat list component in order to list the card so right here add a flat list component say flat list and i want to get rid of the um scroll bar so i'll say show and vertical indicator and set it to false then we're going to start the flat lid itself so say content container style will give it a padding bottom of um 80 pixels and that's all for this style so right now i want to add data so since we don't have under data for the card we are going to make use of the food list so right here we add the data and props i'm passing the foods then we're going to add the render item or bring in the item and i'm going to set it to the cards card and also add the props of item over here and give it the item so right now i'm going to start working on the card for the card we have an image over here the food name the ingredient price the quantity and these buttons over here so inside the view over here we add a style of um cards card so say style cards card all right now i'm going to add this style so right here i'll add the style and for this type i'm going to give it a height of 100 pixels height of 100 pixels we give it an elevation of 15. give the border radius of 10 so support that reduce 10 a background color of white so the colors are white so um this is the card over here the next step i want to give the margin vertical of 10 pixels imagine horizontal of 20 pixels will give a padding horizontal of 10 pixels a flex direction of row and align items of center and that's all for this um style over here so right now start adding the element inside the card so right here we'll add the image add image component give a source so um let's bring in the item so pass in the item props so the item then over here we get the source from the item object and we get the image so this is the image right now so i going to start the image component give it a style with a height of 80 pixels and a width of 80 pixels and that's offered image component so the next step i want to add the item name the ingredient and the price so the item name ingredient price are going to be in the view so right here i want to add a view and we are going to start this view so give this video a height of 100 pixels so say height 100 pixels we get the imagine left of 10 pixels a padding vertical of 20 pixels and a flex of one so right now we're going to add the text to it so the first text we are going to add is the item name so i will add a text component and inside here we get the item name from the item item dot name so right now we have the item name so i'm going to start the text so add this style with the font and weight of board to say font way to read bold then we are going to give it a font size of 16 pixels and that's all for the item name so the next step i want to add the ingredients so i'm going to duplicate this i'll change this to ingredient then we're going to start the ingredients so i'm going to get rid of this font weight i'll give it a font size of 13 pixels and a color of gray you see colors dot gray and that's all for the ingredients so right now i'm going to add a price so i'm going to duplicate this also then for this we change this to price and we'll change this to 17 pixels and we're going to give it a font weight of board say font weight good board and i'm going to add the dollar sign to it so add it right here so that's all for the name the ingredient and the price and right now we are going to add this button over here so to add the button we are going to add the view so the view is going to hold the quantity and below the quantity is going to hold the button so right here we are going to add the view and we are going to start the view so give it a style we need the margin right of 20 pixels just imagine write 20 pixels with align items of center and that's all for this style so right now i want to add the quantity so add a test component and i'm just going to give it three then we're going to start a test component so for this style we'll give the font and weight of board we'll give it a font size of 18 pixels and below it you are going to add the button right here so for the bottom we are going to add a view then inside the view i want to add the icons so these icons over here so over here i'm going to add the view we are going to give this view a style of action ptn so say style i'll give it um action btn all right now i'm going to create a style so for the action btn i'll give it a weight of 80 pixels a height of 30 pixels a background color of primary so it's a background color get it from the colors object the primary so right now we have the button over here the next step i want to give the other radius of 30 pixels then we give it a padding horizontal of 5 pixels just a padding horizontal give it 5 pixels we give the flex direction of raw justify content of center and align items of center so that's all for the action button right now we are going to add the um icon to it so inside the action um btn view over here we're just going to add the icon so as the first icon will give the name of um remove a size of 25 pixels the size of 25 then we are going to give the color of white so say color colors dot white to duplicate this icon and i'll change this to add for the add icon i hit save and see so right now we have the um button so the next step i want to add these text of total price and also the total price over here so to do that inside the flat list component we're going to add the lists footer components and props so right here we'll add the list photo component which is going to be a view then inside the view will add under view so we are going to style this view give the style with a flash direction of row adjusting 5 contains a space between then we give it imagine vertical of 15 pixels just imagine vertical 15 pixels and inside this view right here we are going to add the text that is the total price text so i want to add a test component and give the text of total price then right now i want to style the text so this detects over here so give the style a font size of i'm 18 pixels then a font rate of both then i'm going to duplicate this and i'll change the order text to 150 dollars so i'll duplicate this and i'll change this to 50 dollars that's for the total price so i'm right now we have the text so the next step i'm going to add um is tied to the list footer so right here we add the list footer style we give the padding horizontal of 20 pixels so right now we have the padding over here and we give it a margin top of 20 pixels so we have the margin so um the next step i want to add the checkout button so below this view that is holding the total price and the price we're going to add a view and we are going to start this view so give it imagine horizontal of 30 pixels and right now i'm going to add the button so make use of the primary button i want to give the title of checkout you see check out right now we have the button so um i think that's all for the cards um let me see so actually we forgot to add the navigation go back in this icon so right here i'm going to add the props so inside here i'm going to add on press so i'm going to bring in the navigation then we'll add the navigation and say go back and this is going to take us back to the previous screen the previous step rather so we have the onboard screen if i click on need it's going to take us to the home screen and once i click on any card it's going to cause to the details screen which is this screen over here this icon is going to cost the home screen and over if i click on this um card icon it's going to go to the cards tab so i think that would offer the video you find the video helpful please like and share and also if not subscribe please consider subscribing turn on post notifications let me find time upload a new video and i'll see in the next video thank you

Channel: kymzTech

Views: 26,680

Keywords: react native food app ui, react native food ui, react native ui design, react native ui design tutorial, react native ui tutorial, react native, react native tutorial, kymztech, app design tutorial for beginners, build app react native, build app react native android, react native ui, react native login screen, react native login ui design, react native app, react native project, react navigation, react native design, react native food delivery app, react native food app

Id: mSMvVWTu1iM

Length: 76min 11sec (4571 seconds)

Published: Tue Dec 29 2020

Reddit Comments

[u/hakymz]

Please guys check it out

[u/ppdawg123]

This is nice, great work!