HOTEL BOOKING APP UI USING REACT NATIVE

hey guys this is hakeem welcome back to the channel so in today's video i'm going to show you guys how to build this hotel ui app using react native so stay tuned [Music] so this is i'm going to be doing in this video let me walk you guys through the app so over here we have a test of find your hotel in paris and right here we have a person icon below it we have this search input with the search icon and below it we have the list of categories and once i click on it it's going to select the categories below it will have the list of cards with this carousel effect i'm going to show you guys how to create this carousel effect and also i'm going to show you guys how to create this animation below the car we have a test of top hotels and we have a text of show all which actually does not link to any page right now and below it we have a similar card with different size and different height now once i click on this card it's going to go to detail screen with the um hotel image and over here we have the back icon and if i click on it it's going to go to the home page right here we have the name of the hotel the location of the hotel the star and the rating and over here we have the number of reviews below here we have the details of the hotel and have a test of price per night and right here we have the price of the hotel and over here we have a button notebook now so this is what i'm going to build in this video i'll make it projectively before you guys download by putting the link in the description down below if you like the video please like and share know if not subscribe to the channel please consider subscribing don't post notifications and find upload a new video and that's why i do let's start coding okay guys i already created a project i know i've started the project so i'm gonna walk you guys through this touch of the project so right here we have a folder called src and inside the folder you have a folder called asset so this asset folder hold the hotel image of the app right here we have a folder called const so this cons folder is holding to file the color file so this color file is the colors for the app then right here we have a hotels.js so this file is holding the hotels of the app so just an array of an object of each hotel each object has a property of id name of hotel location price image and details of the hotel then right here we have a folder called views and inside the folder we have a folder called screens so this screen is holding the screens of the app you have the home screen so inside the home screen we have a a home screen component and inside the component return is safe area component which will return the test component and inside the test component will add a test of home screen and right here we have the details screen inside the test can return the scroll view component and also return a test company test of details so inside the app.js we return the notification container so making use of the react navigation for the navigation and also making use of the vector icon for the icon inside navigation container we added the status bar we give the background color of white and also we gave it the bar style of that content so that the item in status bar will show up then below it we have the stack navigator we give the screen option and we give the header option to force so this is going to get rid of the header of the app and right here we add the screen the home screen and the details screen and that's all for the structure of the project let's start coding so right now i'm going to open the home screen and start working on the home screen so inside the home screen i'm going to get rid of this text component then we are going to start the safe area view component for the safe area view component you are going to give it a flex of one so i want to take the available width and the height and over here we are going to give the background color of arm white so we get the color from the colors object so say colors dot white and that's all for the safe area view component then over here we are going to add the view for the header so um let me bring up the ui so right here we'll add a view and we give the style of header this way is going to hold this text and this um passing icon so right here i'm going to add a view and i'm going to give it a style of header so say style and say style.header which you are going to create soon so right here we are going to create a style so create a style we'll say const i'll say style goes to style sheet so we put the style sheet and say create then over here i'm going to add the header style for the header style i'm going to keep the margin top of 20 pixels we'll give it a flex direction of row we give to justify content of space between and give the padding horizontal of 20 pixels so say padding horizontal give them 20 pixels and that's all for the header style so right now i want to add the element inside the header so we are going to add the text define your hotel in paris text and also we are going to add the icon so inside the header we are going to add a view so this view is going to hold the text so the first text we are going to add is um a text or find your hotel so say find your hotel and this is text right now so right now i'm going to um start the text but before we slide the text we are going to add this type to this view we are going to give the padding bottom of 15 pixels so say padding bottom and give 15 pixels and that's all for this die so right now we are going to slide the text so for the text we get a font size of 30 pixels a font width of both and that's all for the text so right now i want to add under view this view is going to hold the um this text right here so actually we are having two texts so the first text is just the text we add right now then we are going to add on that view so this video is going to hold two texts the first step is going to be the in text then we'll add on that text of paris so this bar is going to have a primary color so that's why we are adding different text components in order to style the text separately so over here we add the view save view and inside the view we are going to give it this style so first id view we give the flex direction of row and that's all for this style so right here we'll add the false text so add the text component then we'll give the text of in then we are going to style the text so for the text i will give the font size of 30 pixels also down get the font weight off board font weight and give it bold so right now we have this text so we are going to duplicate this and change this text to paris then we are going to add the color of primary so the colors dot primary so right now we have the text so the next step i want to add this person icon so below this view that is holding the text i want to add the icon so add the icon component we are going to give the name of person dash outline source in name consider passing dash outline then right now we are going to style the icon so this is the icon over here so i give it a size of 38 pixels then we give it a color of gray so say color and get the color from the colors object then we say dot gray so right now that's all for the icon and the text so the next step we're going to add this search input so the reason we are adding this scroll view is because we want to be able to scroll if the um element overflow in a smaller screen size so before we add the size input we are going to get rid of this scroll um bar so to do that we say show vertical scroll indicator and set it to false so inside the scroll view right now we are going to add the search input so for the search input i want to add a view so this view is going to hold the search icon and the text input so right here we added view and for the view we are going to give the style of search input container so this time i'll give it a style of such input container so right now i'm going to get this style i'll start styling it so right here i'll add this style and for this type we give the height of 50 pixels we'll give the background color of light so zebra and color colors dot light then we give it a margin top of 15 pixels so it's imagine top 15 pixels then right now we want a space from the left so we're going to imagine left of 20 pixels so i'm able to have this space so over here i will say a margin left and give it 20 pixels and this is the size input right now so the next step i want to add the round shape so to add the round shape we give the butter top left radius and set it to 30 and also give it a border bottom left radius and give 30 pixels also so right now we have the round shape so the next step i want to give the flex direction of rows that we want to position the search icon and the input from left to right that will give them align items of center so say flex direction zero then align items to give center and that's all for the search input container so right now we are going to add the search icon down at the text input so inside the search input container will add the icon so add the icon component and we want the search icon so give the name of search for the search icon so right now we have the search icon we give the size of 30 pixels so say size 30 pixels i'll give it a margin left of 20 pixels so add the style let's imagine left will give it 20 pixels and that's all for the icon so right now we are going to add the text input so add the text input and we are going to give it a placeholder of search so say placeholder say search and we are going to add a style and for this type we give it a font size of 20 pixels so the font size 20 pixels and we'll give the pattern left of 10 pixels and i think that's all for the search input so right now i'm going to start adding the the category list that this categories over here so to add a category list we're going to create under component for the category so right here we create a component called category list so say const category list so for the category list component over here we are going to return a view and for this view we are going to give the style of category list container so right here i'm going to add this style and for this tab we give the flex arm direction of row a justify content or space between to justify content space between then imagine horizontal of 20 pixels and imagine top of 30 pixels let's imagine top and give 30 pixels and that's all for this style so right now i want to start adding the categories so to add the categories we are going to map through the category so this category is right here we are going to iterate through the categories so over here will map through the categories so say categories so map to the array and over here we'll add the function say item for the item then the index then right here we are going to return a touchable opacity then for detachable opacity we are going to give it a key so that react won't um yell at us so we give the key and give the index as a key and also we add an active opacity of 0.8 so it's active opacity 0.8 so this is going to increase the opacity once we click on it then right here we're going to add a view inside the view we are going to add the a test component so this test component is going to render all these text so inside the view will add a text component and it's going to render the text so i'm just going to add the text and for the text i'll just pass in the item which is going to show the text right now so actually it's not showing the text because we've not called this um category list component so below the search container will add a component all right now it's going to render the text so we have the category list right here so the next step i want to start styling the category list so to style the category list we'll add these style props and inside this style you are going to create a sky called category list text so actually we are going to spread this style because we'll be applying other style to it so say style those category list text so right now i'm going to get this style and i'm going to start styling it so for this style we are going to give it a font size of 17 pixels then we'll give it a font weight of board there's a font to it we give board and that's all for this style so right now i want to add the color to the text so actually for the color i want to apply it depending if the category is selected or not so if the category is selected it's going to have the primary color which is this um blue color else is going to have the default color which is this dark color so to do that over here we add the color um props and right here we are going to add the condition so before we add the condition we have to add a state so we'll be able to keep track of the selected um category so right here i will add a state so say cost and say selected category index then here is going to be set selected category index so this is going to be used to select the category index which is going to be um react.ustate so we are using the new state hook so say use date and by default we want the selected category to be zero which is going to select the the all category so right now i'm going to hit save and we are going to come back to this color so right now for the color we add the condition so say if the selected category index this goes to this current index applied the primary color damage is selected else apply a gray color so right here we'll say if selected category index is close to the current index apply colors dot primary i also apply colors dot gray and now hit save and right now should have this all category selected so actually it is not selecting this first category because it should be select category not set select category so right now we should have this all category selected so the next step i want to add this line below the text so below this we are going to add a view below this test component we add a view and we are going to start the view so you give this style and for the style we are going to give it a height of 30 pixels so say height 3px rules we give the width of 30 pixels we give the background color of primary so say colors dot primary and we give it imagine top of two pixels to say margin top give to pixels so right now we have this line below the text but actually we want this line to only show up if the category is selected so to do that i want to do the same thing so i want to add the condition right here so say selected category index is goes to the index will just show d view so i want to get the view then right here i'll paste the view so this is going to show the view only if the category is selected so that's all for this style so the next step we are going to find a way to select the category once um exactly click on the text so to do that you are going to add the on press prop and inside the on press probe to add a function inside the function we call the set selected category index i'm passing the current index i hit save and right now if i click on the category it's going to select the category so that's all for the categories right now so the next step i'm going to add the card to the page so to add the card i want to create a component called cards so over here i'll create a company called cards then we're going to return a view so right now we are going to add the flat list component so we're going to list this card so over here below the category list we'll add a view and inside this view we are going to add the flat list component so for the flat list component i want to add some props to style it so we'll add a content container style so it's a content container style and for this style we give it a padding vertical of 30 pixels and a padding left of 20 pixels so it's a padding vertical 30 pixels and we give it a padding length of 20 pixels so um right now for the data we are going to add the hotel like this list of the hotels right here so over here we say hotels we import the hotels and next step i want to get rid of the scroll bar so say show horizontal screen indicator and set it to false so and below it we are going to add render items which is going to be the card component so add the function and we are going to pull out the item and also pull out the index so over here we'll add the card so i want to return the card which is the card component sorry should be card note cards so i'm going to rename this to card and right now hit save we'll come back here then inside the card component we'll add the props so give the hotel props so say hotel which is going to be the item then i'll give it an index of the index so inside the card component we make sure we return the view so save it on and this should fix the error so i want to bring into hotel um props then i'm also bringing the index so for the view we are going to give it a style of card and right here i will add a style so for the style of card we are going to spread it because we'll be adding a style later so say style dot card then right now i'm going to create a card style so over here we add the card style we give the height of 280 pixels we give it a weight of card weight so i'm going to create it with soon so i'll say weight and give it card weight and for the card width we are going to take the screen width then we divide it by 1.8 so we want each card to take um almost half of the screen so over here we are going to create the card width so to create a card weight we'll first get the screen width and to get the screen weight we'll make use of the dimension api so pull the width from the dimension so save it i will say dimension so importing dimension don't say get and get the screen so right now we have the app width so now we are going to create the card width so create the variable called card weight then over here we say card weight is going to be width divided by 1.8 and right now we have the card weight so i want to go back to the card style then over here we give it an elevation of 15 and give the margin right of 20 pixels we give the border radius of 15 pixels so the border radius give 15 pixels and we are going to give it a background color of white so say background color and say colors.white and right now we have the card so the next step i want to add the horizontal props to the flat list so wants the card to be in a horizontal position so say horizontal right now we have the card over here so right now we are going to start adding the element inside the card so the first element we are going to add is the image of the card so right now i'm going to add the image component and make sure we import the image so over here we'll import the image component then we are going to add the sauce to the image component so add the sauce and for this sauce you are going to get the image from the hotel object so say hotel dot image all right now we have the image so the next step i want to start the image component so for the image component i want to give the style of card image so say style i'll give it a style of card image and i'm going to get this style and right now start adding this type so for the card image style we give the height of 200 pixels a weight of 100 percent so the weight gives 100 percent then we give it a product top radius of 15 pixels and a butter top left radius of 15 pixels also to say but that top radius and 15 pixels then border top right radius 15 pixels also so i want to hit save and right now we have the image so um the next step i want to add this price tag to the ad so for the price tag below the above the card image we are going to add the price tag so add a view so the price tag is going to be a view inside if you are going to have the text which you are going to show the price of the hotels so right here we'll add a view and for the view we'll give it a style of price tag so this type will say style dot price tag then inside the view we are going to add the text the test component for the price so say text then for the test component we are going to add the text so to add the test so add a dollar sign then over here we'll add the text so get the text from the um from the hotel object which is the price so say price i hit save and right now we have the price so the price is pushing the image right here because we've not added any style to it so we are going to first type the text before we start the view itself so i will add the style and for this type i want to give it a color of white so say color say colors dot white then i'll give it a font size of 20 pixels and we give it a font weight of board i'm going to hit save and right now we are going to style the view so i'll get this price tag style and right here i will start styling it so for the price tag we give the height of 60 pixels so say height 60 pixels we give it a width of 80 pixels we get a background color of primary so see background color and the colors dot primary we give the position of absolutes so we want to be able to position the view absolute to this um card view over here and we're going to give the z index of one so that if it's going to be on top the image so say the index and give it one so right now we have the view on top the image so next step i want to position it to the right so say right i'll give it zero so this is going to push it zero from the right then we give it a border top right radius of 15 pixels don't give the border bottom left radius of 15 pixels also so right now we have the view with the curved shape so the next step i want to center the the text vertically horizontally so to do that we give to justify content of center and we are going to give it an align items of center also so align items and give center so i think that's all for the price tag so um the next step we're going to add these card details over here so to add the card details below the image component or add a view i'll give the style of card details so say style then we'll give it style dot card details so this card details is going to hold the name of the hotel the location this icon the star and the number of reviews so over here we're going to add the card detail style we say card details we give it a height of 100 pixels a powder radius of 15 pixels so say for that radius we give 15 pixels then we are going to give it a balance color of white so the background color say colors dot white then we give the position of absolute so the position gives absolute then we give it a bottom of zero so one two position is zero from the bottom so bottom zero then we give it a padding of twenty so say padding then we'll give it 20. then below the padding will add a width of 100 percent so i wanted to take the full width of the card so right now we have the card details so the next step i want to start adding the hotel name the location the icon and the star system so inside the car details we are going to add a view so this view is going to hold the hotel name and this icon over here so right here i'll add a view then inside the view we're going to add a test component so this test component is going to hold the hotel name so get the name from the hotel object then right now i'm going to start the test component so this is the hotel name right here so to style it to add this type props then we are going to give it a font rate of both so the font wait we'll give it both and we're going to give it a font size of 17 pixels and that's also a test component but there is no padding right here so we are going to fix it right now so over here in the card details this should be party note padding left and it's going to be 20 pixels and right now we have the padding so the next step we're going to add this icon over here so before we add this icon we're going to add this um location text right here and to add the location texture i want to duplicate this before do that actually this view should be in a view so add a view and i'm going to take this view and i'm going to put it right here so this view is going to hold this view that is holding the hotel name and the details and also it's going to hold the icon so actually we have to slide the view also so we give the flex direction of row and we have to justify content or space between then right here we are going to change this to location so say hotel dot location so this is going to show the location of the hotels and right now i'm going to type the location input location text so for the text we give it a font size of 12 pixels and get rid of this font which would give it a color of gray so say color i'll say colors.gray so that's all for the hotel name and the hotel location so the next step i want to add this icon so below the view that is holding the both the hotel name and the location we are going to add the icon component so the icon and we give it a name give the name of bookmark dashboard so say bookmark bookmark dashboard then we are going to give it a size of 26 pixels so say size 26 pixels and we give it a color of primary and that's all for the name location and the icon so the next step i want to add this star system and also we are going to add the number of reviews so to do that below this view that is holding the name and the icon we are going to add a view so this view is going to hold the star and the number of review so add the view so we are going to start the view we give the view a style we give the flex direction of row it justify content of space between and we give it a margin top of 10 pixels so it's imagine top and give 10 pixels so right now inside the view we are going to add the view so this view is going to hold this task so inside this view add a view and also we are going to add this type to the view so we give it this flash direction of row and that's all for this type then over here we are going to add the star so since this is not a reward um project we are just going to hard code this task so i want to add an icon component then we are going to give the name of star using name we'll give it star then we give it a size of 15 pixels so this size we give it 15 then we are going to keep the color of orange so the colors colors.orange all right now i'm going to duplicate this task so duplicate this i'll hit save and right now we have the four stars so we are going to add the fifth star and this fifth star is going to have a color of gray so change this to gray and right now we have the fifth star so the next step i want to add the number of reviews so to add the number of reviews um outside the comp the view component that is holding the star we'll add a test component and inside the test component i'm just going to hard code the value so i'll say 365 reviews then right now i want to start the test component so add a style we'll give it a font size of then a color of gray so say colors dots gray and that's all for the text right here so um i think that's all for the design of the card so the next step i want to add an overlay to the card which you are going to make use for the animation later so over here i'm going to add a view so this view is going to serve as the overlay for the card we'll give the view a style then we are going to spread this style so say style and we give it a card overlay then we are going to add the style right now and for this type we give it a height of 280 pixels so wanted to take the full width of the card then we are going to give the background color of white so i'll say colors dot white and we give it a position of absolute source a position absolute we give it a z index of 1 of 100 sorry so i want the overlay to be above or the element inside the card then also i want to add a width i'll give it a bit of the card width so say card weight and right now we have the overlay so i want to change the opacity of this overlay anytime we scroll the um card so over here i'm going to give the border radius of 15 pixels then right now inside the card i'm just going to add an opacity of zero so it's going to be transparent for now so it gives an opacity of zero so it's going to be transparent so right now we are going to start animating the card so i want to give it the color cell effect so for the animation we are going to create the animated value so this value is going to be used for the animation so over here will create the animated value so call it scroll x you say const scroll x which is going to be react dot use ref and inside the hook we are going to create the animated value so say new animated we import animated api i'll say dot value i'm passing the value of zero for default and right here i'll say dot current so the main reason we are using the use ref hook is because we want to react to keep track of this um this value if the component re-renders so right now we have the scroll x value so the next step i want to take the scroll s value of the flat list and we are going to set it to this value which i want to use for the animation so in order to do that we are going to transform the flat list to animated flat list so over here we will change this to animated dot flat list inside the animated flat list i want to add the unscrew prop so this file has an event every time we scroll so right here i will say unscrew and for the unscrew event to add the animated dot event so this method is going to take the s value of the flat list and it's going to set it to the scroll x um value we just create so to do that we'll add an array then we're going to pull out the content offset so say native event i will say content then we get the s position i'll map it to the scroll x then over here we are going to set the use native driver to true so this is just to tell react native to leave the animation to native which is going to give our animation a better performance so right here i will say um use native driver and set it to true so note this use native driver only works for the transform properties and the opacity property so if you are trying to animate the layout such as height width or color you have to set this i'm using the driver to force so right now i'm cutting the offset of x and we'll map it to the scroll s animated value so the next step i'm going to interpolate the animation so over here we are going to interpolate the animation and before we do that we are going to create an input range so this input range is going to be mapped to the output range so this is just the point of the animation so say const will give it a name of input range so the input range which is going to be an array and for the input range we want the index index minus 1 and the card width and we want the index multiplied by the card width then we want the index that is the current index plus one and multiplied by the card list card weight so this is just they want to animate from the previous to the current then to the next card so over here we are going to add the opacity so first we are going to animate the opacity so say const will give it a name of opacity and it's going to be the scroll s so use the scroll s value to animate it then we are going to interpolate so for the interpolation we are going to give it this input range then we are going to give it an output range of 0.7 comma 0 comma 0.7 so we want the previous card to have an opacity of 0.7 the current card to have an opacity of 0 which is going to be transparent and the next cut will have the opacity of 0.7 so over here inside the opacity i'm going to get rid of this 0 and i'll save it so right now we should have the opacity and in order to make use of the animated opacity we have to convert this to animated view so say animated dot view and right now we have the opacity on the card so if i scroll this is going to animate the opacity so this card is the previous card right here so right now if i scroll here it's going to be the current card which is going to animate the opacity to zero and it's going to give it this um transparency so right now we're going to animate the scale also so to animate this scale the main view of the card i want to transform it to animated view source animated dot view and right here we'll also change this to animated dot view then right here we are going to create a animated scale so i'm going to take this i'll duplicate this then and right i'm going to change this to scale and over here we'll change this to point eight changes to one and change this to zero point eight so we want the the previous card to have a scale of zero point eight the current card to have a scale of one and the next card to have this scale of 0.8 so right now inside here i'm going to add the transform property so add transform property we'll give it an array don't pass in this skill so it's a skill so right now we have the animated skill so if i scroll once the card comes to view it's going to animate to one which is going to have the full skill so right now we want each card to snap so let me see if i scroll right here and i release it it's going to snap to its current um position which is going to give you that carousel effect so to do that inside the animated flat list we are going to add the snap to interval props so this knob to interval i'm going to give the card width so right now if i scroll each card is going to snap to the card width which is going to give it this color set effect and right now we are going to add a padding right to the flat list we want a padding right here so right here add a padding right and for the padding right we give it a value of card width divided by 2 subtract it from 40. so with this value the last card is always going to be in the view regardless of any screen weight so that's all for the card animation so the next step i want to add these top hotels and they show all text so over here below this view that is holding the flat list we are going to add the view inside if you are going to add a test component before adding test component to add a style to the view for this type we give the flex direction of rho and we give it a justified content of space between and we are going to give it a margin horizontal of 20 pixels just imagine horizontal will give 20 pixels so inside the view we are going to add the test component so we'll add a test component and we are going to give it a text of top hotels so set up hotels then over here i want to give it a style so i'll say style we give it a font tweet of bold then i'll give it a color of gray so say colors dots gray and right now we have the text so right now i'm going to duplicate this then i'm going to change this to show all so i'll say show all and we are going to modify this type for the show all text so for the show all tests we are going to get rid of this font weight and that's all for the show all text so the next step i want to add these cards over here that is the top hotels card so below this view we are going to add the flat list component which is going to list the card so it's a flat list i'm going to add the horizontal props then we'll get rid of the scroll bar so say show horizontal i'll set it to false and also we are going to start the flat list so over here i will add a content container style i'll give it a pattern left of 20 pixels so the pattern left 20 pixels it will give it a matching top of 20 pixels and we are going to create a padding bottom of 30 pixels and that's all for this style so right now we are going to create a top hotel card component for the card so right here we create a component called top hotel component so say const you create a function say top hotel or returning view so say return so right now i'm going to add the component to the flat list so over here i will say render item i'm bringing the top hotel card component so the top hotel card then i'm going to extract the item props then over here we'll add the hotel props to the hotel and give it the item so right now i want to start styling the card so for the card we are going to give it a style of top hotel card so say style we give style dot top hotel all right now we are going to add this style so i'm going to get rid of this curly braces right here and i want to start styling the card so for the top hotel card i want to give it a height of 120 pixels we'll say height give it 120 pixels and give it um a width of 120 pixels also because we want the card to have a square shape then we are going to create a brown color of white so say colors dot white and we give it an elevation so salivation we give 15 and also we are going to give it imagine horizontal of 10 pixels because imagine horizontal give 10 pixels and we give it a vola radius of 10 pixels so separate radios give it 10 pixels and that's all for the top hotel card so the main reason the card are not showing up right now is because we didn't add the data property so add another property and we give it a data of hotels so this is going to list the card right now so right now we have the card so the next step i want to start adding the element inside the view so the first component i want to add is the image component so add an image component and for the image component we are going to give it a style so we give it a style of top hotel card image so this type i'll say style dot top hotel card image all right now i'm going to add this style so i want to get this style we give the height of 80 pixels we give it a width of 100 pixels 100 percent so want the image to take the full width of the card then we are going to give it a border top right radius of 10 pixels then i will duplicate this and i'll change this to left for the left and right now i'm going to add the sauce to the image component so it says source and get it from the hotel props we say hotel dot image we get the image so right now the image should display so the next step i want to add the name and the location so below the image you are going to add a view this view is going to hold the name and the location of the top hotels so right here we'll add the view and we're going to start the view so give the va style we'll give it a padding vertical of 5 pixels so say padding vertical we give 5 pixels we give it a padding horizontal of 10 pixels then inside the view we are going to add the test component for the name of the hotel and get the name from the hotel object so say hotel dot name so right now the name should display so we are going to style the text so for the text i will give it a font size of 10 pixels so the font size we give 10 pixels i'll give the font width of bold and that's all for this style so now i'm going to duplicate these text and we'll change some style so we're going to change this to 7 pixels and we'll change this to gray so say color i'll say colors dot gray and that's all for the hotel name and the hotel location so the next step i want to add this star and the rating so to add the star and the rating above the image component to add a view so this view is going to hold the star and the rating so we will give the va style for this type we give the position of absolute to the position absolute we give it a top of 5 pixels right of 5 pixels also we give the z index of 1 because we want the view to be above other components then over here we give it a flex direction of row and that's all for this view so right now i want to add the icon that is this star um icon over here so inside the view will add the icon component i'll give the name of star so i want to start icon and we are going to give it a size of 15 pixels we get 15 pixels then we give it a color of orange so it's a color and get the colors from the colors object and we'll see dot orange so right now we have the icon so the next step i want to add the rating so to add the rating we'll add a test component and i'm just going to add a value of 5.0 then we are going to style the test component so for this type we give it a color of white we get a font weight off board and give it a font size of 15 pixels so the font size will give it 15 pixels and that's all for the star and the rating so that's all for these top hotel cards so the next step i want to add the unpressed props and once we click on it we want to navigate to the details screen so to do that inside the card component we are going to wrap this animated view with um a touchable opacity component so right here we'll add the touchable opacity component then i'm going to take this animated view i'll cut it then i'm going to paste it inside the touchable opacity component and for the total opacity component we are going to get rid of the active opacity so it's active opacity and set it to one then we'll add the unpressed props so they on press and once you click on the card won't take to use that to the details screen so to do that i want to make use of navigation so i will add a function and this function is going to point to the navigation object so i have to bring in the navigation object from the react navigation so i'll say navigation and right here we are going to call the navigate method so say navigate and i'm going to pass in the details screen so want to be able to navigate to the details screen right here so i want to get the detail screen from the route and over here i'm going to paste it so right now if click on it it's going to cause too detailed screen but while navigating want to also pass the um hotel information to the digital screen so that will be able to make use of it in the screen so right here to do that we are just going to pass in the hotel object so i'll say hotel all right now should be able to access this object in digital screen so if i click on it it's going to take us to the screen right now so actually having a typo so this should be navigate not navi vr gate so i hit save all right now if you click on it it's going to take us a little screen so um right now start working on the little screen before i start working on details screen we want to be able to navigate to the details screen only if we click on the active card so if we click on this previous card right now it's going to cost to the details screen and also if i scroll if you click on this previous card over here is going to take us to the details screen also so you want to be able to only navigate to the details screen if we click on the active card to do that we have to get the active card index then we are going to check the current card index and see if the current card index is equal to active card index we are going to enable the on press else we are going to disable the on press for the dodgeball plastic component so right now we first have to start the active card index so to do that we are going to create a state for the active card index so right here i'm going to create a variable i'm going to call this active card index so say active card index then over here we'll add the select active card index which is going to be react dot use state so and for the index you're just going to give it zero so right now i want to be able to get the active card index and to do that inside the flat list we are going to add a props called a momentum scroll end so this is going to fire anytime the scroll ends and once it fire is going to return an event which we are going to pull out the scroll x from so with this scroll s will be able to get the active card index so inside the animated flat list will add the props of our momentum scroll end and inside here we'll add a function then we'll get the event and we are going to get the content of set of x so i'm just going to console.log the content of sets like guys can see so as the console.log then we'll say event.nativeevent.content offset.x so this is going to give us the scroll s position so if i hit save right now so if we scroll this is going to give us the x value any time this scroll ends so with this value right now we are going to take the value then we are going to divide it with the card weight and we are going to round the number which is going to give us the active card index so over here we will say math dot round so want to round the number then inside here we'll divide this value by the card width so the card width so if i hit save and right now for scroll so as you can see the first card gave us zero index so if you scroll the second card is going to give us the index of one will scroll um the third card is going to give us index of two so with this index right now i'm going to use it to compare the index of the card then if they are the same we are going to enable and press else will disable and press so before we do that we have to set the active card index to this index right here so i'm just going to get rid of this console log so i'll just pull out this i'll change this to set active card index then here i'm going to put the value so it is going to set this to this value so right now for scroll is going to set the state to this value right here so we are going to go to the card component and inside the card component right now we are going to add the disable props so by default we want the card to be disabled so inside here we are going to check if the active card index is not equal to the current index then it's going to return false which is going to enable the um touchable opacity else it's going to return true which is going to disable the touchable opacity so right now if i click on this card it's going to go to the details screen or if i click on this previous card it's not going to take us to the details screen so you're going to disable this so if i click on this take us to the details screen if i click on this or this is not going to take us to the details screen so right now we are going to start working on the details screen so i want to open the details screen so for detailed screen we have this image which is um below the status bar right here and also we have the header so first we're going to add this image so right here i'm going to get rid of the test component and for the scroll view we are going to give it a style so we'll say content style we use the background color of white so the colors with the colors dot white then we give it a padding bottom of 20 pixels so that's all for this style so right now we are going to get rid of the scroll bar so say show vertical indicator and set it to false all right now i'm going to start working on the image so for the image you are going to add the image background component so the image background and for the image background component we are going to give it a style of header image so say style i'll say style dot header image so right now i'm going to create this type so say const which is going to be the style sheet dot create and i'm going to add the header image style and for the other image type we are going to give the height of 400 pixels give it a border bottom right radius a border bottom left radius we give it 40 pixels also i'm going to give it a flow of heating and that's all for the header image style so right now i want to add this source so actually to add the source we have to first pull out the details from this component and to do that we are going to get it from the route props so first we are going to bring in the navigation because i want to make use of navigation to navigate back to the previous page then over here i want to bring in the route probes and inside this route props we are going to get the um details that is the item so to get the item say cost item and i'm going to get it from the route then we get it from the params so say params so right now if i console log this this is going to show us the items so i have it undefined this should be params not param so i hit save and right now we have the details of each hotel so we have the details the id the image location so inside the image background component we are going to add the source the source is going to be from this item object and we get the image so say dot image i'm going to hit save and right now the image should show up so next step i want to push this image under the status bar so to do that you're going to add the status bar component so say status bar and for the status bar we're going to give it a bar style of light dash content and we're going to give the props of translucent so with this props the app is going to be drawn under the status bar so if i hit save right now we have the app drawn under the status bar but the main reason we are not seeing the this image is because this status bar color is set to white so in order to see the image you want to give the status bar a transparent color so say background color and i want to give it an rgb a color so say rgba so i just going to give it a black color with zero opacity which is going to be a transparent color so if i hit save right now the image is showing below the status bar so that's all for the image right now we're going to add the header so this header is going to hold the back icon on this save icon right here so inside the background image you had a view so this view is going to be the header view so i want to give it a style of header and for the last type we are going to give it a margin top of 60 pixels we give it a flex direction of row because it flex direction we gave it to row we give it an align items of center imagine horizontal of 20 pixels so imagine horizontal 20 pixels will give it to justify content of space between so that's all for the header style so right now we're going to add the icon inside the header this icons over here so for the icon we are going to add the icon component and we give it a name of arrow back dash ios then we give it a size of 28 pixels a color of white so say color i'll say colors dot white and right now we're going to add on press to it then once we click on it it's going to take us back to the um home screen so right here we'll say on press or add on press props and make use of the navigation and object then we'll call the go back method so this is going to take us to the um home screen so if i click on it right now it's going to take me to the home screen so right here i'm going to duplicate this icon then i'll change these to bookmark border and i'm going to get rid of this on press so we don't want to go back once we click on the bookmark icon so right now we have the icons so the next step we're going to add this icon over here so to add the icon we are going to add a view so this view is going to hold this icon and the rest details of the screen so over here below the image component will add a view so this view inside the view we are going to add under view for the icon so this view is going to hold the icon so we give it a style we'll say style dot icon container and right now we are going to style the icon container style so i am at this style we are going to give it a position of absolute i'll give it a height of 60 pixels a width of 60 pixels then we are going to get the background color of primary so say background color and give colors dot primary so i hit save and right now we have the um icon container so the next we are going to position this icon to the top and to the left so right here we'll give it a top of minus 30 pixels it's going to position it to the top and also we give it a write sorry right of 20 pixels so say right so this is going to position it 20 pixels from the right then we are going to give the icon a round shape so i give the polar radius of 30 pixels then we are going to give a justify content of center and we give it align items of center so this is going to center the icon inside the view so inside the icon container now i'm going to add the icon and give it a name of place so say name we'll give it place then we give it a color of white and we are going to give it a size of 28 pixels so that's offered icon container and the icon so right now i'm going to add a view so the view is going to hold the hotel name location details and more so write our added view like the below the icon container view or add the view and the view is going to have a matching top of 20 pixels so give it a style we give the margin top of 20 pixels and we give it a padding horizontal of 20 pixels also to say pattern horizontal we give 20 pixels and right now we have the view so the next step we're going to add the hotel name so to add the hotel name inside the view we'll add a test component then we're going to get the hotel name from the item object so item dot name then right now i want to style the hotel name so add this type we give it a font size of 20 pixels we need the font weight of board and that's all for the hotel name so right now i'm going to duplicate this for the location so i'll change this to location and also we are going to change this type so for this we are going to change it to 12 pixels and for the front it will give 400 then we give the color of gray so say color colors dots gray then we give the margin top of 5 pixels and that's all for the hotel name and the location so right now we are going to add the star and the rating so for the star and the rating we are going to add a view below the location that is the location text and we are going to start the view so this view is going to hold both the star and the rating so give the view a style and for this type we give the margin top of 10 pixels we give it a flex direction of row then we give it a justify content or space between so right now we are going to add this style so for this tab we are going to add a view so this view is going to hold the star and the rating so the previous view we added is to hold this poster and these reviews so right now this view is going to hold holiday star on this rating so right here we'll add a view and for the view add is type to it so give this type and give the flex direction of row and inside the view add under view so this view is for this star i'll give it a style and a flash direction of row also and right now we are going to add the the star so for this stars we are going to add an icon component and give the name of star we give it a size of 20 pixels so say size 20 pixels then we give it a color of orange so right now i'm going to duplicate this five times four times then over here i'm going to change the color to gray for the last star and outside the view holding the star we're going to add the test component so this is just for rating and inside the text will add the value of 4.0 then over here we'll add this type to the test component we'll give it a font width of board a font size of 18 pixels and imagine left or five pixels so that's all for the star and the rating right now we are going to add the reviews that is number of the review and to add the number of review outside this we are holding the star and the rating underwriting we're going to add the test component inside the text component to add a text of 3 um 65 reviews then right now i want to style the text so to style the text we'll give it a font size of 13 pixels and give it a color of gray and that's all for this so um now we are going to add the details that is the details of the hotel so to add the details outside this view we'll add a view and i'm going to give it a style of margin top of 20 pixels so it's imagine top 20 pixels then inside you are going to add a text component so add the text component and add the details so get the item object and get the details so see dot details and also we are going to study details right now so for the details we give it a line height of 20 pixels for this type line height we give 20 pixels and we give it a color of gray and that's all for the details so now we're going to add these text and the price tag so over here we are going to add the view this view is going to hold this text and the price tag so for the view we are going to give it a style of margin top of 20 pixels a flex direction of row we give it a justified content of space between and we are going to give it a padding left of 20 pixels so say padding left will give 20 pixels then we give it a line items of center so now we are going to add the text that is this price per night text inside the view add a test component and add the text of price per night and over here we are going to style the text so for this type we give it a font size of 20 pixels i'll give the font weight of board i'll hit save and we have the text so right now i'm going to add the price tag so below the test component to add a view so um this view is going to hold the price and this text over here so for the view we give it a style of price tag so say style say style dot price tag all right now i'm going to add this type for the price tag view we give the height of 40 pixels give it a line items of center so i want to center the text we give it imagine left of 40 pixels and a padding left of 20 pixels then we give it a flex of one so say flex one and we're going to give it a balance of primary offset country all right now we have the view so the next step i want to add the round shapes over here so to do that to give it a border top left radius so the border top left radius will give you 20 pixels and give it a border or thumb left radius also we give 20 pixels then we give it a flex direction of row and that's all for the price tag view so right now we are going to add the text inside the price tag view so over here we add a test component and we are going to style the text before do that we will add the price so get the price from the item object so the item dot price and over here we are going to start the component so we give it a font size of 12 pixels i hit save and right now we have the text we are going to give it a font with of board we give it a color of gray then we give it a margin left of 5 pixels and right now we have the text so the next step i'm going to add this um plus breakfast text over here so to add the text i'm going to duplicate this test component then inside the text we get rid of this price and we change it to plus break first and now we are going to modify the style so um actually this should be 16 pixels so the price is actually bigger than the breakfast text and that's all for the for this text and the price tag so the next step we're going to add the button that is the book now button that is this button over here so outside this view we are going to add a view and i'm going to give the view a style of ptn so this is going to be the button so give this style i'll say style dot ptn all right now i'm going to add this tile for the body style we're going to give it a height of 55 pixels give the justify content of center align items of center then we give it imagine top of 40 pixels imagine top 40 pixels i want to give it a brown color of primary so the background color then we get imagine horizontal of 20 pixels and a border radius of 10 pixels and that's all for this spotting style so right now we're going to add the text inside the button so for the text you add the text component then we are going to give it a text of book now so say book now and right now i'm going to style the text so over here we give this type and for this style we give the color of white we'll give it a font size of 18 pixels a font width of both and right now we have the button with the text and i think that's all for this page so if i click on this it's going to go back to the home screen and if i click on this the hotel image is going to change as you can see the hotel image have changed so um let's take a look at the app and the design so right here we have the text the icon we have the search bar the category and we're able to select the category and also we have this card and this card right here and if i click on this it's going to cause to detail screen and inside the little screen we have the we have the hotel image the name of the hotel the location the star reviews details of the hotel this takes the price tag and the book now button and 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 and you'll find time upload a new video and i'll see in the next video

Channel: kymzTech

Views: 11,427

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

Id: TZWPHJVRedI

Length: 74min 2sec (4442 seconds)

Published: Wed Jan 20 2021

Reddit Comments

[u/nishanthdipali]

Looks amazing bro 😍😍😍

[u/dev_indie_]

Well, you have put in a marvelous effort. Congrats

[u/IntensePyjamas]

This is good work!

[u/darkmoody]

Looks great, just what I was looking for!