PLANT APP UI USING REACT NATIVE

this is hiking welcome back to the channel so in today's video i'm going to show you guys how to build this plant shop ui using react native so stay tuned [Music] so this is what i'm going to build in this video let me walk you guys through the app so right here we have this text of welcome to plant shop and right here we have um this cart over here so below it we have this search icon with um this thought button which actually does nothing and we have the list of categories and once i click on it it's going to select the categories which actually has no effect on this card right now all right here we have a card showing the image of the plant if a right icon that um shows if the if the plant is like or not and below the plant image we have the plant name price of the plant and add to cart button which actually does nothing and once i click on it's going to cost on that screen with this header that has um this back button and if i click on the back button it's going to cause the previous screen all right here we have this card icon and over here we have the image of the plant so right here we have our mutation best choice the name of the plant the price tag and about us takes and below the about those tests we have the details of the plant and below the details we have um this a minus and a plus protein which in between of this bottle you have total number of the plants added to the cart and over here we have this buy button and that's all for the preview so i'm making the project available for you guys to download so i'm putting the link in the description down below and if you like this kind of video please like and share and also if not subscribe to the channel please consider subscribing turn on post notifications so i don't find time upload a new video and after i do let's start coding okay guys so welcome back so i already created a project and also i've got it of the boilerplate that i'm react native generate for us and also have structured the project so let me walk you guys through the structure of the project so why i created a folder called src which an asset folder this folder holds the plant image of the app and also i created a folder called cons that this divider holds the color of the app a white color dark color red color light color and a green color then i export the object and i created on that file called plants.js this was a list of the plants so it's just an array with an object for each plant each object contain an id name of plant price like and an image and also some information about the plants so i created enough for that core views which inside the fold i created folder called screens which is holding the screens of the app so the app has two screens the home screen which i've created the component and the test of home screen which is showing the screen right here and i created that component called details screen with a test of and details screen over here so inside the app.js i got rid of all the code and i've installed the react navigation for navigation and also i've installed the vector icon so inside the um return method i added the navigation container a status bar component for the status bar so i gave the status by a color of white which is actually showing here and also a bar style of dark content so that the items in the status bar should be able to show up all right here we created the um stack for each screen the home screen and the details screen so that's all for the structure of the project let's start coding ui so i'm going to open the home screen so start working on the home screen then bring up the ui so over here we have the welcome to plant shop and we have this um cat icon right here so this is going to be in a view with a style of header so i'm going to open the app i'm going to get rid of this and i'm going to replace it a safe area component so i'm going to start the component we are going to give it a flex of one we give the padding horizontal of 20 pixels and a background color of white so we are going to get the color from the colors object then inside the safe area widget we are going to add a view for the header so add a view and i'm going to give this style of header because this style dot header and below the component i want to create a style so say const style it goes to style sheets dot create we are going to add the header style before we start styling it we are going to import the style sheet so say style sheet all right now i want to start styling the header so we are going to give it imagine top of 20 pixels then we'll give it a flex direction of row and we are going to give the justify content of our space between so right now i'm going to start adding the elements inside the header that is the text and this arm icon over here so inside the header we are going to add a view this view is going to hold the both text guys welcome to and the plant shop text so we're going to add the text component and inside the text component we're going to add the text of welcome to then below it we are going to add on that text of plant shop then right now i want to study individual tests so first tidy and welcome to text so i'm going to add a style i'm going to give it a font size of 25 pixels front width of board and that's all for this text so right now i'm going to start the um plant shop text so give the style we'll give it a font size of 38 pixels font rate of board also any color of green we say color i want to get it from the colors object and that's all for the text over here so actually the imagine top in the header amp size should be 30 pixels so i'm going to change it to 30 pixels all right now let's take a look at the ui so on the next step i want to add this cut icon to the header outside the view that is holding the both texture i want to add an icon component icon we are going to import the icon component so import it from um from vector icons and inside the icon component you are going to give it an icon name of shopping cart i think we'll say shopping then we'll give the size of um 28 pixels all right now we have the icons we are done with the header part so um the next step we are going to start working on this input so we are going to add a view that is going to hold the input and the sort button below this view will add a view i'm going to give it a style so give the margin top a margin top of 30 pixels and the flex direction of arm row so i want to position the item from left to right and this is the view that is going to hold the search input and the sort button and in order to create a search input we are going to make use of a view david is going to hold the search icon and it's going to hold the um input itself so um over here we are going to add a view so say view then inside the view we are going to add the icon and give it the name of search right for the search icon right now we have the search icon so the next step i want to add the test input so import the test input i'm going to give it a placeholder of search and over here we are going to give the icon a size of 25 pixels and we are going to give it an imagine left of 20 pixels so say style margin left of 20 pixels and now we have the icon and the search input so um over here i want to add a style for this view that is holding the icon and the test input so i'm going to give it a style i'll say style dot search container container all right now we're going to create a style so below here we are going to add the search container we give the height of 50 pixels a background color of light so get it from the colors object i want to give it a border radius of 10 pixels so supporter radios 10 pixels and let's look at the app so right now we have this search in search icon and the search input so next step i want to give it a flex of one so it's going to take the the um available space so say flex not flex direction flex we'll give it one don't give the flex direction of row so that is going to position the item from left to right and now we have the input and the icon so we are going to align the item center so we want to center it vertically so say align items center and that's all for this style so the next step i want to start the the test input itself so over here i'm going to add this style all right now i want to create this style so below here we add the style of input that is for the text input we give the font size of 18 pixels a font weight of bold the font weight board and give it a color of dark say colors dot dark let's save and also we give it a flex of one and that's all for the input so the next step we're going to work on the sort button that is this button over here so i'm going to open the project i'll bring up the emulator and outside the search container we are going to add a view [Music] that is going to hold the icon so we are going to give the view a style of sort btn so say style dot sort ptn which are going to create right now then inside this view we are going to add the icon add the icon i am going to give it a name of um sort i'll give it a size of i'm 30 pixels all right now we have the sort icons we are going to style the view right now so i'm going to add this style so i'll say sort 80 and we're going to give it a margin left of 10 pixels so want a a gap between these such inputs and the button so say imagine left 10 pixels will give the height of 150 pixels a width of 50 pixels also we give it a background color of green so say colors dot screen let's save and see so this is what i have right now so next we are going to center the icon so the center of the icon give the justify content of center align items of center right now we center the um the icon so the next step i want to give the border radius of 10 pixels so able to have that curve shape so border radius i give 10 pixels and that's all for this time so right now i'm going to change the icon and color to white so right here we give the color let's say colors dot white and that's all for the input and the sort button so let's take a look at the ui um right now i'm going to add the list of categories so to add a list of categories we are going to create under component so actually you could make this um a standalone component but i actually want to keep this simple that's why i creating the component in the same file so before we create the component we are going to create a list of the categories so i'll say cost i'll say categories which is going to be an array of categories let me copy and paste the categories over here so these are the categories right now i'm going to create a component so create a component called um category list so say category list which is going to return a view right down and um right now i want to add the categories component below the um the inputs so let's see categories list and i'm going to start styling the component so we're going to give the style of category container so this view is going to hold the categories so say style what's category container i am going to add this style right now so below the salt button style this style is going to have a flex direction of row say flex direction row we give the margin top of i'm 30 pixels imagine bottom of i'm 20 pixels only justify content or space between and that's all for this style so let's start adding the categories to it so inside the view we are going to iterate through the categories so over here we'll say categories dot maps where i want to map through the categories say item for items then the index then over here we are going to add a text component which is going to show the categories and over here we are going to show the categories so just add the items which is going to show the categories right now and right now we have the categories popular organic indus synthetic so i'm the next step i want to start this text so actually i'm going to add two styles and the first is going to apply to all the categories and why the second style is going to apply to the category only if it's selected so over here we are going to add this style so default style i'm in order to add two styles i want to add this array so this array is going to hold the um list of styles so the first style i'm going to add is the category style so the second style is going to be applied only if the condition is true in our case if the setting category is selected so add the first type and this side is going to be called category test so say category text all right now i'm going to create this style so and also let's add a key so now react one to yellow does we'll say key and give it an index so here i want to add this style so for this type are going to give it a font size of 16 pixels a color of gray so color gray create a font um weight of board and that's all for this style so the next step i want to add the second style to it so um right now over here i want to add this style so the style we are going to create is going to be called category test selected and this style is going to be applied only if the condition is met so i will say category actually if i add this condition we have to add this state so it's going to help us to keep track of the selected categories so above here we're going to add the state so say cost category index is for the index selected index of the category and why this is going to be called set category index let's say category so as name implies it's going to be used to set the category index which is going to be um set to react dot u state and we're going to make the default index 0 which is going to select this unpopular category so right now i can actually add the um condition so over here we'll say um if category index is goes to the current index that is this index over here we are going to apply this style so say style dot category test selected all right now we are going to add this type so we'll go down and below this die we add the style and this type we are just going to add the color so just modify the current color and change it to green then i'm going to add the padding bottom off and 5 pixels a border bottom width of 2 pixels of 2 pixels and a border color of green also say colors dot screen hit save and right now can see we have the popular category selected that's because the default index is zero which um is this popular categories so right now we need a way to um set the categories once a user click on the category so to do that i want to wrap this test with the touchable opacity component and once exact click on need we are going to set the category index to this index over here so i'm going to add the component so say touchable opacity i'm going to get this text this test component and i'm going to put it right here then inside this component i want to add some props to it so actually i'm going to take this key i'll put it here then we'll add um an on press to it so say on press then you are going to set the category index to the current index all right now once you click on it it's going to set the category to the current index which is going to change the style of the cur of the selected categories so if i click on this as you can see it has changed its style i click on this it has changed style then also we are going to increase the active opacity of the component so the active opacity i'll turn it to 0.8 so this is actually going to increase the opacity of this component of the touchable opacity so as you can see we've increased the opacity and that's all for the category list component so um let's take a look at the ui so right now i'm going to add this card that is going to hold the plant image the name the price and this favorite icon so right now i'm going to create the cat component but before we do that i want to make use of the flat list component in order to list the plants cards so below the category list we'll add the flat list component inside the flat list component we are going to add some um prop so we are going to change the num columns to two so once i'm two item in each row so say two and also we are going to give it a data of plants so see data then we are going to import the plants so that is this file holding the various plants we say import plants from the cost folder how we import the plants so right now we have access to the list of the plants so um the next step i want to start creating the component the card component so over here i'm going to create a function which is going to return the component so we'll see const card and inside this function we are going to return a view so this view is going to have a style of um card so i'll say style dot card so right now i want to create this style but before grade is styled let's add the component inside the render so surrender items and give it the card um component i'll give the plant props which is going to be the item so we'll say item i'm passing the item over here i'm going to go back to the card component i'm going to receive the item so i'll say item and also make sure we return the view so return the view all right now we can start styling the card so in the card i want to give it a height so let's add the style we give the height of 225 pixels 225 pixels a background color of light so say colors dot light and also we are going to add the weight so we are going to create the width right now so we are going to make use of the um dimension to get the actual weight of the screen and also we are going to divide it by two so each card is going to take about 50 percent of the width i want to subtract 30 pixels from the width so it's going to give us space between the cards so alright i'm going to add a variable call width so say const with which is going to be a dimension so we get the dimension and i want to get the um screen width so say screen dot wheat then we divide it by 2 and subtract it by 30. then now we are going to go back to the style and continue styling the um card so we are going to give it a margin horizontal of um 2 pixels so let's imagine horizontal give 2 pixels border radius of i'm 10 pixels we give it a margin bottom of um 20 pixels so it's imagine bottom and a padding of 15 pixels so it's a padding of 15 pixels and that's all for the card style so the next step i want to give each row a style of space between so there will be a space between um these cards so to do that i want to go to the flat list component and give it a colon wrapper style of um justify content and i'm going to give space between and this should fix it so we have our space between each card so we are going to get rid of this scroll bar and to get rid of the scroll bar we'll say show vertica indicator and set it to false we have gotten rid of the scroll bar so the next thing we are going to add some style to the flat list so say i'm content container style will give merging top of 10 pixels and a padding bottom of 50 pixels and i think that's all for this flat list component so let's go back to the card component so let's take a look at the ui once again so right here we have this icon so this icon is going to be inside a view and below the view we are going to have this um image of the plant then below the image we have the name of the plant this price and the um add to cart button so let's add this icon right now so i'll open the project bring up the emulator then inside this style we are going to add a view so save view so this view is going to hold the icon so add the icon and the icon is going to be um favorite so say fair alright right now we have the icon so we give it a size of 18 pixels let's say 18 and we've just increased the font of the um icon so the next step we're going to push the icon to the left so um to do that over here i'm going to add a style so um we are going to give it an align items of flex and so say flex end so i'm just going to push the icon to the left so um right now we are going to add a view so actually this icon should be in a view so this view is going to be this um this round shape and inside the view we are going to have the icon so actually it should be a view so add the view [Music] i want to bring the icon in so put the icon over here so um for the view we are going to add a style to it and we are going to give it a weight of 30 pixels height of 30 pixels it will say hi 30 pixels we give it a border and radius of 15 pixels so we're able to get the round shape we give the align items of center justify content of center so this is going to center the icon inside the view so the next day we are going to add the background color to the view so actually this background color is going to be added to the view depending on if the icon is liked or not so if the icon is liked it's going to be a red background color and if it's not like it's going to be this um black background color so i'm making use of rgba so why we are making use of rgb instead of the hash colors is because this um the view is going to be transparent and with rgba the transparency won't affect the content inside the view so say background color and we are going to add the um what is it called the condition so say if plant dot like that is if it's true we'll add the red background color with an opacity of 0.2 else will add the black color and let's save and see so actually we are having an error so and this should be plant not item so let me get rid of this and you need to plant so as you can see we have the um we have the the view with the background color of red and sun with the background color of black so right now i'm going to also add a condition to this um icon so the the color of the icon is going to switch depending if the plant is light or not so right here i'm going to add the color props so say color i'll say plant dot like not light so if it's like we are going to apply the red color so say colors dot red yes we apply the black color let's call it a dark all right now we have um the red icon and also we have the black icon so um that's all for this icon right now so um the next step i want to add the image of the plant so outside the view as if you holding the icon will add under view for the image so save you i want to start the view so we'll give it a height of 100 pixels and align items of center and now we are going to add the image so add image component and we are going to give it a source this source is going to be the image of the plant that is this image over here so we are going to add it right now so say plant dot image and also we are going to start the component so say style we get a flex of one and a resize mode of content and that's all for the image let's take a look at the app so right now this is the image um actually this view should be outside the view that is holding this icon so we mistakely put it inside the view that is holding icon so i'm going to bring it outside and this should fix it so right now we have the image centered so the next step i want to add the [Music] name of the app below the image of the app so below this view that is holding the image we'll add a text component and we are going to add the name of the app so get the name from the plant object we'll see i'll get the name so we'll say dot's name all right now we have the name so we are going to start styling the name so uh we give this style we give the font weight of board a font size of 17 pixels and imagine top of um 10 pixels and that's all for the name so um the next step we're going to add this price and this arm button over here so the price on the button is going to be in in one view so i want to add a view that is going to hold the price and the button and below the text we are going to add the view right now so add the view then we are going to start the view before adding price so we give the flex direction of row not flex and basics flex direction row we give the justify content of um space between so one space between the price and the um the add to cart button so say space between and we are going to give it imagine top of five pixels so it's amazing top and give it five pixels so um right now we are going to add the price inside the view we are going to add the test component and we are going to add the um price so add is the last time and over here we are going to add the price we'll get the from the plant object and we'll say dot price all right now we have the price over here so we are going to start the price so we are going to give it a style of font size of i'm 19 pixels and font weight of bold and that's all for this style so the next step i want to add the add to cart and button so we are going to add the view then inside if you are going to add a text of plus sign so we say view we'll start the view we give the height of 25 pixels width of 25 pixels also we give it the background color of green say background color colors dot screen let's save so this is the bottom over here so we are going to add a portal radius of five pixels so say what are radios i'll give five pixels then we'll give it a justify content of center align items of center so be able to um center the item spot vertical horizontally so say justify content center align items and center save all right now we have the button so the next step i want to add the plus sign so this plus sign is just going to be a text component we'll add a plus sign and where i want to start the test component so give the font size of um 22 pixels color of white so we'll say colors dot white and font with of board so i hit save so right now we have the um add to cart button done so the next day we are going to wrap the component with a total opacity component and we'll add a function so once we click on it it's going to take us to um the details screen so right here i'm going to add a component called touchable opacity let's see touchable opacity and i'm going to get this view that is the card view i'm going to cut it and i'll paste it over here and right now you can see we can click on the card so it's actually doing nothing right now so i have to add the um press props and also add the function to it then we are going to make use of the navigation to navigate to the um details page so over here i'll say on press so inside on press we use the navigation so um let's import the navigation let's bring in the navigation so say navi k shown and we are going to use it right here so say navigation dot navigate and i want to navigate to the details screen so inside the app dot js over here where we create our route so as you can see we have the details screen with the name of details so i want to copy the name and we can make use of this name to navigate so add the name over here and while navigating we are going to send the details of each plant to the details screen so to do that over here i want to pass in the plant object so this is going to take this details right here and it's going to pass it to the next screen so we'll be able to get audited those from this object in the other screen and right now i'm going to save and click on it unless it's going to take us to the details screen so so actually we are having an error can't find the variable navigation i thought we brought the navigation in oh we made a mistake so we actually added the props inside the category list instead of the um the home screen component itself so i'll put it right here now click on it as you can see it has navigate to the details screen so right now i'm going to start working on the details screen so i'm going to bring up the ui so as you can see in the details screen we have the header the plant image and we have this section over here that has um different color that has the light color and this takes the plant name over here the price of the plant and about text and also you have the details of the plant so let's start using the details ui so i'm going to open the details.js and we're going to get rid of this so we get rid of the view we will replace the ttsafe area view component then and we are going to bring in the navigation so let's bring the navigation in just a navigation i'm bringing the route so this route is an object that holds a params object which holds the um the data we sent we sent why navigate to this screen so right now in order to get the data all we have to do we say cost and we are going to call it plant which is going to be goes to route dot params so this params is holding the details we passed from this um home screen right now so if i'm to console this right now let me console it so now you guys can see the details so i'll console log and as you can see we have the um details of each plant so i'm going to get rid of this console right now and let's start building the ui so i'm going to bring up the emulator we're going to start this safe area widget we give the flex of one so it's going to take the full width and the full height then we are going to give the background color of white say background color colors dot white and that's all for this type for the um save area um component so we'll start working on the header so i want to add a view review component i'm going to give it a style of header i'm going to create a style very soon so say style dot header so um right now i'm going to create a style so say style say const style it's going to be style sheet so i want to import the style sheet dot create all right now i want to create the header that's the header style let me now get to detail screen again and for the header style i'm going to give it a adding horizontal of 20 pixels so the padding horizontal 20 you get the margin top of 20 pixels also a flex direction of row and you justify content or space between so that's all for the header style so right now i'm going to add these icons inside the header so i want to add to icon so i'll say icon and let's import the icon correctly some material icons and the name of the icon is going to be um name not navigate i'm arrow back so i'll say arrow back then we are going to give the icon a size of um 28 pixels 28 pixels and let's save and see so this is the icon over here so i want to be able to navigate back to the home screen what is that press on the icon so to do that i want to make it of the on press and props and i'm going to make use of the navigation to navigate back to the um home page so to do that we'll say so add a function i'll say navigation dot go back so this is going to navigate back to the home screen once click on it so i want to save and i want to try this out if i click on it as you can see you can take all back to the home screen so right now i'm going to duplicate this icon and i'm going to change this to um shopping cart i think so say shopping and also we are going to get rid of this on press all right now we have the icon so that's all for the header so the next step we're going to add the implant image so to do that we're going to add the view i'm going to give the style of um image container says type dot image container and right now i want to add this style so we'll say image container and i'm going to give it a flex of 0.45 so it's going to take um 45 percent of the remaining height of the screen don't give it imagine top of 20 pixels justify content of center and align items of center so that's all for the style so right now i'm going to add the um image component itself so inside the view we are going to add an image component then we are going to give it a source which is going to be from the plant object and we give it the image i'm going to save and right now we have the image we are going to style it let's dive we'll give the resize mode of contain and reflex of one i'll hit save and right now we have the image the next step we're going to add this section to it so i want to add a view and i'm going to give it a background color of light and also we add the border radio so that we're able to give um this um curved shape below this view the image view we are going to add a view and we are going to give the style of details container so say style details container i want to add the style right now so um we are going to give it a flex of 0.55 so reflex 0.55 we give the background color of light say colors dot light then bring up the emulator we're going to give the imagine horizontal of seven pixels imagine bottom of seven pixels also so i'm able to get some space between the save area component so um below it you're going to give the border radius of 20 pixels imagine top of um 30 pixels and a padding top of 30 pixels and that's all for this details container so as you can see we have the curve shape and we have some space between the safe area and components so um the next step i want to add these best choice text right now so to add the text inside the details container we are going to add a view so um this view is going to hold this text and also it's going to hold this dash so this arm line is actually a view so it's going to hold this um line and also it's going to hold this text and we are going to style the view so give the style i'll give it a margin left of 20 pixels a flash direction of row and we are going to give it an align items of legs end so silent i think legs um end so right now i want to add the view that is the line so at the view and i want to give the style of line so say style type says style dot line over here we are going to add the style of line where i want to give it a width of 25 pixels height of two pixels height and we give the background color of um black of dark let's say colors dot dark let's save so right now we have the line so the next step we're going to add um imagine bottom of 5 pixels so it's imaging bottom 5 pixels and a margin right of 30 pixels and that's all for the style of the line so right now we're going to add the test component and we are going to add the text of um best choice let's say first choice then we are going to start the text right now so give the style we give the font um size of 18 pixels and a font width of board the font weight on git board and that's all for the text so the next step we're going to add the name of the plant so to add the text we are going to add the view and this view is going to hold the plant name and this price tag over here so add a view and we are going to actually style the view right now so i want to add a style we'll say style we give the margin left of 20 pixels imagine top of um 20 pixels also then we are going to give it a flex direction of row and justify content of um space between and align items of center so align items and that's all for the view so um the next step i want to add the test component then we'll add the name of the plant so add a test component and get the name from the plant dot name and that's the name over here then i want to style the text right now we get the font um size of um 22 pixels if want weight of bold and that's all for d for this style so right now we are going to add the tag that is the price tag so below the test component we are going to add a view so this view is going to be for this um price tags over here so um we are going to add this style so i want to give the style of price tag so this is type price tag right now i want to add this style this should be price tag not price so i'll copy this i'll paste it over here i'll start styling it i'll give the background color of colors dot screen a width of 80 pixels height of 40 pixels let's save so right now we have the um the view so the next step i want to add the round shape over here so i'm of this round shape right here to do that we are going to add the border top left radius we'll say border top left radius we give 25 pixels and also add about that top autumn radius i'm going to duplicate this and i'll change this to bottom so this is going to add the radius at the bottom of the view over here so if i save right now as you can see we have the radius right here so um the last property we are going to give this style is going to be the justify content and we are going to center it so that's all for this style um right now i want to add the price inside the view so right here we are going to add a test component and we give it the price of the um plant so say plant dot price hit save and i want to add it to last time right now so start styling the text we are going to give it a style of our margin left we give 15 pixels so the margin left 15 pixels we give the color of white a font width of bold and a font size of 16 pixels font size 16 pixels and hit save and we are done with the tag so let's look at the ui and the next step i want to add is about text then add the details of the plant so to add the about text we are going to add a view this view is going to hold for the about text the details of the plant these buttons and this and by button right here so below this view we are going to add the view and we are going to start the view so we'll give it a style i'll give the padding horizontal of i'm 20 pixels and imagine top of 10 pixels all right now we are going to add the text so to add the text we'll add the text component and give it the text of um about so we have the about over here so i want to start the about right now we get a font size of 20 pixels font weight of um board font weight and that's all so right now we're done with about text so the next step we are going to add the details um text so over here we are going to add a test component and we are going to get the details that is the about of the plant so it's a plant dot about over here we have the plant um the adidas of the plant so we are going to style the um the text right now so give the color of gray we give the font size of 16 pixels line height of 22 pixels and imagine top of 10 pixels imagine top i'll hit save and now get back to details screen so right now we have the details of the plant so the next step we are going to add this button the total um item in the cart and this buy bot right here so to do that below the test component we are going to add a view so the view is going to hold a view which is going to hold this minus button this plus button and then we add this um by button so add a view i am going to start the view so we are going to give the margin top of 20 pixels flex direction of row and it's justify content or space between to justify content and give it um space between all right now we are going to add a view that is going to hold these buttons and the total item in the cart so inside this view we are going to add under view and also we are going to style this view we are going to give this view a flex direction of row also and align items of center all right now i want to start adding the buttons so i'm going to add a view again for the buttons and inside this view you are going to give the style of border button so say style order btn and inside the border btn will add a test component for the minus sign so add the minus sign and also we are going to add a style to the um test component so say style dot border btn text so i'll hit save right now i'm going to start adding the style so i want to create a style right now so first add the order btn so say for that btn i'll give it a color color of gray and a border width of one pixels order radius of five let's say for that radius five pixels let's save so this is the button over here so the next step i want to give the height of 40 pixels a width of 60 pixels so we are going to give it um a justify content of center and align items of center justify context center align items center and that's all for the border btn style so right now i want to start the bottom text itself so we say what the ptn text and i want to give the font weight of board then i'll give it a font size of um 28 pixels so that's all for the button style um right now i'm going to duplicate the button so i'll duplicate this and i want to change this to the plus sign and in between the button i'm going to add a test component for the total item and i'm just going to give it one and also i want to style the test component so give this type i want to give it a font size of 20 pixels imagine horizontal of 10 pixels and a font width of both and that's all for the bottom and the total number of the item so right now i'm going to create the buy button so outside this view we are going to add the view for the button to save you and we are going to give this style of by so i'll say style by ptn we're going to add a test component say text and we'll give it a text of pi then we are going to cite the text so we give the color of colors dot white and we give it a font size of 18 pixels and the font weight of bold then right now i'm going to um add the by button style we are going to give it a width of 150 pixels a height of 50 pixels a background color of green so say colors dot screen and right now this is the button over here so the next step i want to center the by text so to center the text we give the justify content of center and align items of um center also right now we center the text so the next step i want to add the radius to the bottom let's say for that radius i'll give i'm 30 pixels and right now we have the buy button so actually we have a melody to imagine below these buttons so um let's fix that right now so um let's see i think we made a mistake somewhere so i think this should be 10 not 20. so right now we have enough margin below the button so um i think that's all for the details screen so let me navigate back to the home screen as you can see we have the plant image change and also the plant name change so i think that's all for the video if you find the video helpful please like and share and also if not subscribe to the channel please consider subscribing turn on post notifications so not fine time upload a new video and i'll see in the next video thank you

Channel: kymzTech

Views: 14,806

Keywords: react native plant app ui, react native plant 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, app design, build app react native, build app react native android, react native ui, react native login screen, react native login ui design, build plant app ui using react native, react native app, react native project, react navigation, react native design

Id: d9-FNDUICZE

Length: 59min 13sec (3553 seconds)

Published: Mon Dec 07 2020