Travel App UI in React Native with Expo Router | 2024 Beginners Tutorial

hey guys welcome back to my YouTube channel today in this tutorial I'm going to show you how we can create this travel app UI in react native for this tutorial I have used Expo and for the navigation of it I have used Expo router so here you can see the app UI so here first we have the header and in the header we have the user profile image and this notification icon and after that we have a text and then this search area and then we have different categories these are the buttons of these categories and here we can see that all category have been selected if we select this mountain then you can notice that it is automatically changed its position from here to here and it has an animation for that with the selection of a new category the items at the bottom is being updated and then here we can see we have different items and we can visit any items from here and with that we are being presented with the details of that particular package and here you can notice that we have this parala scrolling effect for this image right and if we scroll it down that time this image is getting bigger and at the header section we have this button at the right hand side and this is the button to go back to previous screen right and at the bottom you can notice that these are appearing with little Delay from the bottom up so let me me show it to you once again let's see so you have noticed that that is also another animation which I have provided here so after these items we have another list of items for the travel groups and for this one I haven't added the detail screen it will be similar to these kinds of detail screen right so from this home screen to this detail screen and these buttom tabs these things have been created by using for outer so here we can go to different tabs I haven't created these screens yet for this tutorial we are just focusing on this home screen and this detail screen so if you are interested in these kinds of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification Bell icon so that you get notified whenever I post a new tutorial on this channel so without wasting any more time let's get started so now first I'm going to create the project and for that from the Expo documentation I'm going to copy this command so this will create an expo app with Expo outer let me paste that and hit enter now I need to provide the name of the app export travel app so it has been created now let's go to the app by this command and now I'm going to open this in Visual Studio code and let me position it properly and now run the project by this npm start command so here here we can see our project is running and here we can see the files related to this and this is the root layout page from where we need to start setting up our app so here I will have this stack but I don't need this model I will require this stabs and I don't need this theme provider also and with that I don't need this color scheme as well so let's save it and with that let me clear few things I don't need these files so I'm going to delete these so I have cleared all the unnecessary files and folders now let me Focus onto the layout of the tabs and here I'm going to create the tab Navigator and for the tab Navigator we need to create few files within this tabs group and first it will be index and let me provide a container style for this now let me copy this one for the other screens and those screens will be category and profile so here at the bottom we have five tab Navigator so that's why we have created these five files bookmark category profile search and the index for the home now we need to create the tab Navigator here in the layout within the tabs group and here we need to export tabs from export outer then let's create tabs. screen and then we need to provide the name and first it would be index so with that we can see these are the tabs which are showing over here so we can Define each Tab screen to customize those based on our requirement so first we will have the index then we will have the category and this name will be the name of these files and then we will have the search then bookmarks and at last we will have the profile so now here you can see the order have been changed now let's customize it based on our requirement so first we need to add the icons over here so for the first item I am adding the tab bar icon and for this one I will use ionicons this ionicons needs to be exported from Expo Vector icons for the icon name I will use compass for the size of it I will use 28 and for the color of it I will use color which I can receive as a prop here and then I can use it here and this color I can Define from this tabs Navigator and I'm going to add that in a minute but first let me add the icons for all of these tab screens so after adding that here we can see that it have been updated for the index so similarly for the category we need to provide the tab bar icon and for this one I will use material icons and the icon name will be P dashboard the size will be same and the color will also be same so here it have been updated so let me copy it from here and for the search screen let's provide that and here also it will be Inon and icon will be search icon for the bookmarks it will be bookmark and for the profile I will use Font awesome icon and icon name will be user so after saving I can see that all these things have been updated now let's see what more customizations we need to do so here we can see we don't have any text at the bottom of these icons as right now we do have these text we need to remove this text and this search icon we can see it is in a box with a different color so we need to update that and other than that we need to change the active tab color so we need to set those things up so first I'm going to add some colors which I'm going to use for this app app and for that I'm creating a folder called constants and within it I'm creating colors. TS file and here I have pasted these colors which I'm going to use in our app so now save this and now let's go to the layout so first Within These tabs we need to add the customizations for all of these tabs for all of these tabs we don't need this label text so for that I'm going to add that customization to this rapid tabs component otherwise we need to add those for each of the Tab screen and it will be redundant to use the same code for every screen as we have similar kind of styling for all of the tabs so it is good to provide that kind of styling and the configuration to the rapper tabs component so here it will be screen options and within screen options first I'm going to use tab bar style to provide a different background color for this tab bar section so here we can see that we have the white background but for our app we don't have the white background it is a gray background which matches with the app background color so that I have provided already in the colors file which I have just created so here we do have this BG color that's the color I need so here I can see that the color have been changed but with that we can see that here we have a border at the top of the tab it can be little bit hard to notice it in this video but it is there and I don't want it so I want to get rid of this and for that I'm using border top with szo and for the padding of the tab bar I'm using zero as well so now that border have been removed from the top of the tab now let's remove the text and for that it will be tab bar show level as false so that text have been removed now let's provide the color here it will be tab bar active tint color for this active tab bar color and it will be black and for the tab bar inactive tint color I'm going to use this gray color so it have been updated so here we can see that it is working perfectly fine now I want to change the look of this search icon and for that in the tab bar icon section for the search Tab screen I need to wrap it with a view and for this view style let me first provide the background color and the color of it will be the primary color so this orange color and then let's provide some padding so first for the padding horizontal I will provide 16 for padding vertical I will provide 12 now let's provide border radius and it will be 10 and Fin finally let's provide a height to it so yep it's fine now I need to change the color here for the icon and the color will be the white color so it's looking good the font size would be 24 and instead of search I will use search outline so it is little bit thinner okay so now it's looking good and it is looking similar to this so now it is perfect so our bottom tab is done now we can start creating our home screen which is this index file here first I want to customize this header so here in this header I want to have the user image and then here I want to have this button so to customize the header we can get the stack from export outer and customize the header for this particular screen from here so it will be stack screen and then options within the options I can provide the customizations of this back Navigator so here first I want the header to be transparent so that's why I have set it to true so now you can see that the white color have gone now the screen background is showing over here after that I don't want any title for this screen as right now it is showing index I don't want that so I can specify header title as empty string by this we have removed the title now I can specify header left for the user image and here let me provide a touchable opacity and then let's provide the image and this image is coming from react native so for the source of it I will provide this link and this link will Generate random user image then for the style of it let me provide 40 for height and width and for the Border radius I will use 10 so here is the user image and here for this touchable opacity I want to provide margin left 20 as we don't have any space here I want to provide that so now it's looking good now after the header left I can provide header right and it will be similar to header left but this time it will be a button with an icon of this Bell so let's create that so here it will be touchable opacity on press and then it will be iicon and this signon needs to be imported from Expo Vector icons and for the icon name I will use notifications for the size of it I will provide 20 and the color will be black color so here we can see the button now we need to provide some styling here for the button style I will provide that in touchable opacity first I will provide margin right 20 to give some space here then let's provide a background color and this color will be white color then let's provide some padding and then a border radius of 10 pixel so here we can see the button so now with this button I want to provide some Shadow to it to make it more prominent so here is the shadow styling which I have provided so after saving it we can see that the button is now much more prominent so that's how our header have been customized so we are done with the header now after the header I want to provide the screen content so for that after this stack screen I can create a view and right now we are seeing an error that jsx expression must have one parent element and for that we need to wrap it by this react fragment so now the error have gone now let's provide style for this View and here it can be Styles container which is this container style then after that we within this view I need to provide a text and the text will say explore the beautiful world so with that let me change this justify content styling so now with those things removed I can see that here is the text which is not position properly but it should be after this header but as I have made it transparent the header is transparent that's why our screen contents are going to the top of the screen so to fix that we can get the header by an hook provided by react navigation so let me just import it from react navigation elements and from here we can get this use header height and now by this use header height we can get the header height and that we can use here so with this container style I will provide padding top header height so now after saving it I can see that after this header content we have this text now I want to provide a padding horizontal to this container and for it I will use 20 let's use a background color and that will be our BG color now let's style this text so let's provide style for it let's create this heading text so from here let's provide the font size first it will be 28 for font weight I will use 800 for the color I will use black color and let's provide a margin top which will be maybe 10 so now it's looking good after this text we will have the search bar let's see so here is the search bar with the search bar we have this filter button so after this text we will have another view and this view will be the wrapper of this search bar section and within this view I will create another view which will hold the search bar with this search icon so first we will have this search icon then we will have the text input field where we can actually put the text to search so first here it will be Inon and the name for the icon will be search for the size of it I will use 18 after this icon provide the text input field and for the placeholder of F I will use search text so here we can see this is the search text input field and here is the search icon and after this view I will create this button so this will be the touchable opacity and it will be ion for the name I will use options for the size of it I will use 28 so let's provide the styling for it so here first I will give the name of this view as search section w for this view this is holding the search bar so it will be styles. search bar now let's create these two so first I have the search section wrapper and then the search bar so let's provide Flex Direction Row for the search bar the search bar is holding these two items these are vertically aligned but I want these two items to be positioned beside each other so that's why I have provided Flex Direction row let's provide background color white padding 16 and Border radius 10 so here is the search bar now let's provide the styling for this search section wrapper here also this button needs to be positioned beside this so that's why here I will use flex Direction row and I will provide some margin vertical which means at the top and the bottom of this 20 the margin have been applied we can see that this position beside each other but this search bar is not looking good to fix that I need to provide Flex one now it is looking good but this is not let me provide some styling for this button but before that let me provide some gap between these two and I can do that by a style here which will be margin right and I will provide five and for the color of it I will use black color now let's focus into this let me name it as filter button and let me create the filter button styling here first let's provide a background color and the color for it will be the primary color and with that for this icon I will provide white color now let's provide padding 12 and Border radius 10 so now it's looking good now let's provide a spacing between these two item and that I can provide by providing this margin left let's provide 20 here so it's looking good it seems pretty similar to this now after this search section wrapper view we need to create next section which is this categories button and for this I will create a separate component and for that here let's create a new folder called components and within components let's create category buttons file now save this and here let's import that so here it is appearing now let's create this category buttons component within this view first we will have the text and this text will say category as we can see here it is saying categories not category so it will be categories this is the title of this section so let me provide a style for it and it will be style title so for the font size of it I will use 22 for the font weight it will be 700 and for the color of it it it will be black color from colors so this color needs to be imported now we need to create this buttons and to create it I need to use scroll View and within this scroll view we will have the category buttons and this category buttons will come from the categories data which I have already created within this data directory so here we can see we have all the categories as destination categories I need to import that here and by by mapping it through I can get all these things and here we can see we have the title and the icon name for each of the categories right here I can get the destination categories and I can map through each item and let's first initially return the title of this so here we can see we have all the items which are provided here but here we are having an warning that we need to provide the unique key and I will provide that but let me first create the button then I will provide that key so here first we will have the touchable opacity and within it we will have the text and before text we will have the icons and the icons will be from Material Community icons for the icon name it will come from this item icon name and here for the typescript error I can provide as any to get rid of the and then let's provide size 20 and for the color of it I will use black color let me first make this scr view horizontal so that's how it is let's provide style here so it will be category button let's create the category button first it will be Flex Direction row then align items Center let's provide background color white padding horizontal 16 padding for vertical 10 border radius 10 as well and then I will provide this Shadow styling now with that I can see that the button have been created properly I can see the Border radius here but it is not properly visible to make it more prominent let me provide here content container style I will provide Gap 10 okay let's provide 20 padding vertical 10 and also let's provide a margin btom 10 as well so here we can see the buttons are showing perfectly well right the Shadow and the proper edges of the button we can identify clearly but here I can see this scroll bar I don't want that so I can get rid of it by providing false for this show horizontal scroll indicator now save it so here right now I don't see that indicator right now I need to provide some style for this text so here here it will be category button text and let me create that I will provide margin left five so it is providing a little bit space here and let's provide the color okay so now this section have been created now I want to provide the functionality to select the buttons whenever I will click a button that time that button will be selected and for that I need to apply use ref hook so here first I will create create item ref and here we need to apply use ref hook for the items here this will be the multiple touchable opacity so that's the array and the type of it also will be the aray of touchable opacity or it could be null so here we can provide that but before that let me get rid of of this warning which is the key unique key we need to provide the index which we are getting from this map function and after that for the ref here we can get each element and set item ref do current index equal to the element which we are getting and after this when we will click on this that time we need to select it so for the onpress of it we need to handle select category so let me create this select category function and for this function we will pass the index so here is the function and here we will receive the index and the type for this will be the number so here let's create a state called active index and we can set it by set active index and by default it will be zero and when we will click on any of the button that time we will pass the index number here and we can set that number as active index now based on this active index we can provide a different styling for the active button right but here let me first console log the index which we are receiving so let me see so here for the first item we can see Zero for the second it is one and for the third it is two so now let's delete that console log and here within this style let's check for this active index if the active index matches with the index then we will have the category button active style otherwise we will have have this category button style and right now we don't have this category button active style so let me just create that after this category button and it will be same as this category button but for the background color it will be the primary color so now here we can see that currently this is the active button so for this active button I want to provide a different text as well so similarly here also it will be active index equal to index if it is matching then we will have category button text active style and it will also be same as this one but for the color it will be white so the text color have been updated now we need to provide the same for the icon color as well so if it is active then I want to provide white color otherwise it will be black so this is the color now let's select other items and it is now selected now with the selection of it I want to provide a little animation so whenever we are selecting an item that time I want it to be automatically positioned like this so that's an scroll animation which I want to provide and for that within this scroll view I want to provide a reference so I need to create a scroll ref by using use ref and the type of it will be scroll View and I have provided the reference in this scroll View and here by default I need to provide null and whenever we are selecting the category that time I need to do the animation so first I need to get the reference of the selected item so it will be item ref do current index now then based on this selected measure function I can get the XY position of this but here I'm interested for the X only and here for the scroll ref current we will scroll to the position which we will provide so for the xaxis we will provide the position of this x which we are getting from this major function for y it will not be changed it will be zero and for the animated I will set it to true now save it after that let's click here okay so here it is not working let me see what is the issue here so here I have made a mistake so here it will not be double equal to it will be equal to because we are assigning this element to this current index of the item so now after providing it correctly I can see the animation is working perfectly fine which I wanted so it's fine now I want to provide with the selection of the category I want to have the knowledge of the category in my index file so within the parent component I want to have the information of the updated category so that based on that information I can do some activity such as updating the category which are at the bottom here so I want to update these items based on the categories because of that I want to have the information of the updated category that's why I want to create a new function here called on cat change and here I will receive the category and the type of it will be string and here let's create a state called category and we can set it by set category and by default I know that it will be the all category selected so that's the string I have provided here and here I can set the category to this category which I will receive here and also with that let's console log the category now I need to pass it to this category buttons but to pass that here first we need to to accept that so here let's create a type for the props which we will receive and here we will receive only this uncategory changed function and this function will not return anything but it will accept a category which will be the type of string so we need to get that so we will accept the props and for this we will have this function So within this handle select category we can pass this function and here we need to pass the category string and that we can get by this destination categories index do title now after saving let's select this beaches here we are having an error and that is because here we are not passing that so here for the uncategory changed we need to pass this on changed so now this value which we are passing from here will be passed to this function and this function will set the category now save it now after that let's select the mountain so here we can see the category mountains cities we are seeing the category cities so here we are passing the updated data to the parent component and from the parent component we can pass it to the other children in which it will be needed such as this particular section so that's the category buttons which is done now we need to create these items so to create these items first I'm going to create a component called listings and let me import that here in the index file so here it is so now we can start creating this listings component and for that we have the data here in the destinations file so these are the data which I'm going to use to create the listing items so first we need to get that data in this index file and that data we can pass to our list listings component so here I'm importing listing data from data destinations. Json file and that we can pass here so here we can pass it by listings prop and that prop we need to accept here in the listings component so here let's create the prop and we will accept listings and it will be ar so it is an aray of any type I have provided here and that we can accept here and here for these items I will use flat list so that's why I'm going to create a flat list component and for the data of it I will provide listings and then I need to render each item through a function and I will create this render items function and here we will accept item and here within view I can output the item data so here we will have item name so here we can see we have all the name but right now I'm not getting the suggestion or autoc completion for each of these properties so let me create a type for this I can create that by copying any one Json data and then here I have an extension which converts Json to typescript from the clipboard so here is the extension in action and I have already copied that particular item now I need to use this one so it have been created now I'm just cutting this from here and let me create a new folder called types and within the types I will have listing type TS and here I have pasted it and let's name it as listing type now I can use that here so here for the render item it will be list render item and the type of it will be listing type but it is not imported here because yeah I didn't exported it from here so we need to export that so here let's see yeah right now we can import now if I type item dot then here we can see we have a very good autoc completion because of the typescript right and that extension name is this Json tots which I'm using so this one you can use to create type from the Json data so here let's create this item so here first we have the image and with the image we have this bookmark icon and then we have the name and the other information related to the item let's start creating it initially it will be touchable opacity and within the touchable opacity we will have The View and in this view first we will have the image and the image needs to be imported from react native and for the source URI we can specify item image and we need to specify image width and height so as of now let me specify the width and height here later I will separate this style so here we can see it is showing here but let's make it horizontal and with that I don't want horizontal indicator to show so that's why I will set this as false okay now let me start providing styling for this so first here I will provide style for this item as styles do item so let's create the item style so first I will provide background color and that will be white color which will be imported from the colors file which we have created and that we have imported here now after that let's provide padding 10 pixel and a border radius of 10 as well and let's provide a margin right I will provide 20 and then I will provide width of this item as 220 pixel now let's provide style for this image also so it will be image let's provide the style height and width 200 and the Border radius 10 pixel which matches with the Border radius of the item wrapper now after this image let's create a view and this view will hold this bookmark icon So within this view I need to import ion econs and for the name of the icon I will use bookmark for the size of it I will use 20 so this is the icon now we need to position it at the bottom right of each image so let's provide style bookmark and create that here first I will set its position as absolute then from the top 185 and from right it will be 30 so it has been positioned like this now let's provide a background color and the color of it will be primary color then let's provide padding 10 border radius 30 so it's looking quite good but here we can see we have a border a white border so for the Border width I will provide two pixel and let's provide border color and it will be white color now for this image let's provide a margin buttom and I will provide 30 so it's looking quite good for this icon I need to change the color the color of it will also be white and for the icon I will use bookmark outline so now it's good so let's see for each item we have properly positioned bookmark icon now after this view let's provide text and this text will hold the item name let's provide style for it item text let's create that here for the font size of it I will use 16 for the font weight it will be 600 then let's provide the color and the color will be our black black color and for the margin bottom I will use 10 so it's good now let's see so here we can see for some item when the name of the item is bigger that time it goes to the next line and that breaks the layout as the other items have this height but this one has the bigger height I don't want that I want to present the name of the item in a single line so for that here I can specify number of lines as one and also with that I can specify ellip siiz mode as Tail as of now it is doing the same but with this we can customize it so that's why I'm showing it here as we have many other options available here right but for this one I'm okay with this so that's how I have fixed the height issue so for each item I want the same height so that's why I have set the name to be presented in a single line now after that let's see we have these two information and these two will be positioned beside each other so that's why I need to create a separate View and within this view I need to create another view for this information and it will be in a separate component it can be only text so let me create it so this one is the main wrapper view of that particular section and then within that I will have another view in which first we will have the map marker icon so for that I will use Font awesome 5 so it has been imported and now for the name I need to use map marker alt for the size of it let's use 18 now let's provide the color and it will be our primary color now beside it let's provide the text and it will be the location so these two things will be beside each other so that's why in this view I can provide Flex Direction row and align items Center and let's provide some style for this so it will be item location text for this one I will use font size 12 and for the margin left I will use five after this view we need to create another text for the item price and here it has the dollar sign and it needs to be positioned at the right hand side and and these two will be in a same row so that's why here I need to provide Flex Direction row and for the justify content let's provide space between so now it has been moved to the right side now let's provide some style here item price text and here also I will provide same font size as this text so it will be 12 but for the font weight I will use 600 for the color of it I will use our primary color so now it's looking good now let's provide the functionality to click on this and that will open a detail screen so for that first we need to create a new file so for that within the app I will create a folder called listing and within the listing here I will create ID TSX and I will name it as listing details and we can get this ID parameter in this file so it it will be ID from use local search params Hook from export outer so here I am displaying the ID and now we need to go to this ID from here so here we have link from export outer and for the link rev here I can use listing slash ID so I need to provide the ID that will be a variable so that's why I have used template literal and here I can provide item. ID and now I need to close this link here and to apply it to this touchable opacity I need to use this as child prop now after saving let's see so we are opened with the listing details one let's see we have listing details five so it's working perfectly well now do you remember that when we have created this category selection that time we have got the information of the category in this index file and this category we can pass to our another child component which is this one to get this category name and eventually update these items so I can do that over here I can pass the category here in the listings so first we need to get that so here I will get the category and here let's accept that and here let me create a loading state by default it will be false and now let's Implement use effect hook and and here it will work for category whenever the category changes that time this use effect hook will trigger So within this we can perform the update functionality of these items right now I'm not going to implement that but here I'm just showing you the way to pass the data from one component to another and by this way we can Implement that update functionality so here I'm just doing a console log update listing and set loading step as true and here let's imitate a loading by using set timeout after 200 millisecond it will set this loading as false so now whenever we are selecting a new category that time our listing updates but we are not seeing any changes here because we haven't applied it let's check it here so if loading is true that time it will be an empty array otherwise it will be listings so now let's see so it's not applying that let me check it okay yes it's not applying that because here we are not passing the category so now I have updated the prop now let's see so here after selecting a new category button our listings are being updated at the bottom right now let's see after this we have this top travel groups and this is also similar to these items which I have just created now let's quickly create this one also so for this I will create a new component called group listings let's import it here for this one also we have this Json data and from this Json data let me first create the type so here by using this extension I can create this and let's cut it from here and within the type let's create the group type and here it will be group type and we need to export it so here in the index we need to import group data from data group Json file and here we can pass it as listings prop like this and now I need to accept this listings here so here it would be listings group type array and we can accept it as a prop now here for for this one first we will have a title called top travel groups and after that I will create the flat list for the data I will use listings data for the render item I will create this function and here we can accept the items and it will be listing render item and the type of it will be group type so let's first output the name now let's design this item so first we will have the view and then we will have the image for the image source I need to provide item image let's provide style for the image let's create that here for the width of it I will provide 80 and for the height I will provide 100 for the Border radius I will provide 10 so here is the image now let's make it horizontal and for horizontal scroll indicator I will will provide false let's provide a style for this wrapper view as item so here let's first provide a background color white for padding I will use 10 pixel provide border radius 10 for margin right I will use 20 okay so it's now looking good but we are having an issue to scroll the screen so that's why here after this view I need to provide a scroll View and I need to close it here now I can scroll properly and with that I don't want to display the scroll indicator and this one is vertical so that's why I'm setting show vertical scroll indicator as false now it is looking good now let's customize this text this title text so let's provide a style for the title for title font size I will use 22 for the font white I will use 600 for the color it will be black for margin btom I will use 10 so the title text is looking good but here we need to provide some spacing which here we don't have so here for this view let's provide margin vertical 20 so it will be at the top and bottom of this section now after that we have this information we have the title of the item and then we have the rating so here let's create a view and within this view I need to Pro provide a text and first it will have the name and it will be beside of this so for the flex direction of it I need to provide Row for Align items it will be Center and here for this image I will provide margin right 10 so it has a gap here now after that let's provide style for this item text and for the item text let's provide font size 14 for font weight it will be 6 00 for the color it will be black color and at the bottom I will provide 8 pixel margin now after this we need to provide these informations so for that we need to create a view and within this view I need to provide the icon and the name of the icon will be star for the size of it I will use 20 and for the colors of it I will use primary color then let's provide the text and this text will provide the rating and after it it will have reviews so the reviews are within a bracket and all these things will be in a row so that's why it will be Flex Direction row and for the Align items let's set it to Center so yes it's looking good for the rating it will be item rating font size 14 font weight 600 color will be black and for the margin left I will will provide five now for this text I need to provide some style also so item reviews it will also be similar to this but for the color I will use this color so that's how it is looking right so it's looking good and for this one I'm not providing any detail screen I have just provided detail screen for this one and now I will start designing this detail screen so this is how our detail screen should look like and now let's create this one so for this first we need to go to this ID and here we can start designing it and in the design as we can see we need to customize this header but I will do that little bit later first I want to display this image within this view I will have an image and this image needs to be imported from react native and for the source of it I need to provide the item image but here we don't have the item we are having this ID information in this file and from this ID we can find the particular item so let's do that so let's create a listing constant and this will be type of listing type which is our custom type and let's get the listing data here so as we are having this listing data in this index file similarly we will have the listing data here and from this listing data we will find the particular item based on this ID so here it will be listing data as any type or yeah we can provide this custom listing type array then we need to find item and we will get the each item and for each item id we can match it for the ID which we are receiving so if it is matching this then we will get the listing information in this listing constant and that we can use here so let's use it listing. image and let's provide style for this image and and for it I will use style image let's create the style here and for the width of it I will use the device width so let me get the width of the device from Dimensions so here I can get the width and for the height I will use 300 so let's apply it here now save it so here we can see the image now I'm going to customize this header to customize it first we need to wrap it with react fragment and then from stack screen we can customize it so for the stack screen option we can add the customization for the header and this stack needs to be imported from export outer so here first it needs to be header transparent so I have set it to true then for the header title I don't want any title here so I have provided empty string now after that we need to provide header left and header right to display these two icons so for the header left let's provide touchable opacity and for the onpress of it as of now I have provided blank function but we need to provide the functionality to go back to the previous screen I will add that later but first let's design it so here I need to wrap it within a view and within this view I need to provide an icon and that icon will come from this feather library from Vector icon so that have been imported here and now here for the name of it I will provide Arrow left for the size of it I will provide 20 so here is the icon now we need to provide some styling here it has a white background and around this we have another section with a transparent white background right so let's add that for this view let's provide style so first here it will be background color and the color needs to be white color let's provide padding six and a border radius 10 so it's looking good now we need to add this little bit transparent section around this button and that we can provide here for the touchable opacity so let's provide that so here for the background color I need to provide this background color this is the white background color with the 0.5 opacity value and then provide border radius 10 and a padding of 4 pixel so now it's looking good and we can click here but we need to provide the functionality to go back to the previous screen and that we can do by use router Hook from export router so here let's create a router by using use router Hook from export router so here is the use router hook and now by this router we can provide router do back to go back to our previous screen so now save it now let's see so here it is working perfectly well right so now let's create the header right and it will also be similar to this so I can copy this one so let's copy this touchable opacity and here for the header right let's paste that and here we will not have the back functionality I can leave it as empty function and for the icon I will use ions here and it will be bookmark outline so now we are done with this top section of this screen now after that we have these informations so let me create these also so after this image we will have a view and within this view I will have the name of this listing and after this listing name we have the location information with this icon so for that here we need to wrap this section with the View and then we will have the icon and the icon would be font awesome five the name of the icon is map marker alt for the size of it I will provide 18 and for color I will use primary color after that we will have the text for the location now let's provide the styles for these components for the rapper view I will name it as content wrapper and for this complete section wrapper view I will Prov provide container so let's create this container first let's provide a background color and for this one I will provide white background color so here is the white background and that I want to expand to throughout the screen so that's why I have provided Flex one now we need to create this content wrapper for this I will provide padding 20 then provide a style for this listing name so it is listing name and for this view I will provide listing location wrapper and for this text I will provide listing location text so let's create this listing name first so for the font size I will use 24 for the font weight I will use 500 for the color I will use our black color and for the letter spacing I will use 0.5 now after that let's create listing location wrapper first it will have Flex Direction Row 5 pixel margin at the top and and at the bottom I will provide 10 for the Align items I will provide center now after that let's create this listing location text for the font size of it I will provide 145 pixel margin at the left for the color I will use our black color now let's see after that we have this section and then we have the details of the package so for this section I need to create a wrapper view so here within this content wrapper but after this listing location wrapper view I need to create another view and let's name this as highlight rapper and within this view first I will create this one component and later I can copy this one for these two also so first let's create this one and to create this we need to wrap this with another view and that view Flex Direction needs to be set as row because these two informations are beside each other in a same low so I have provided Flex Direction row now here first we will have the icon and this icon has a grayish background color so that icon also needs to be wrapped within a view and then let's create the icon it will be ion and for the name of it I will use time for the size I will use 18 and the color of it will be our primary color so here let's provide style as highlight icon so first let's create this highlight wrapper and this highlight wrapper is containing all these things and these components are within a same row so that's why for this one also I need to specify Flex Direction Row for the margin vertical I will provide 20 so that mean for this section top and bottom we will have 20 pixel padding now after that for this highlight icon I need to provide a grayish background color and this is the color I want to provide let's provide padding horizontal eight and for the padding vertical I will use five for the Border radius I will use eight margin right five to provide the Gap here and let's provide align item center now after this view we will have another view and within this view we will have the text and this text will say duration and after that we will have the text for the duration it should be listing duration with this D P text so let's style these things for this text it will be highlight text and for this one it will be highlight text F now let's create the style for this for the font size of it I will use 12 for the color of it I will use this color and then for the Highlight text Val I will use font size 40 and for the font weight I will use 600 so it's looking good and similar to this so now I can copy Cy this view two more times to create other two items in this row so it have been created but we can see that it doesn't have any Gap in between and that I can do by providing a justify content space between so now let's quickly change these things as per our design so here we have the person so for the second we have the person but we don't have any person information for these items so I have just use the duration here with this de removed and for the icon I will use Font awesome users and then let's do the rating so it has been done now after this highlight wrapper view let's create the text which will display the details of this listing so here it will be listings do description and let's provide some style here so it will be listing details and let's create that here let's provide font size 16 for color I will use black for the line height I will use 25 and for the letter spacing I will use 0.5 so now it's looking good now after that we need to create these two buttons and these two buttons at the bottom of this screen that's why it will be outside of this view so let's create a view and let's name this as footer and within this footer we will have have two button let's create a button by using touchable opacity and for the text of it I will provide book Now text so let's provide a style here as footer button and for this text let's provide footer button text so let's create this Styles so first we need to create the footer and as this is at the bottom of the screen so I need to set the position as absolute and then at the bottom it will be zero so here we can see the book Now text let's provide padding 20 and I will add padding buttom f30 so that means all the three sides of this section will have 20 and at the bottom it will have 30 pixel padding and for the width of it I can use full width of this screen which I'm getting from this width constant now after this let's create footer button for footer button background color I will use black background color for the padding I will use 20 for Border radius I will use 10 for Align items I will use Center so here is the button now let's create this footer button text for the color of it I will use white color for the font size I will use 16 for font weight I will apply 600 and for the text transform I will use uppercase so now it's looking good but here we can see we have two buttons and this book Now button is in our primary colors now let me just copy this once for the price button and here we will have the dollar sign first and then we will have the listing price now these two needs to be beside each other so that's why for the footer Flex Direction I need to specify row and when I have done that that time I can see that it is taking the space which is only required for its child component which are these text but I don't want that I want this section to be expanded throughout this width so for that for the footer button let's provide Flex one and now it is taking full width and now for this button I need to create another style so here I can add another style and that style will be footer book button and here let's provide the background color primary color margin right I will provide 20 okay I have provided it in wrong place it shouldn't be on the text it should be here for the touchable opacity which is actually the button so now I can see that it have been updated its color but here we can see this book now is taking little bit bigger area than this button so that I can do by providing Flex so here I have provided Flex one for this footer button right now these two buttons are taking same space but I want to make this button bigger so that I can do by providing flex two for this button so now here we can see that it have been updated properly which is exactly looking like this so now the UI is looking perfect but I want to provide a paralax effect here right now I'm not able to scroll this as we don't have much more content here but when we will have the content that time we need to scroll it and for that we need to provide the scroll view so here after this container View let's wrap the complete section with scroll view so here this scroll view will close and for this scroll view content container style let's provide 150 padding at the bottom so now we can scroll it but with the scroll I want to provide the parala scrolling effect to this image and also I want an animation for these two buttons this footer section so whenever I will visit this details screen that time these two buttons this footer section needs to be appeared from the bottom up now we need to do these two things so first let's provide the paralu effect here so now first we need to install react native reanimated package so for that I'm at the official website of the react native reanimated and here let's click on get started so here we have the installation guide so for the installation of the package for Expo this is the command and let's copy it and here let's stop the server and then paste the command so it have been installed now after that here we need to provide this line to our B.C config JS file so let's open it and here within the plugin so let me copy this plugins as here we don't have that so I can add it here and now save it after saving we don't need to do any more thing we need to clear the Metro bundler a by running this command it will do that so let's paste that and it will start our Metro bundler server so let's open it in iOS so our app is running so it have been installed now let's apply it so for that first here when we will scroll it that time the parallx effect will apply to this image so that's why this scroll view needs to be animated scroll View and this image as well because by the action on this scroll view we will have some effect on this image so that's why both of these needs to be animated so here it will be animated do scroll View and this animated needs to be imported from react native reanimated so let's import That animated from react native reanimated okay so it is there now we need to close that here also so it will be animated do scroll View and for this image it will be the same animated do image and after that we need to create a reference for the scroll view so let's create the scroll ref and here instead of use ref it will be use animated ref and that is from react native reanimated and the type of it will be animated do scroll view as we are applying it to that right so here for the ref we need to add that and then we can get offset value of the scroll view by this use scroll view offset and here let's pass the scroll rep which is connecting to the scroll view now let's create an animated style for the image so it will be image animated style and for it we need to use the use animated style hook and this will also needs to be imported from react native reanimated and the same for this use scroll View offset so here for this use animated style we can customize our animation so here for the transform let's provide Translate Y and here within interpolate let's provide scroll offset value and then we need to provide input range and the input range would be minus image height 0 to image height and then we need to provide output range and for it I will have minus image height by to0 and image height multiplied by 0.75 now let's apply this animated style to our image and here we have already applied a style now with that I will add another style and that will be this image animated style now after saving let's see so when we are scrolling that time we can see that the image is scrolling in less speed right and these text are going at the top so we need to provide the background color for this content wrapper so let's provide white background color here and now let's see now you can see that this is the parallx effect which we are having but when I'm scrolling it down that time I want this image to scale up okay so that is also another part of the paralu animation effect so this is one part which have been done so this is the paralu scrolling effect so this image is scrolling in lesser speed than this text content right so now after this Translate Y let's provide scale and for its interpolate value let's have this value and then for the input range I will have minus image height 0 Plus image height and for the output range I will have 21 1 so now let's scroll it down and here we can see that it is getting bigger okay so with this we are done with the paralex animation for this image now I want to add the animation to this footer section so right now if I'm visiting here that time this is appearing with the rest of the contents on the screen but I don't want that I want it to appear little bit later from the bottom so for that here in the footer this also needs to be animated View and let's close this and here I can provide this entering prop and for this entering prop I can provide this slide in down animation from react native reanimated so here it is and here I can specify some delay let me provide 200 millisecond delay and now let's save it so with the save the animation have applied here now let's open the detail screen so here we can see the animation right so let's see for another item so here we have seen the animation so that easy it is to apply animation by using react native reanimated and here I can see I have a mistake so here for the rating it will not be days okay so now it's good so here is the parallx effect animation and this footage is also having a good animation now so that is it that's the tutorial guys I hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel let me know by commenting down below and if you have any kind of suggestion for me then also let me know and don't forget to share this tutorial with your friends and colleagues and I will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 15,223

Keywords: travel app ui in react native, travel app using react native, travel app react native expo, travel app with expo router, expo router for beginners, travel app ui in react native with expo router for beginners, travel app ui in react native with expo router, react native tutorial for beginners, react native expo tutorial for beginners, travel app ui in react native in 2024, app ui in react native expo router 2024, ui design tutorial, react native tutorial

Id: lIQIeIdUXFI

Length: 72min 50sec (4370 seconds)

Published: Wed Apr 03 2024