REACT NATIVE HOME RENTAL APP UI

hey guys this is hacking welcome back to the channel so in today's video i'm going to show you guys how to build this home rental app using react native so stay tuned [Music] so the actual design was created by jovinda on dribble so drives a web server users upload design so if you need an inspiration to design your website or app you can visit triple.com so before continue then walk you guys through the app so over here we have the first screen that is onboard screen and we have this image below it we have the indicators so this indicator is actually starting so there is no slider functionalities on these indicators then below it will have the test of find your sweet home and also below the test we have on that test right here then over here we have a button with the title of guest ahead and once i click on this button it's going to go to the home screen and inside the home screen we have a test of location so below it we have the location of canada and over here we have the profile image below it we have the search input and also we have this sort button and right here we have a car showing an option of buy home and also rent a home so inside the car we have the home image so below the card 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 then below the list of categories we have a card so this card shows the available home and also it shows the image of the home the title the location and also the facilities of the home once i click on the card it's going to go to the details screen and inside the little screen we have the full image of the home and also we have this um headers right here and if i click on this back button it's going to go back to the home screen then over here we have a tag of virtual tour and right here we have the title the location and the rating then below it we have the facilities and we have this um text over here then below details we have the image of the interiors and also right here we have a footer in the footer we have the price and the test of total price and right here we have um the bottom with the title of book now so this is what i'm going to build in this video if likes kind of video please like and share and also if not subscribe to the channel please consider subscribing turn on post notifications so you get notified i'm uploading a new video and after i do let's start coding okay guys welcome back so i did create a project and also started the project so let me walk you guys through the structure of the project so over here create a folder called src so this was the source of the app and inside the folder created folder called asset so this hosts the assets of the app so we have the house image the interior image the onboard image and this um person image then over here create a folder called cons so this whole song file we have the color.js file so this hold the color of the app the white color dark color light color gray color blue color red color and a transparent color and right here i spotted the color object then over here we created a file called um houses.js so this hold the houses of the app so just an array with um several objects so each object has an id title location image details interior and this interior holds an array with the several interior images then over here for the account views and inside the photo i created folder called screens so this folder holds the screen of the app so i created the details screen component so this component returned a safe area view and also i've imported the vector icon so making use of vector icon for the project and below it i imported the colors so right i created the home screen component and inside the home screen component i also returned the safe area view component and right here i imported the colors the icon and also i've imported the houses over here then right i created the onboard screen component and inside this component i return the save area view also and the colors file right here inside the app.js i import the navigation container so making use of react navigation for navigation and also i bring in the um create stack navigator so make use of the stack um navigator all right i imported the video screen so over here i defined the screen the onboard screen home screen and the detail screen and for the stack navigator i passed in the screen option and i set the adaption to false so it is going to get rid of all the header in this screen so that's all for the source of the project let's start coding the app so start by working on the onboard screen so let me bring up the ui for reference so right here for the onboard screen we have this image with this and round shape and also we have this indicator then below the indicator we have these text and below the text we have under text over here and below it we have this button of gestate so start by styling the save area view so give this type and give the flex of one then give the background color of white so it's a background color i'll say colors dot white so this is from the color object then right now i'm going to add an image component so this is going to display this image over here so i will add an image component and for the image component to give it a source of the onboard image so say source require i hit save so right now we have the image so now we are going to start styling the image and for the image we give the style of image say style dot image then over here we are going to add this style for the image style we give the height of 420 pixels say height 120 pixels don't give it a weight of 100 percent and right now we have the image so the next step i want to add this chord shape to the image and to do that to add the border bottom left right just i'll give hundred pixels so say border bottom left radius that gives hundred so right now we have the image with the curve shape so the next step i want to add the status bar and we're going to give the props of translucent so this is going to allow it to draw the app under the image which is going to give it this look so to do that over here we bring in the status bar component so say status bar and for the status bar i will give it the translucent props i hit save so right now it's going to draw the app under the screen so while we are not seeing this image is because the status bar is not transparent and to fix that we give the brown color and give it a transparent color so say colors.transparent or hit save so right now we have the app drawn under the screen so the next step i want to add this indicator so to add in ghetto we are going to add a view so this view is going to hold the three indicators so below the image component we'll add a view and for the view we give the style of indicator container so this view is going to hold the indicator so say style dot indicator container i hit save and for the indicator container style i'm going to give the height of 20 pixels for the height 220 pixels then give it a justify content of center align items of center before we do that to give the flash direction of row so this is going to align the item from left to right so say flex direction and give it row then we'll give the justify content of center and align items of center and that's all for the indicator container so right now i want to add each indicator so for the indicator we are going to add the view so add a view then we are going to give the style of indicator for this type and this type dot indicator and now we are going to add the style so before we add this type we are going to duplicate these two times so we have the three indicators and for this type we are going to give the height of three pixels for say height give three pixels we give the width of 30 pixels we give the balance color of gray so say background color and say colors dots gray so now we have the indicators so the next step i want to add some space between the indicators so to do that to give the imagine horizontal of five pixels let's imagine horizontal only five pixels then also give the border radius of five pixels five pixels so hit save so right now we have the indicators so actually this indicator have different type so this is the selected um indicator so to fix it we are going to add an external class so we are going to call it an active indicator and we are going to apply it to this um indicator alone over here i'm going to get this style and i'll add the square bracket because i'm adding multiple style then i'll add this style right now i'm going to add the indicator active style so say style dot indicator active so this for this um indicator over here so for the indicator active style we are just going to change the background color and give the background color of dark so separate color i'll say colors dot that i'll hit save so right now we have the indicators and also we have the active indicator so the next step i want to add these text define your sweet home text and this text below to do that you are going to add a view so this view is going to hold the both text so below the indicator container or add the view and for the view you are going to give this type i give the resistor padding of 20 pixels as a pattern then give the padding top of 20 pixels also i hit save and that's all for this style so right now we are going to add a view so this view is going to hold these text so actually these texts are a true text component so the first test component is going to hold the find your text while second test component is going to go to sweet home text so over here we'll add a view and for the view add a test component don't add the text of find your i'll hit save so right now i'm going to add a style to the test component before i do that let's make sure we import the test component so over here we body test component and for the test component we give the style of title this time and say style dot type tool i'll hit save so right now i'm going to duplicate this test components then i'll change this to sweet home so now i want to start styling the title style for the title style we give it a font size of 32 pixels with a font size give it to pixels download a font weight of board say font weight and give it both and that's all for the style so right now i'm going to add this um text over here so below this view holding these both text we are going to add under view so this view is going to hold two test component also so the first test component is going to be this text of shadow visit in just a few click why the second test component is going to be this text or visit in just a few clicks so that you'll first add the view and for the view we give it a margin top of 10 pixels so once a space between these texts over here so let's imagine top and give 10 pixels so right here i'm going to add the test components for the text so add a text component i'm going to get the text i'll paste it over here it's saved so right now i'm going to add this type to the text i'll give the style of text style process style and say text file so i'm going to duplicate this test component and i'm going to change the text to the second text so i'll get the text and i'm going to paste it right here so this detects over here so right now i'm going to start styling the text type and for the text i will give the font size of 16 pixels then i'll give it a color of gray say color actually colors dot grey and that's all for the text over here so the next step i want to add this guest diet button so below the view that is holding the both text i want to add the view so this view is going to hold the button so we are going to start the view so add a style we give it a flex of one then use the justify content of flex end and a padding bottom of 40 pixels so padding button 340 pixels so hit save so right now i want to add the button so to add the button we'll add a view i'll give the view a style of btn so i'll say style rc style dot ptn i'll hit save so inside the view we're going to add the test component for the botting title to add the text component then i'll give it a title of gestate i'll hit save so right now i'm going to add the color to the text i'll give the color of white we'll say color and say colors dot white so we have the color so actually it's not showing because it's the same color with this um screen background so right now i'm going to style the btn style and for the btn style give the height of 60 pixels i give the margin horizontal of 20 pixels so let's imagine horizontal 20 pixels don't give it a brown color of black that's the dark color so say colors dot dark and also we are going to give the border radius of um 15 pixels so say but i radios a 15 pixels i hit save so um let me get rid of this so right now we have the button so the next step i want to center this text inside the button and to do that to give to justify content or center and align items of center hit align items and save so right now we have the text centered in the button so and that's all for the btn style so the next step i want to wrap the button with a pressable component and once we click on it we are going to make use of the navigation object to navigate to the home screen so over here we'll add the pressable component let's say press a ball then i'm going to take the button then we're going to put it inside the pressable component i'll hit save then add the on press props and for the unpressed props i want to navigate to the home screen so bring in the navigation object pressing navigation then over here we'll call the method navigate and we are going to navigate to the home screen so i'm going to get the name of the home screen i know i am going to paste it so right now if we click on it it's going to take us to the home screen so let's open the home screen component and for the home screen we have this header so we are going to add this header and inside the header we have the test of location and below the test we have the location of canada and also we have this uh profile image over here so for the home screen we'll start by styling the safe area component so add a style and for this type we give it a background color of white with the colors dot white then we'll give it a flex of one so this is going to allow it to take the available space then inside the save area view component we are going to add the status bar so want to get rid of the transcend prop so don't want it to draw this screen under the status bar so right here add the status bar and for the translucent we are going to set it to force to translucent or give it false so with this translucent of force is no longer going to draw the app on that d status bar and for the status i will give the background color and give it a color of white so say colors dot white and also we are going to set this path type to um dark content so this is going to allow the items in the status bar to show up just say bar style i'll give it dark content i'll hit save so right now we have the items in the status bar showing up so below the status bar component we're going to add the view for the header and for the view we'll give the style of header so this style i'll say style dot header for the header style we give it a padding vertical of 20 pixels so say padding vertical i'll give 20 pixels then give the flex direction of row then give the justified content or space between and a padding horizontal of 20 pixels just a padding horizontal give 20 pixels and that's all for the header style so right now i'm going to start adding the elements inside the header so inside the header we are going to add a view so this view is going to hold these text so it's going to hold two test components so the first test component is going to have a test of location why the second test component is going to have a test of canada so i will add a view and over here at the test component then i'll give it a test of location and right now i'm going to add a style to the test component profile add a style let's make sure we import the text component so right here i'm going to import the text component and for the test components i will just give the color of gray it's a color also colors dot grey so let me navigate to the home screen so right now we have the um test of location so i am going to duplicate this and i'll change it to canada then we are going to change this to a dark color and also gives a font size of 20 pixels and a font weight of both so it's a font size 20 pixels down give it a font rate of code so right now we have the location text and the text of canada so below this view holding the text component i want to add an image component so this image component is going to display this um profile image over here so i will add an image component and for the image component we are going to give it image of person.jpg so say source we get it from the asset folder i'll say pressing dot jpg or hit save so right now we have the image so now we are going to start styling the image component so for the image component i want to add a style and give it a style of profile image so i'll say style dot profile image so i want to get this style and right now i'm going to start styling it for the profile image i'll give the height of 50 pixels give it a weight of 50 pixels also and then we'll give it a border radius of 25 pixels so this is going to give it a round shape let's say for that radius and give 25 pixels so right now we have the profile image so um the next step i want to start working on the search input so before i work on the search input i want to add a scroll view component so that the page is going to scroll if the element inside the screen overflows so right here we'll add the scroll view component and right now i'm going to add the um search input and this sort button so for the search input and the sort button we are going to add a view so this way is going to hold the input and the button so inside the scroll view component to add a view i am going to start the view so give it a style and for this type we give the flash direction of row we give the justify content or space between say justify content space between then we'll give it a pattern horizontal of 20 pixels so the pattern horizontal and give 20 pixels so i hit save so right now i'm going to add the search input and to add the search input we're going to add a view so this is going to hold this icon and also it's going to hold the test input so inside this view will add a view and for the view give it a style of such input container for this type on the style dot search import container i hit save so right now i'm going to style the search input containers type for the search input containers type we give the height of 50 pixels then we'll give it a background color of light so say brown color the colors dot light then over here add a flex of one to eight so right now we have the um input container so we are going to give it a flash direction of row flex direction give to row then give align items of center a padding horizontal of 20 pixels and a border radius of 12 pixels it was a padding horizontal q20 pixels and polar radius of um 10 pixels and that's all for the search input container so right now i'm going to add the search icon and also the text input component so for the search icon we'll add the icon then we'll component the name of search and now we have the search icon so the next step we're going to give a size of 25 pixels and also we give it a color of gray let's say colors dot gray and that's all for the search input um component so right now i'm going to add the test input component so add the text input and for the test input we give the placeholder of such address city location so give it a placeholder and i'm going to bring in the text and right now we have the um placeholder over here so that's all for the test component so right now we're going to add the um sort button so to add the soft button we are going to add the view so this view is going to hold this um sort icon so below the view that is holding the search icon and the test input component we are going to add the view and give this view a style of sort button process style i'll say style dot sort ptn then we are going to start the protein style so for the sort btn we give the brown color of dark with the brown color i'll say colors dot dark then i'll give the height of 50 pixels and a width of 50 pixels i'll say height 50 pixels i'll give the width of 50 pixels also hit save so right now we have the um sort ptn so the next step i want to add a border radius so i'll give it a bottom radius of 10 pixels and also give the justified content of center align items of center so this is going to center the icon inside you so see justify content give center then give align items of center i'll hit save so the next step we're want to add the margin left to it so i want a space between the search input and d n so say margin left and give it um 10 pixels so right now we have space between the both um component so right now i'm going to add the um sort icon so inside the view we are going to add an icon component and for the icon component to give it a name of tune so say tone then i'll give it a color of white and a size of 25 pixels so say color say color.white and give it a size of 25 pixels let's see so right now we have the sort icon on this search input so let's take a look at ui so right now i'm going to add this card of buy a home and also add the card of rent a home so to do that i want to create a company called arm list option so right here create a component to say cons list option and over here we are going to um add the component so the list options so inside the list option component i'm going to return a view and we are going to give the view a style of option list container so say style let's say style dot option list container so i'm going to get this style and i'm going to style it so for this type we give the flash direction of row we give the justified content of space between the justify content or space between then i'll give it a margin top of 20 pixels and pattern horizontal of 20 pixels imagine top 20 padding horizontal 20 pixels and that's all for this style so right now i'm going to add the option list so the option list is going to be an array that holds an object so the first object is going to have a title of i home with the image and second object is going to have a title of rental home with this um image so with this option list i want to iterate through the array and we are going to um display the image and also i want to display the title over here i'm going to add the option list so say const say option list which is going to be an array and i'm going to bring the boot object in and i'll paste it right here so the object has a tie tool so the first title is by home with the image of the first house then second title is rent a home with the image of the second house so inside this option list container which is going to hold these um cards i want to iterate through the option list and we are going to render the title and the image so right here we are going to map through the option list so say option options list not option list don't say dot map open in the option and also we bring in the index then over here we are going to return a view and i'm going to give the view a style of option card so say style and say style dot option card so right now i'm going to add this style i want to start styling it so for the option card we're going to give it a height of 210 pixels then i'll give it a width of width divide by two minus 30 pixels so you want each card to take about fifty percent of the screen width so right here i will say wait i will say weight divide by 2 minus 30 pixels so right now i'm going to add the width so for the width over here we'll create a variable call weight we say const i want to put the width from the dimension api so bring in the dimension um api i'll say dot get i want to get the um screen width so now we have the screen width so the next step we're going to add an elevation to the card so the elevation then we'll give 15 pixels and also i want to give the brown color of white say colors dot white hit save so right now we have the cards over here so right now i'm going to start adding the image and also the title to the card so inside the option card i want to add an image component and for the image component i want to give it the image so this source and to get the image you will see option dot img hit save so right now we have the image so the next time i want to start starting the image component before i do that i want to add a key to the view and give it index so this is going to get rid of the um key warning issues so right here i will give it a style of option card image so this type i'll say style dot option card image so i'm going to get the style and for the option card image we are going to give it a height of 140 pixels don't give the volatility of 10 pixels and a width of hundred percent you gotta redraws 10 then i'll give it a weight of hundred percent or hit save so right now we have the image so now i want to continue styling the um option card so for the option card we give align items of center say align items center so i'll give it a border radius of 20 pixels and also i want to give it a padding top of 10 pixels and a padding horizontal of 10 pixels so also padding top and pixels and a padding horizontal of 10 pixels and i think that's all for the option card um style so right now i'm going to add the title to the card so for the title below the image component to add the text component and for the text component we are going to give it the title text so to do that we say option dots type 2 so right now we have the um text so we are going to start the text so add a style and for this type we are going to give the margin top of 10 pixels margin top 10 pixels don't give it a font size of 18 pixels we give it a font tweet of both hit save so right now we have the text so um i think that's all for the optional card so right now i'm going to start adding the um this category list over here and for the category list you are going to create a component called list categories so say const then inside the component i want to return a view so for this view i want to give the style of category list container so say style say style dot category list container so i want to get this style and we are going to start styling it so before we do that we are going to um add the component over here and for the category list containers type we give the margin top of 40 pixels just imagine top 40 pixels don't give the flash direction of row reflect direction give it to low we'll give the justified content or space between and a padding horizontal of 40 pixels so they justify content space between and give the padding horizontal off 40 pixels hit save and that's all for the category list container so right now i want to start adding the categories itself so to do that you are going to create an array for the several categories so over here create an array process const and give it a name of category list so i'm going to bring in the categories i'm going to paste it over here so i hit save so right now we have the category list so um right now i'm going to map through the category and we're going to display the category so right here i'll say category list dot map return the test component and over here we are going to bring in the category and also the index so i hit save so right now i'm going to display the category right here so to display the category we'll say we'll add the category over here and now it's going to show the categories so right now i'm going to add a style to the text component and for this tab we are going to add an array so we are going to add servers type so add the style of category list test so system dot category is test hit save so i want to get this tie and for the category list test we give the font size of 16 pixels font size then i'll give it a phone tweet off board the front wait give it bold i'll give it a padding bottom of five pixels and a color of gray there's a padding bottom i'll give it five pixels don't give it a color of green let's say colors [Music] dot screen so right now we have the category list so um the next step i'm going to add the select functionality so once we click on the category it's going to select the category which is going to make the test a dark color and also it's going to add this um bordered below the text so to do that we are going to add a state which is going to be the selected category index so once it's selected we are going to apply the style that is selected style we are going to create a style called active category list text so once it's active we're going to apply that style else it's going to apply this type so over here we are going to create a state so say const and say selected category index then we'll say set selected category index to set the category index which is going to be react dot use state and by default you're going to give it 0 for the index so right now we have the state so now we are going to create the active category list test style so over here we are going to create a style called active category list text so i want to apply this style if the category is selected so for this type we are going to change the color to a dark color so say color colors dot dark then i want to add a border button weight of one pixels so say for that bottom weight the one pixels don't give it a padding bottom of five pixels let's say padding bottom again five pixels and that's all for this type so right now we're going to add the condition so once the category is selected is going to apply this the active category list style else is going to apply this type so to do that i'm going to add the logica operator to see if index is goes to selected index we are going to apply this type so apply the active category list type text so i hit save and this should apply the style for the first category which is popular category so this should be two equals sign not one so right now we have the um popular category selected so the next step we're going to add the functionality so once we click on any of the category like once we click on the recommended category it's going to select the category so to do that i'm going to add the principle component i'm going to take this test component down put it inside this principle component and for the principle component once we click on it we are going to set the selected category index to this index such as this should be selected category index not selected category index set so i want to get rid of the set so right here i'm going to add on press props so before we do that i want to add the key props and give it the index as the key so this is going to get rid of the key warning and also we are going to add the unpressed props so say on press and for the on press i want to call this set selected category index to say set selected category index i'm going to pass in the index so once we click on this it's going to set this value to this index which is going to apply the style to the selected category so click on is going to select the category and also if i click on this it's going to select category so that's all for the category list so the next step i want to start adding this card over here so we are going to create a card component for the card so say cost and save card so for the card component you are going to return a view so right now i'm going to add a flat list component to list the card so below the list category component to add a flat list component and for the flat list component we give the data of houses and also we are going to give it a render item of card so say render item so bring in the card component and over here we are going to pull out the item so say item then i'm going to pass it to the card as a house props for the house and give me the item so right now i want to start working on the card component so for the card component we're going to give it a style of um card let's say style dots card all right now i'm going to add the card style and start styling it before we do that i'm going to bring in the house props for the card style we give the height of 250 pixels or give it a background color of white so it's a brown color i'll say colors dot white then i'll give the elevation of 10 pixels the elevation give 10 i'll hit save so right now we are going to give it a width of width minus and 40 pixels so say weight i'm going to reach the screen weight and subtract 40 pixels from it then we give it a margin right of 20 pixels a padding of 15 and a bottle radius of 20 pixels just imagine write 20 pixels padding of 15 pixels then we are going to give it a border radius of 20 pixels for that radius i gave 20 pixels so i hit save and that's all for the card so right now we have the cards rendered over here so the next step i want to add a horizontal props to the flat list so i wanted to list the cut horizontally so right here i'll give it the horizontal props all right now we have the card listed horizontally and also i want to get rid of the scroll bar so to do that to say show horizontal indicator and set it to um force and now we are going to add some style to the flat list so to do that i was a content container style i gave the padding left of 20 pixels then gives a padding vertical of 20 pixels so say padding vertical and give 20 pixels so right now i'm going to start adding the element inside the card so the first component we are going to add is the image component which is going to show the image of the house so inside the view will add an image component and for the image component i want to give it a source of house dot image process source and say house dot image and hit save so right now we have the image so the next step i want to start the image component so give this type and for this style we give it a style of card image process type dot card image so i want to get this style and style it so for the card image i want to give it a width of 100 percent so i wanted to take the full weight then give the height of 120 pixels we'll say height give 120 pixels i'll give it a border radius of 15 pixels let's what's about our radios don't give 15 pixels i hit save so right now we have the image so the next step i want to start adding the title the price and also the location so to add the title and the price i want to add a view so this view is going to hold this test component which is going to hold the title and i want to add a test component over here for the price so below the image component to add a view and for the view we are going to give it a style so say style for this tab we give the flex direction of row then give it a justify content or space between and imagine top of 10 pixels let's imagine top give 10 pixels so i hit save so right now i'm going to add the title and also i want to add the price so to add a title add a text component and we are going to give it a style before we do that we'll bring in the title so say house dot style to so right now we have the title so i'm going to add this tie to the um test component so for this tab we'll give the font size of 16 pixels down give the font to it of code refer to it import or hit save and that's all for the title so i want to duplicate this they are going to um change this to 1 500 so change it to the price and also i'm going to i'm going to add the color of blue to it so i'll say color i'll say colors dot blue it's a and that's all for the price so the next step i want to add the um location over here and to add the location below the view that is holding the title and the price i want to add the test component i'm going to bring in the location so say house dot location so right now i'm going to add this tie to the test component so give this type and for this type we give the color of gray we give it a font size of 14 pixels imagine top of 5 pixels and that's all for the style for the test components so right now i want to add these facilities over here so we are going to add the icon and the total so to add the facilities we are going to add the view so this view is going to hold the three facilities and inside the view i want to add a view so each view is going to hold a an icon component and also um a test component so to do that below the test component for the location where the view and for this view i want to give the style so we give the imagine top of 10 pixels so imagine top 10 pixels then we'll give it a flex direction of row and that's all for the view so right now i'm going to add the view so the view is going to hold the icon and the number so inside the view will add under view so for this view i want to give it a style of facility so say style and say style dot facility so right now i want to get this style i want to style it for the facilities type we are going to give the flex direction of row with a flex direction give it row then we give it a margin right of 15 pixels let's imagine right and give 15 pixels so hit save and that's all for the um facilities type so right now i'm going to add the icon and also i want to add the um test component so inside the view we are going to add an icon component so for the icon component i want to give the name of hotel for the first icon i'll say name and say hotel then i'll give it a size of 18 pixels to say size i'll give 18 pixels hit save so we have the icon so now i'm going to add the test component for the number so add the test component and for the test component i want to give a style of um facility text so say style i'll say dots facility text and i want to give it two over here so i hit save so right now i want to um start the facility text type so for this type i'm going to give it a margin left of 5 pixels let's imagine left we give 5 pixels then we'll give it a color of gray so say color and say colors dot screen hit save so that's all for the facility test component i'm going to change the icon to the corresponding icon so i'm going to duplicate this and for the second icon i want to give it an icon of bat top for the thought icon i'm going to give it an icon of aspect dash ratio let's save so right now i have the icon so i'm going to change this to 200 m and i'll save so that's all for the card component so right now i'm going to wrap the card component with an unpressed component and we're going to add an unpressed props to it i want to click on the card wanted to take us to the details screen then after that we'll start working on the details screen so inside the card component i'm going to bring in the pressable component and i'm going to take this view i'm going to cut it then i'm going to put it inside the impressible component and for the pressable component i'm going to add a props of on press say on press then for the on press want to navigate to the table screen once we um click on it so it's a navigation and let's make sure we bring in the um navigation props so right here i'm going to bring in the navigation props then right here i'm going to use the navigate method to navigate to details screen so navigate and i'm going to get the detail screen name so i'll get the name i'll paste it over here and while navigating want to pass the house details to this screen so to do that over here i want to add the um house props so hit save so right now for navigating this screen we're going to access this um house object so i want to click on it and right now at the details screen so i want to open the details screen component and i'm going to start working on it so for the little screen i want to start by styling the safe area view component also so for this style we give the flex of one down give the brown color of white you say colors dots white it's safe so right now i'm going to add a view so this is going to hold the house image and also this tag over here so right here add a view and for the view we'll give the style of background image container so say style what's your style dot background image container so i'm going to get this style i'm going to start styling it so for this style give it an elevation of 20 pixels to the elevation and give 20. we give it imagine horizontal of 20 pixels was imagine horizontal with 20 pixels imagine top of 20 pixels then give it a line items of center and the height of 350 pixels so the align items say center then give it a height of 350 pixels position 150 pixels so i hit save so inside the view component we are going to add an image background component so for the image background component you are going to give it a style of background image so process style and by the way the reservoir makings of the image background component instead of the image component is because you want to have the header inside the image so that you add a style of background image so say dot background then we are going to give it a source of the image so to get the source we are going to get it from the route object so right here we are going to bring in the navigation first because i want to make use of it to navigate to the back to the home screen so it's a navigation then we'll bring in the route props so say route and over here we are going to create a variable called house so this house is going to hold the object passed from the home screen so say const i'll say house and to get object we get it from the route dot params so right now we have the um object pass from the home screen so the next step i want to add the um image to the image background component so to do that to say source and we are going to get it from the um house object we say house and say dot image so i'll hit save so right now i'm going to start styling the background image style for the background image style i want to give the height of hundred percent we'll give the width of hundred percent also then we give the border reduce of 20 pixels and overflow of heating so what i will just give 20 pixels and give it overflow and set it to hitting so i hit save so right now navigate to the um details screen so right now we have the um the image so the next step i want to add the header inside the image so to do that inside the image background component we're going to add a view or add a view and for the view we are going to give it a style of header so this type this type dot header so i want to get this type and for the headers tab i'm going to give the padding vertical of 20 pixels so say padding vertical we give 20 pixels we give the flex direction of row we give the justified content of space between and a padding horizontal of 10 pixels so let's say justify content space between and give it a padding horizontal of 10 pixels and that's all for the header style so right now i'm going to start adding the element inside the header so for the bottoms we are going to add a view so this view is going to hold the icon and inside the header um view will add a view so this view i want to give this type of header btn so it says type dot header printed n for the header btn style we give it a height of 50 pixels or give it a width of 50 pixels also then give it a background color of white say brown color and say colors dot white i hit save so right now we have the um button so the next step i want to give it a border radius of five pixels for separate radius give five pixels then i'll give it to justify content of center align items of center so this is going to enter the icon boot vertically and horizontally let's see so right now i'm going to add the icon so over here we'll add the icon component and for the icon give the name of arrow dashback ios let's say name and right now we have the icon so i want to give it a size of 20 pixels and hit save so we have the icon so the next step we're going to add on press to it and once we click on it we want it to take us back to the home screen so right here we say on press and for the unpressed props we say navigation dot go back so if i click on it it's going to take me back to the home screen so right now i'm going to duplicate this then i'm going to get rid of this on press props so don't want it to take us back to the home screen if you click on this icon and also we are going to change this to favorite and we are going to give the color of red so say color and say colors dot red and that's all for the header so right now we are going to add this um virtual thought tag inside the image so to do that below the image background component we are going to add a view so add a view and for the view we give the style of virtual tag let's say style this style dot virtual before add this tab we are going to add the text component so inside the text component to give the text of virtua tor i'm going to hit save so um let's make sure we bring in the test component so i'm going to bring in the test component and right now we have the text for the text so i want to give it a style so give the color of white so this time i'll say color i'll say colors dots white so right now i want to get this visual tag style i'm going to style it for this type we give it a top of minus 20 pixels we'll give it a width of 120 pixels so say width give 120 pixels then we are going to give the background color of black so the brown color i will say colors dot dark hit save so right now we have the um tag so we give it a padding horizontal of 20 pixels let's say padding horizontal 320 pixels i'll give it a height of 40 pixels a powder radius of 10 pixels reporter radios 10 pixels we are going to give the justify content of center and align items of center so this is going to center the text so this is the tag right here and i think that's all for the virtual tag style so right now we're going to start adding the um the title rating location facilities the text and also this interior image so to do that i want to add a view so this view i want to give this type of details container so this is going to hold all these details over here so over here i want to add a view for the view i want to give it a details container before we do that we are going to add a scroll view component so want the whole page to scroll if the element overflow so it says scroll view so i'm going to get everything and i'm going to put it inside the scroll view component so with this the page is going to scroll if the elements overflow so over here i'm going to give it a start of details container so say style now this time dot details container for the details containers type i want to give it a flex of one then i'll give it a padding horizontal of 20 pixels and imagine top of 40 pixels just a padding horizontal say 20 pixels i'll give the margin top of 40 pixels so now inside the details container we're going to add a view so this view is going to hold the title and these ratings over here so over here i'll add a view and for the view i want to give this type of flex direction and set it to row so this time let's say flex direction we give it row then it justify content to give space between let's say justify content and give it space between hit save so right now i'm going to start adding the um title and the rating and for the title we are going to add a test component inside the test component i want to add the title so to do that we'll say house dot tie two so right now we have the title so the next step i want to add some style to the test component so for the test component i want to give it a font size of 20 pixels and a font to it off board as a font size and do 20 pixels don't give the phone to it off board so now we have the titles type so right now i want to add the rating tag and also the number of rating so to do that i want to add a view so this is going to hold the rating tag and also it's going to hold the test component for the number of the rating so over here below the test component we are going to add a view and also i want to start the view so for the view we give the style we give it flex direction of row and align items of center to say flies direction due to row downgrade align items and give center so inside the view we are going to add under view so this view is going to hold the um rating tag so i'm going to give it a style of i'm writing tag so this style is a style dot rating tag so i'm going to get this type and for the rating tag i want to give it a height of 30 pixels we give it a weight of 35 pixels then give the background color of blue so separate color you don't say colors dot new so right here we have the tag so right now i'm going to give the border radius of five pixels because the border radius will give five pixels and also we give to justify content of center align items of center we justify content press enter and give align items of center so that's all for this style so right now i'm going to add the test component we are going to add the rating so inside the rating tag we'll add a test component and i'm going to give the rating of 4.8 then over here i want to start the text so for the style we give it a color of white let's say colors and the color dots right and that's all for the text so right now i'm going to add the uh the number of ratings over here and to do that below the rating tag view we are going to add a test component then i will give it a number of 155 ratings and also we are going to add a style so for this style we give it a font size of 13 pixels and give it a margin left of 5 pixels so once imagine between the rating tag and the number of rating so it's imagine left and five pixels so i hit save and that's all for the title the rating tag and the number of rating right now i'm going to add the location so below this view that is holding the title and the rating or the test component inside the test component to add location so get location from the house object and say dot location so this is the location over here so right now i'm going to style the text so for the text we give it a style i'll give the font size of i'm 16 pixels then i'll give it a color of gray so it's a color i'll say colors dot gray and that's also right now we have the um location so right now i'm going to add the facilities over here so i do have the facilities inside the card um component in the home screen so i'm just going to get it from the home screen and we are going to make some changes to it so i want to go back to the home screen and i'm going to get the facilities so i'm going to get it i'll copy it from here i'll go back to details screen then i'm going to paste it below the text component so i hit save and we are going to make some changes to it i think so we change this to 20 pixels then we are going to change this to um area 100 m area then also we have to get the facility style and the facility test type so we'll come down over here where we added these dice i'm going to get it then i'll go back to details screen and i want to add it style over here so that's all right now we have the um facilities so the next step i want to add this tile and after the style i want to add the interior images so to do that over here i want to add a test component and i'm going to get the text so to get the text we'll say house or details so we are going to get the those text and also i want to start the test component so for this type we give the margin top of 20 pixels so let's imagine top then we'll give it 20 pixels and we'll give it a color of gray so say color and say colors dot gray hit save text over here and that's all for the details test so the next step i want to start adding the interior and image so to add the interior image i want to create a component called interior image and this is going to render the interior image so they caused interior image and this is going to take in an image props for the image which is going to return an image um component so let's say return and i want to return an image component and for the image component i want to give this source i'm passing the image and also i want to add an image style so i'll say style dot interior image so i hit save and i'm going to get this die but before we start styling it i want to add a flat list component to lists the image so below this text will add a flat list component and for the flat list component we're going to give it a data props procedure and give it house dot interiors so this is going to loop through the list of the interior inside each object for the house there is a property called interiors and this interior property holds an array of image of the interior so i'm going to iterate through these images over here so say house dot interior interiors so i hit save and also i want to give it a horizontal props so i want to list it horizontally then we'll get rid of the scroll bar ratio horizontal indicator and set it to false then for the render item we're going to pass in the um interior image so say render item interior image so we have a typo i want to fix this right now so this should be interior i'm going to yeah add the r to it and i want to give the props of image i'm passing the item so why i want to pull out the item i'll hit save so right now i want to start styling the um interior image so for the interior image i want to give it a width of weight divided by 3 minus 20 um pixels so say weight divided by 3 minus 20 so i hit save so right now i want to bring in the um screen width so actually we already defined the screen width in the home screen so i'm just going to get it from the home screen so i'll get the width over here and right here i'm going to paste it and also make sure we bring in the dimension api dimensions it save so right now we have the image so i want to continue styling the interior image type so it gives the height of 80 pixels then we need a margin right of 10 pixels and a border radius of 10 pixels just imagine right you 10 pixels download our radius of 10 pixels let's say radios 10 pixels hit save and that's all for the image so the next step i want to add some style to the flat list itself so for the flat list component i want to add a style so it's a content container style i'll give it a margin top of 20 pixels just imagine top i'll give 20 pixels and also i'm going to bring in the key extractor props and extract the key so that is going to get rid of the key issue warning so say key extractor i'll say key dot to string so this is going to get rid of the key warning so i think that's all for the interior image so the next step i want to add the um footer this footer over here then we'll add the price you know add this text off to that price and also we add the spotting over here so below the flat list component we are going to add the view and for the view we use this type of footer so say style and say style dot footer and for the footer style we give the height of 70 pixels we give the background color of light color so the brown color on the colors dot light so this is the footer over here so right now i'm going to give it a border radius of 10 pixels let's say for that radius give 10 pixels and we are going to give it a padding horizontal of 20 pixels then we give it a matching vertical of 10 pixels let's imagine vertical give 10 pixels hit save then give the flash direction of row align items of center and justify content or space between so say align items to center don't give the justified content or space between and that's all for the footer style so right now i'm going to start adding the element inside the footer and inside the footer i want to add a view so this view is going to hold two test components so the first test component is going to be the price and the second test component is going to be the total price text over here so i have added view and for the view we'll add a test component and give the price of 1500 and also we are going to add this type to the test component so for the test component we give the color of blue so the colors dot blue then we give it a fun twitter board and a font size of 18 pixels so it's a font weight give it bold and i'll give it a font size of um 18 pixels i'm going to hit save so right now we have the price so i'm going to duplicate this then i want to change this to um total price so changes to total price and over here i'm going to change this to 12 pixels and also we change the color to a gray color and hit save and that's all for the um price and also the total price text so right now i want to add the book now and btn so to do that you are going to add a view and for the view we give the style of um book number btn so this style dot book now btn before we add this tab i want to add a test component for the button so give the text of book now hit save so right now we have the text so the next step i want to style the text so for the text so i'm going to give this style we'll give it a color of white so i'll say color i'll say colors dot white and that's all for the style so right now i'm going to start the book now ptn style for this type i want to give the height of 50 pixels we give the justify content of center align items of center so i want to keep the background color of dark so say color dot dark and also give the color radius of 10 pixels and a padding horizontal of 20 pixels so separate radios 10 pixels and a padding horizontal of um 20 pixels as a padding horizontal i will give you 20 pixels hit save and that's all for the book now button so that'll be all for digital screens components so actually we forgot to add snap interval to the flat list listing this card which is going to give it a correspond effect so to do that inside the home screen and the flat list listing the um card we are going to add the props of snap in tava [Music] and i want to give it an interval of width minus 20 pixels so right now if i save so if i scroll the card and i release it's going to snap which is going to give it this carousel effect so let's take a look at ui once again so over here we have the onboard screen with this image and the indicator and also we have this find your sweet home text and below it you have this text and right if i click on the button it's going to take us to the home screen inside the home screen we have the header the search input the softbot team this card over here and below it you have the category list and also i can click on the category list then below the category list we have the um cards and once i click on the card it's going to go to those screen so we have the image of digital screen the virtual thought tag the title rating the location and also we have the facilities and the details then below the details we have the interior image and the footer over here and that offered the video if you find the video helpful please like and share and see if not subscribe to the channel please consider subscribing turn on post notifications so that notify anytime upload a new video and i'll see in the next video thank you

Channel: kymzTech

Views: 11,940

Keywords: react native home rental app ui, react native travel 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 ui design, react native app, react native project, react navigation, react native design, react native travel app, travel app ui react native, learn react native

Id: 6bcdk5to96A

Length: 74min 48sec (4488 seconds)

Published: Mon Apr 05 2021

Reddit Comments

[u/boshanib]

This place needs better moderation. It’s quickly turning into a place where people just advertise their businesses and YouTube channels without asking proper value

[u/BobbaHund]

Click bait!