LCRN EP13 - Boba Milk Tea App - React Native UI, React Redux and Light/Dark theme

hey what's up everyone i hope you're doing well this is jack from buyprogrammers.com and welcome back to a brand new episode of let's quote react native in this episode we are going to build a very cute looking boba milty app based on the design created by ansley on wondershare market now in case if you don't know market is a very cool and easy to use platform that allows you to create mockups with ready-made widgets and templates by simply drag and drop alright for more info feel free to check it out on market.wondershare.com oh and if you haven't already be sure to subscribe to our channel and turn on the notification for more videos like this alright now with that being said let's get started [Music] okay so for this project we'll be working on six different screens including the splash screen the first screen that we'll be working on is the home screen and within the home screen we'll be working on quite a few interesting components which includes the light and dark theme which will do it in such a way that it can be controlled by using react redux over here okay next we have this horizontal flatless that can you know animate the tab indicator over here as well and also not to forget this curvy shape and the bottom type navigator which we are going to achieve it by using um react native svg over here okay and after the home screen we have the reward screen which basically allows the user to check the current point all right after that we have the locations by clicking on any of these locations you will be able to navigate to the order screen now this screen is also quite um i would say interesting and challenging as well because we need to present these buttons over here in a vertical manner all right and lastly we have the order detailed screen where we can customize the size of the cup we can choose the milk that we want and also we can customize the sweetness and ice level alright okay so just like the previous episode instead of just starting the project from scratch we have actually prepared a star template so that it will be a lot easier for you guys to follow along so head over to the um star template github repo the link is in the description below and simply download the source code you can use clone if you want to and you should be able to get this all right so once you open up the source code the first thing you want to do is to open up your terminal and run npm install after that followed by react native link and then we need to cd into ios and ram part install you can skip this step if you're running on android alright now i'm going back to the root folder and run react native run ios all right so for this starter template we have basically included the splash screen i'm not going to talk about splash screen in this episode because we have already did it back in episode 10 if i'm mistaken so feel free to check that out if you want to include um splash screen in your project all right so as you can see here this is a very basic um template we have bottom tab bar over here and also we have included some simple navigation as well for example you can navigate to rework page you can navigate to locations screen you can navigate to order screen and also you can navigate to the order details screen all right i think that's pretty much about it next i'm going to briefly go through our project structure over here so first thing first we have the assets folder and inside the assets folder we have the fonts that we'll be using which is roboto we have all the icons that we'll be using and also all the images that we'll be using the splash screen or the launch screen images is being placed in this folder over here once again check out episode 10 if you would like to know how to generate these um images all right so after the assets folder we have the constants folder and within the constants folder we have constants.js and this promo tabs over here will be used to render these three tabs over here all right next we have dummy.js which basically includes all the dummy data that we'll be using later on the project okay we have the icons.js the reason why we are doing this is so that it will be a lot easier when we want to reference when we want to render these icons later on all right same goes to images.js oh and i have also included the um svg for curve shape over here we are going to use this svg to render these curve um shape in the bottom tab navigator now if you're curious how we got this curved shape as svg we literally drew it ourselves on the photoshop and converted to svg yeah we did it ourselves actually okay and next we have the team.js which includes the dimensions um the colors that we'll be using all sorts of different sizes and also the fonts that we'll be using in the project later on oh and also we have um predefined guitar team and light team over here which will be used to implement the light and dark team feature over here later on okay and lastly don't forget we need to include the index.js file to basically export everything within the constants folder all right and next we have the navigation folder once again this is very straightforward we basically create the bottom tab navigator over here and include five different tab screen with a custom tab bar icon over here so as you can see we have the home tab we have rewards tab we have add odor tab which is basically this middle button over here and also we have favorite tab and lastly we have the profile tab all right so after the navigation folder we have the screens folder which is nothing more than just a basic template for each of these screens as you can see here so we have home we have location we have other older detail and also rewards um screen nothing fancy here it's just a normal functional component with a view and text component that's it all right so the first thing that we'll be working on is the bottom tab bar over here so as you can see here we have a floating button in the middle we have a curvy shape in the middle as well and also we have quite a bit of border radius on the side okay let's see how we can do this so open up the navigation folder open up the tabs.js file and the first thing i'm going to do here is to change the background color from colors.grade32 like that and then after that for each of these tabs over here i would like to customize the tab bar button as well so i'm going to do this tab bar button props arrow function and i'm going to return the um a custom tab bar button component which we are going to create shortly okay and for this home tab i'm going to pass in two things the first will be the props and followed by a container style and for the container style i'm going to include border top left radius this is so that we can create the border radius effect over here okay and the radius is going to be say sizes dot radius multiplied by five and now i'm going to copy this tab bar button property and paste it to the other tabs as well so for the rewards tab i'll include these as well but just that i'll remove the container style same thing i'll paste it for the add order tab as well just that for the add order tab we need to include a prop called ease flop equals to true this is for us to create the floating effect later on okay and next we have the favorite tab same thing tab bar button and lastly the profile tab over here okay just that for the profile tab since we need to create the border radius effect over here we need to include the container style where the border top right radius equals to sizes dot radius multiply by five all right next we can then create the custom tab bar button component over here alright so constant custom tab bar button equals to so we have the container style over here we have ease flo props we need to include children as well and also arm press followed by the arrow function over here and now within the custom tab bar button component if um ease flop equals to true then we are going to return something if it's not we are going to return something else right [Music] now if east float equals to true i am going to return a container view give it some styling flux equals to 1 and align item equals to center and within this container view i'm just going to return a normal touch opacity first touch opacity give it some stalling align item center justify content center as well with equals to 60 height equals to 60 border radius equals to 30 and background color equals to color stop primary oh and over here we need to include sorry we need to import a couple more components from react native so we need um touchable opacity we need touchable without feedback later on and also we need view correct and now for detachable opacity the arm press equals to on press and within detachable opacity we are going to render children that's it for now now if the e slot equals to false i am going to return touchable without feedback the arm press equals to unpressed as well within the touch boot without feedback component we have a container view like this give it some styling um flex equals to 1 height equals to 60 background color equals to colors.gray tree yeah and i'm going to render the container style as well like this so within this um container view we have children okay save it all right we are almost there next thing we need to do is to render the curve shape over here like this okay and in order to achieve this we need to install a library called react native svg so scroll down um copy this you can you can use ur or you can use npm it's up to you i'm going to use mpm so npm install react native svg next you need to run react native link and lastly you will need to cd into ios and run pod install all right now i'm going to cd back to the root folder don't forget we need to restart our app as well i'm going to close this and run reac native run ios all right now we can then include the svg over here so we need to import svg and we need to import the path as well from reac native svg and next we'll need to grab the svg from images.js file i'm going to copy the svg code from here and paste it over here and let's see what we got alright as you can see the curvy shape has already been rendered in the bottom tab navigator all we need to do next is to change the touch opacity to position absolute and i'm going to set the top to negative 40. all right we are almost there there is still a bit of edges in this area let's see if we can get rid of that so i'm gonna look for the rewards tab over here i am going to give it a bit of styling so container style equals to margin right seven let's try six all right a lot better now i'm going to do the same for the favorite button favorite tab i'm sorry so i'm going to paste it over here instead of margin right i'm going to change it to margin left alright so we have the tab bar in place all we need to do now is to make sure this area is being filled as well and to do that we need to add a custom tab bar so come over here within the tab.navigator we will include another prop called tab bar we have the props arrow function and i am going to return the custom tab bar over here i'll pass over the props as well like this and we are going to create the custom tab bar component right on top okay it's a constant custom tab bar props arrow function and we are going to return a um container view and within this container view we will have another view which will basically um fill up this area over here so give it some stalling position equals to absolute bottom equals to zero left equals to zero right equals to zero height equals to thirty and background color equals to colors.grade 3 and after this view we will include the bottom tab bar and we will pass in the props as well like this all right save it perfect okay so after the bottom tab navigator the first screen that we'll be working on is the home screen so head over to the home.js file i am going to remove everything except for the container view like this i am going to get rid of these two as well okay and now for the home screen the first thing we have here is actually the header bar and since we are going to need the header bar in the reword screen as well i am going to create a standalone component for this so um create a new folder called components within the components folder create a new file called header bar like that so over here i need to import react from react i need to import a couple of things from react native and i'm going to create the functional component over here so constant header bar like this arrow function return a normal view with a text that says header bar because i want to test if it works or no all right don't forget we need to export default add a bar over here so after this before we can render how to bar component in the home.js file we need to include i'm sorry we need to create a new file called index.js over here and over here we need to import header bar from header bar and after that we need to export the header bar like that now in the home.js file i can then import from components i can import the header bar and i can render it like this save it and yep it's working now head back to the header bar component and over here i'm going to import a couple more components from react native we need safe area view we need view we need touchable opacity we need image we need text and perhaps later we might need the style sheet as well okay now over here i'm going to import from constants we need the sizes colors fonts and also icons now within the header bar we are going to return the save area view like this give it some styling the height is equals to 150 width equals to 100 background color equals to color stop purple and flex direction equals to row this is so that the greetings can be on the left and the toggle button can be on the right okay let me try to save it first okay so we have the background color in place now within the safety review we need two things right we need to render the greetings and also the um toggle button for greetings we will give it a container view like this give it some styling flux equals to one padding lav equals to sizes.padding and within this view we are going to render two different text components the first one we are going to render um the username which is wendy in this case i'm gonna just hardcode it and followed by welcome back give it some styling color equals to colors.white and the font will be fonts.h2 same thing goes for the welcome background things save it okay cool next we'll need to work on the toggle button which is this button over here okay so for the toggle button the first thing we need is to render a detachable opacity give it some styling the flex direction equals to row align items equals to center justify content equals to sorry flex n margin horizontal equals to sizes.padding height equals to 40 border radius equals to 20. and lastly the background color equals to colors dot light purple and now within this touch opacity we need to render sun icon and also the moon icon so we have sun and also moon so for the sun i'm going to give it a continuous view as well give it some stalling width equals to 40 height equals to 40 align item center justify content equals to center as well and within this view we need an image component the source will be icons.sunny and the style is equals to height equals to 30 30 sorry width equals to 30 as well and tint color equals to color stop white all right so we have successfully rendered the sun icon over here next we need to render the moon icon and it's almost the same so i'm going to just copy and paste it like this and change the icons to night all right now we'll need to create the indicator for the toggle button so to do that i am going to use the style sheet so constant styles equals to stylesheet dot create if the selected theme is snipe mode so selected night mode style then the border radius equals to 20 and background color equals to colors.black whereas if the selected team is light mode selected light mode style the border radius equals to 20 as well just that the background color equals to colors.yellow as of now i'm going to just assume the default selected theme is the dart theme okay so over here i am going to use the spread operator to to include the um styling all right so styles dot selected night mode style like that okay now before we proceed to work on the toggle button to toggle between light and dark theme i am going to first create a scroll view with a background color of dark grey so that it will be easier for us to test the light and dark team later on okay so head back to your home.js file and over here i am going to import scroll view like that and here i am going to render the scroll view give it some styling flex equals to 1 margin top equals to negative 25 border top left radius equals to sizes dot radius times two border top right radius equals to same thing sizes that radius times 2 as well and background color it goes to color start gray tree save it oh i'll need to import from constants so import from constants and over here we need a bunch of stuff we need constants we need icons we need colors we need um fonts we need images sizes and dummy data okay well perhaps let me change the background color to secondary i think it would be better okay all right now before we can work on the toggle team function we need to first install a library called redux okay and to do that open up your terminal and run i'm sorry and type npm install react redux redux and redux tongue enter alright now same thing we need to run react native link and followed by the pod install in the ios folder next we'll need to restart the app so close the app like that navigate back to the root folder and run reac native run ios alright now that we have successfully installed redux the first thing we need to do is to create a folder called store like that and within the stores folder we need to create two files which are team actions and also team reducer whenever you are dealing with um redux you certainly need the action and also reducer okay now in the teamactions.js folder we are going to import the um light and dark team from constants okay so light and dark and over here we need to declare some constant variables so export constant toggle team begin equals to toggle team begin and i'm going to copy and paste it like this and change this to success and this to [Music] failure okay next we'll need to have a function called toggle team which basically for us to you know change the team right so it will take in one parameter called team type like that and normally in redux for each of these action function we need to create three more um dispatch functions okay so export constant toggle team begin it goes to arrow function return type equals to toggle team begin next we have toggle team success right and the selected team over here the type will be toggle team success and the payload will be selected these payload over here will then be passed over to the reducer file later on okay and lastly we have toggle team failure function error type equals to toggle team failure and pay lot equals to error all right now within the toggle theme function we are going to return this patch like this and before we do anything else we need to dispatch toggle team begin and after that we will switch the type like that team type so if the value i mean if the team is equals to dark then i will dispatch toggle team success dark team i'm going to copy and paste it like this and if the team type equals to light i am going to dispatch the toggle team success by passing the light team over and if the team type is not one of these two i am going to dispatch toggle team failure and the error object equals to invalid team type that's it next for the reducer we will first need to import from the team actions like this and we will import everything as team action type and next we need to import from the oops we need to import from constants as well and here we need to import the selected team and we are going to use these um selected theme which is currently hard coded to dark team and set it as the initial team okay so constant initial state equals to add team selected team like that and area will be now next we can then create the team reducer function over here constant team reducer the state will be the initial state we will take in action as well arrow function and over here we will be using the switch statement we are going to switch based on the action.type and if the action.type equals to team action type start toggle team begin i am going to simply return the state and also error should be equals to now and if the action.type equals to team action type start toggle theme success i am going to return the state as well just that this time i am going to override app team equals to action dot payload dot selected team which is the one we pass over from this this page function over here right okay and lastly if the um action type equals to team action types dot toggle team failure we are going to return the state as well and we will need to overwrite error equals action.payload.error and if it's none of these we are going to return the state itself like that and of course don't forget we need to export default team reducer now up to this point i would say we have successfully set up redux in our project but before we can use it we need to sort of inject it in the app.js file so head over to your app.js file and over here we need to import a couple of things we need to import [Music] from redux we need to import create store and apply middleware and also we need to import from react redux like that and we need to import provider we need to import from redux tongue and this one will be tongue itself and lastly we need to import from stores team reducer and this one will be team reducer like that now right before the app functional component we are going to create the store so constant store equals to create store and we are going to pass in the team reducer and apply middleware thunk like that and lastly we will need to wrap this whole thing within provider and the store equals to store that's it all right now what i would like to do next is that i want to be able to toggle this indicator based on redux so to do that head over to the headerbar.js scroll to the top and over here we need to import um from read create redux and over here we need to import ops connect like that and now scroll to the bottom and over here we need to be able to sort of inject the dispatch function from teamactions.js and also the state from which means the app team actually from team reducer into header bar and to do that we need to create two functions the first one is the map state do props function the paramobi equals to state and we are going to return app team state dot app team and error equals to state dot error what we are doing here is basically we are getting the values from team reducer initial state which is these these two properties and inject it into the header bar component through props okay so next we need to create another function called map patch to props so the param equals to dispatch and we will return toggle theme the param is team type arrow function and we are going to return a dispatch call to toggle team function pass in team type okay so for this function what it does is basically to inject the toggle team function from teamactions.js into header bar as props as well okay and lastly we will need to export default connect map stat to prop and map dispatch to prop into header bar and we can get rid of this and since we are injecting the state and also the dispatch function as prop we will need to include it over here before we can use it all right so we have app team and also toggle team now if you were to save it nothing should change okay now what i'm going to do is that i'm going to create a function over here called function toggle theme handler within this function if the current selected team which is um app team dot name equals to light which means the current selected team is actually light team then i am going to trigger the toggle team function by passing dark over if the current selected team is dark team then i'm going to trigger the toggle theme function by passing light over like that and now whenever the toggle button is being clicked i want this function to be called and to do that within the touchable opacity we need to add in the on press prop and over here we will call the toggle theme handler and if you were to save it nothing should change as well even if i click on the toggle button oh i think i forgot to import the toggle theme okay so over here we need to import from the stores team actions and we need to import the toggle theme function over here save it and now you should be able to toggle i mean click on the toggle button without any error now in order to change the indicator depending on the selected team we will need to do some checking over here all right i'm gonna use the spread operator and if the current selected team equals to light i am going to render the selected light mode style and if it's not it will be an empty object like this and for the moon if the current leak i mean if the current selected team it goes to dark then i am going to render selected night mode style and if it's not i'm going to simply return an empty object now try to save it there you go we should be able to trigger the toggle now perfect all right so next thing i want to do is that i want to be able to sort of change the background color of this scroll view based on the selected team all right so to do that head over to your home.js file and over here we need to import from react redux and here we need to import connect and since it will be more or less the same i'm going to copy from header bar component like this and paste it in the harm.js file so i'm going to replace this with this and change this to hum and since we are not using the toggle theme function over here we can safely remove this alright now save it nothing should change at the moment even if we toggle the team that's because we need to do some configuration over here so the background color for the scroll view should be app team oh and i forgot to import it like this at team yep the background color should be equals to app team dot background color save it now if i were to toggle the team it should change accordingly sweet alright so the light and dark theme toggle button is all set next we'll be working on these sections over here so within the scroll view we will have the reword section and followed by the promod section over here so go back to the source code and within the scroll view we will have the reword section like that and also the promo section oh before i forgot we need to add some padding button for the scroll view as well so content container style padding bottom 150 this is so that the scroll view the content of the scroll view will not be blocked by this floating button later on okay so now for the reword section which is this section over here we are going to render a new function called render available rewards and we are going to create this function over here return something now for this reward section this whole thing here should be a button all right so we will wrap this whole thing within a touch opacity give it some styling flex direction equals to row margin top equals to sizes.padding margin horizontal equals to sizes.padding as well and the height will be 100 and whenever i click on this button this header sorry this reword section button i am going to navigate to the reword screen now within this touchable passy we will have two different sections the first section on the left is the reward cup section and the second section on the right is the reward details okay so over here within the touchable opacity we have the word cup section and followed by the we would detail section so for the reworked cup section we need a container view give it some styling with equals to 100 height equals to 100 align item center justify content center as well background color equals to colors.pink and don't forget we need to include the border radius for these two parts as well so border top left radius equals to 15 and border bottom left radius equals to 15 as well save it all right so the container view is in place next we'll be using the image background component to render the reword cup so that we can render the text component in the middle later on okay so within this container view we are going to render image background component like that the source is icons.rewordcup mode equals to contain the style is going to be width at the 5 height at d5 as well margin left equals to 3 align item center and justify content center as well save it alright so the reworked cup icon is in place all we need to do now is to render the text component so over here we will have another container view give it some styling width equals to 30 height equals to 30 border radius equals to 15 align item center justify content center as well and background color equals to colors.transparent black and now within this container view we will have the text component i'm just going to hard code it to 280 and give it some styling the color should be white and the font should be h4 [Music] save it alright cool so we have the reworked cup section completed next we'll be working on the reword detail section over here okay so for the reward detail section we are going to need a container view as well give it some styling flex equals to one background color equals to colors.light pink margin left equals to negative 10 border radius equals to 15 a line item oops align item equals to center and justify content equals to center as well all right so the container view is in place next we are going to render the text component so the title is going to be available rewords and the style is going to be color equals to colors.primary fonts equals to h2 just that i would like to overwrite the font size to 20. save it all right we are almost there all we need to do now is to render this part over here okay so underneath the text component we will create a view with a bit of styling margin top equals to five padding equals to sizes dot base border radius equals to sizes dot radius times 2 and background color equals to calorie start primary and within this view we will have the text component and in order not to complicate things i'm just going to hard code it like this so 150 points we will get 250 off and give it some styling color equals to white and the fonts equals to body tree perfect all right next we'll be working on the promo section over here so to do that we will render a new function called render promo deals and we will create this function over here so function render promote use return something so the first thing we need here is basically a container view give it some styling flux equals to 1 and a line item equals to center and within this container view we will have many two different sections which are the header section which is these tabs over here and also the details section over here okay so within the view we will have the header section which is basically the tabs and also the details section so for the tabs we are going to render like this tabs and this tabs component is going to tag in app theme as one of the props okay this is so that we can customize the tab background color in accordance to the selected team over here okay so um i think that's all for now we are going to add a few more props later on and now we are going to create this tabs component over here so constant tabs and it has one prop for now which is the add team arrow function and we will return something so for the tabs component the first thing we need here is the container view give it some styling flex direction equals to row align item equals to center justify content equals to space between margin top it goes to sizes dot padding for the background color we are going to get it from app team dot tab background color and lastly the border radius should be sizes dot radius and now within this container view we need to render two different things we need to render the tabs itself of course and also we need to render the tab indicator so within the view we are going to render the tab indicator and also the tab itself for now let's work on the tabs first so for the tabs we are going to use the map method to render three buttons over here okay so first thing first we need to populate the promo tabs data so over here we are going to create a constant variable called promo tabs and it's getting the value from constants dot promotables all right now we can then use the map method to render these promote tabs okay so promote tabs dot map item index arrow function and we are going to return the touchable opacity make sure to supply the key as well so key equals to promote tab index and whenever i click on this i'm just going to simply console.log item for now and within this touchable opacity we are going to have a container view give it some styling padding horizontal equals to 15 align items equals to center justify content equals to center as well and height equals to 40. and now we can then render the text component so we are going to render item dot title give it some styling as well color equals to colors.white and the fonts equals to h3 save it alright so we have the tabs in place and if i were to toggle the theme it should change accordingly as well great and now for the tab indicator we are going to create a component as well called tab indicator and we will create the component over here so constant type indicator it's not taking any props for now and arrow function oops and we will basically um render a dummy view okay so vu give it some stalling so position has to be absolute height equals to 100 percent with i'm gonna give it a dummy value which is um 100 left equals to zero border radius equals to sizes.radius and backgroundcolor equals to colors.primary all right so the tab indicator is in place it doesn't do anything for now but we are going to animate it in accordance to the promo list over here okay all right so we will revisit the tab shortly and we will now work on the promo list okay so for the promo list i am going to use the animated flat list this is so that we can get the scroll x position to animate the tab indicator later on alright so head over to the render promo function over here in the detail section i am going to create the animated flat list so the data is going to be dummydata.promos it should be horizontal it should be paging enable scroll event throttle should be 16 snap to alignment equals to center shows horizontal scroll indicator equals to false and don't forget we need to get the scroll x position so on scroll equals to animated dot event native event content offset x scroll x and over here the use native driver equals to false and don't forget we need to initialize the scroll x variable at the top [Music] over here so constant scroll x equals to react.userf new animated value the initial value is going to be zero dot current okay and next for the render item so we have item index arrow function so first thing first we need to render the container view give it some styling flux equals to one align item equals to center width equals to sizes.width and padding top equals to sizes.padding save it oh i almost forgot i need to include the key extractor props over here so key extractor equals to item item dot id all right and now within the container view we have the image itself we have name we have description we have calories and lastly we have the button so within the view we have image we have name description calories and button so for the image we need the image component the source equals to images.strawberry background resize mode equals to contain and style equals to with 100 oh i need to include sorry import the image over here so render promo okay oh the reason why the image is not showing is because i forgot to return over here alright save it okay so we have the image over here next we need to render the name so text item name give it some styling color equals to color start rate the font equals to h1 just that i would like to overwrite the font size to 27 all right and next we have the description so item dot description give it some styling margin top equals to tree color equals to app team dot text color and the fonts equals to fonts.body4 alright next will be calories same thing text component calories will be item.calories give it some installing margin top equals to tree as well color equals to app team dot text color and the fonts equals to body for as well okay all right and now for the button which is this button over here we are going to create a standalone component for this so that we can use it in other screens as well okay so now head over to the components folder create a new file called custom button same thing i'm going to import from react i'm going to import a couple of things from react native so i need touchable opacity and i need text component we need to import colors from constants as well after that we can then create the custom button functional component so constant custom button arrow function return something and don't forget we need to export default custom button as well and for this component we are going to tack in a few props so we need the container style we need label style we need the label we need arm press and also we need the is primary button flag and also the is secondary button flight the reason why we need these two flags is because there are many two different types of buttons in this project all right so we have this type of button with um background color and also this type of button without background color okay so within the return statement we are going to return the touchable opacity give it some styling so line item center justify content center as well and for the background color if it's primary button equals to true then we are going to use the primary color if it's not then it's going to be transparent for the border color if it is secondary button then we are going to return the primary color if it's not then it's going to be transparent for the border width if it's a secondary button then it's going to be 1 if it's not it's going to be 0 and over here we will include the container style as well and for the arm press equals to on press and within the touchable opacity we are going to render the text component so this one is going to be label give it some styling so if it's primary button then the color should be white if it's not then it should be primary and we are going to include the label style over here as well all right save it and we can include it in the index.js file so i'm going to change this to custom button and export it over here all right now we can then head back to the home.js file in the button section oh before this we need to include the um component first so we need to include custom button like that and go back to the render promo function within the button section we can then render the custom button so the label is going to be older now this is a primary button and the container style it goes to margin top will be 10 padding horizontal will be sizes dot padding padding vertical equals to sizes.base border radius equals to sizes that radius times two and the label style is going to be fonts h3 and whenever i click on this order button i am going to navigate to the location screen save it all right cool so we have the promo list ready and if i were to click on this button it should take me to the location screen perfect all right now we are going to take a look at how we can animate this tab indicator based on the scroll x position okay so the first thing we need to do is to pass the scroll acts to the um tabs component so we can do it like this so um scroll x equals to scroll x and now head over to the tabs component over here we can then include the scroll axe okay now in order to animate this tab indicator we need to be able to get two key information the first one is actually the um x position of each of these tabs and the second piece of information is actually the width of each of these tabs in order to get these two values you can of course hard code it which is not recommended or you can use reit native ref to measure the layout which is exactly what we are going to do next so the first thing we need to do over here is that instead of getting the promo tabs directly from the constants we are going to create ref and inject it into each of these items okay so i'm going to use the map method promo tab arrow function i am going to use the spread operator over here so promo tab and we will inject the ref over here so rev react dot create ref like that and now in the tabs component when we are rendering the promo tabs over here i am going to set the ref of this view so ref equals to item dot ref now with this line of code we have access to the ref property of each of these tabs which will then allow us to measure the layout so now at the top of the tabs component we are going to use the u state hook to store the major layout information all right so constant measure layout set measure layout equals to react dot u state and this is going to be an empty array and now before we can actually measure the layout of each of these tabs we need to specify which one is the container ref so over here constant container graph equals to react.use ref and we are going to set the container ref to the ref of our container view like that okay and now within the tabs component we can then include the use effect hook so react.use effect like that and we will listen to the um container ref dart current so within the use effect hook what we are going to do is that we are going to loop through each of these tabs get access to the ref and measure the layout all right so over here i'm going to create an empty array and we are going to look through the promo tabs by using the for each method like that arrow function and now we can then access to the ref dot current dot measure layout so for the first paragraph we need to supply the container ref so like that container ref dot current and then now we should be able to get access to the x position y position the width and the height of each of these tabs so over here arrow function and now what i'm going to do is that i'm going to simply console log this whole thing all right now save it there you go so we got access to the x position the y position the width and the height of each of these tabs and now with this information we can then push into our array so over here it will be x y the width and the height and once the line of the this array equals to the line of promote tabs then we are going to set the measured layout like that all right and then in the tab indicator section we can then check if the measure layout is being populated dot line more than zero then we are going to render the tab indicator and for the type indicator we are going to pass in two props one is the measure layout which is basically the layout information of each of these tabs and also we need to pass in the scroll x and now for the type indicator component over here we will then include the measure layout and scroll x as props okay so first thing first i'm going to try to animate the width of the tab indicator in accordance to the width of each of these tabs let's see how it can do that so instead of using the ordinary view we are going to use the animated dart view and over here we need to set up the input range so constant input range equals to promotetabs.map we can omit the first parameter and get the index and then we can get the width so i multiply by sizes start with next we can then calculate the tab indicator width over here so constant tab indicator with equals to scroll x dot interpolate and we are going to supply the input range over here and for the output range we will be taking the width from the measure layout array so measure layout dot map measure arrow function we are going to return the measure.width all right now instead of hard coding it to 100 we can change it to tab indicator width now if i were to save it the width of the tab indicator will animate and change accordingly all right perfect and next we are going to um animate the x position so over here constant translate x it goes to scroll x dot interpolate the input range is the same which is input range and the output range instead of getting the width we are going to get the x position this time and now over here we can then use the transform property like this and include the translate x save it oops a bit of typo now let me refresh the app and now if i were to scroll the list view or the promo list it should animate accordingly sweet alright now the last thing we are going to do for the home screen is that whenever we click on the tab the flat list underneath here should scroll accordingly as well okay so in order to do that first head over to the render promo function scroll down to the flat list and over here we need to assign the ref so wrap equals to promo scroll view ref like that and we are going to create this ref over here so constant promo scroll view ref equals to react not use ref all right now with this graph we can then manipulate the flat list over here next we'll need to make use of the use callback hook so constant on promo tap press which means whenever i click on this button i'll make use of the react dot use callback hook i'll pass in the index over here will be the arrow function and now whenever the tab is being pressed i will make use of the ref so promo scroll view ref dart current dot scroll to offset and the offset is equals to promote tab index multiply by sizes.width and now all we need to do is to pass this over to the tabs component so scroll down in the render promote use function for the tabs component we are going to pass over the on promo tab press as well and now in the tabs component all right over here we will then include the unpromoted press and we will use it over here so whenever i click on this tab i should call the on promo tab press and at the same time i'll pass over the index as well so save it and now if i were to click on this tab the flat list should scroll accordingly as well alright perfect there is actually one more thing i would like to do i would like to animate the type color as well so to do that at the top of the tabs component we need to first calculate the tab position so constant tap position equals to animated dot divide scroll x sizes that width all right once we got the tab position over here when we are rendering the promo tabs we can then use the interpolate method to get the text color so constant text color equals to type position dot interpolate the input range equals to index minus one index index plus one and the output range will be colors.light gray two colors.white and color is not light gray too and the extra plate equals to claim and lastly we can then replace the color with this don't forget we need to change the component to animated dot text over here as well now save it all right now the text color should animate accordingly as well perfect all right so that's all for the home screen next we'll be working on the reward screen so for the reward screen it's actually more or less the same as the home screen so we have the header bar over here and followed by the rewards detail underneath so head over to the reword rewards.js over here we are going to import the flat list and also image background after that we need to import a couple things from the components so import from components we need the header bar and also custom button next we need to import from the constants as well so constants over here we need the dummy data we need colors fonts sizes and also icons don't forget we need to make sure the rewords component is connected to the redux as well so import [Music] react redux over here is going to be connect and for this i'm going to simply copy and paste from the hum.js file so scroll to the bottom i'm going to copy this whole thing over here and paste it in the rewords file and i'm going to replace this i mean replace this with rewards and we can get rid of this okay now we just need to add a few more props for the rewards component so we need the navigation and also the app team this one's actually from the redux okay all right the next thing i'm going to do is that i'm going to remove these two properties all right we don't need them save it and i'm going to replace this text component with the header bar component save it and now if we were to toggle the team it should change the theme in the home screen as well perfect perfect all right so now the header bar is completed next we'll be working on the reword list okay so what we are going to do is that we are going to use flat list to render the available rewards over here and we are going to use the flat list list header component props to render everything over here all right so let's see how we can do that so um here we have the header and next we'll be working on the details alright we are going to render the flat list give it some styling margin top equals to negative 25 um border top left radius equals to sizes that radius times two this is actually for these two borders over here border radius sorry all the radius over here all right and border top right radius equals to sizes that radius times two as well and the background color should be ab team dot background color the data of the flat list should be equals to dummy data dot available rewards the key extractor should be item item dot id shows um vertical scroll indicator should be equals to false and what i'm going to do here is that i'm going to first render the available reward list before we move on to the other components over here okay so the render item equals to item arrow function and over here we are going to return the view give it some stalling align item equals to center justify content equals to center as well margin horizontal equals to sizes.padding margin bottom equals to sizes.base padding vertical equals to sizes.base as well border radius equals to 20 and for the background color if the um eligible property equals to true we are going to render yellow if it's not we are going to render gray all right so for the background color if the item.eligible equals to true then we are going to render yellow if it's not we are going to render great save it all right now within these um container view we need to render the text component so we need to render item.title give it some styling oops okay for the color if the item the eligible equals to true then we will render it with black color if it's not it's going to be light gray and the font is going to be fawn start body tree [Music] all right save it okay cool so the um available reward list is in place and if i were to toggle the team it should work as well perfect all right next we'll make use of the list header component props so list header component and within this prop we are going to render three different sections okay the first section is the reword point section which includes the text component as well as the image component over here the second section that we'll be working on is the button section and lastly the third section is going to be the um reword label over here okay so now over here we have the reward point section we have the button section and also the header label section so for the reward point section we are going to render a new function over here called render we would point section and we are going to create this function over here so function render we would point section and we are going to return something so the first thing we need for this section is a container view like that give it some styling a line item should be equals to center margin vertical equals to sizes.padding and now within this container view we are going to render the text component and followed by the image all right so over here we have the text component and followed by image so over here we will render the text component and it's going to be we would give it some styling color equals to colors.primary the fonts will be h1 just that i would like to overwrite the font size to 35. save it alright so we have the rewards label in place next we need to render the second text component over here so we need another text component and i'm just going to hard code it like this so you are 60 points away from your next free word give it some styling as well so color equals to app team dot text color width equals to sizes dot width multiply by 6 0.6 text align equals to center the font should be h3 just that i would like to overwrite the line height to 18 oh and i need to include the margin top as well over here equals to 10. save it all right so we have the text components in place next we are going to render this image over here now if you pay attention to this image there is a text component in the middle in other words the structure should be more or less the same as the one we have in the harm screen over here okay so for the image we are going to use the image background component source oops is going to be icons.reword cup resize mode equals to contain and the style is going to be margin top sizes that padding with equals to sizes dot width multiplied by 0.8 the height is going to be same thing sizes dot width multiplied by 0.8 as well align item equals to center justify content equals to center as well save it all right so we have the image in place now within the image background component we are going to render a container view like this give it some stalling with equals to 70 height equals to 70. border radius equals to 35 align items equals to center justify content equals to center as well and the background color equals to colors.white and within this view we are going to render the text component and we are going to hard code the reward point to 280 give it some stalling the font is going to be h1 save it alright so the first section is completed next we are going to render the button section okay so in the list header component we are going to render a new function called render buttons and we are going to create this function over here function render buttons and we are going to return a container view like that give it some styling flex direction equals to row align items equals to center justify content equals to center as well now within this container view we are going to render two buttons which are the scan button and also the redeem button okay so here we have the scan button and also redeem button and we are going to make use of the custom button component that we have created previously so custom button is primary button equals to true label equals to scan and store container style equals to width will be 130 padding vertical equals to 5 margin right equals to sizes.radius border radius equals to sizes.radius times two and the label style is going to be fonts h3 and whenever i click on this button i'm just gonna navigate to the location screen all right save it so the scan button is in place next i'm going to work on the redeem button same thing we are going to use the custom button component this time is going to be a secondary button equals to true label equals to redeem container style with equals to 130 padding vertical equals to 5 border radius equals to sizes dot radius times 2 and the label style is going to be fun start h3 and same thing whenever i click on the redeem button i am going to navigate to the location screen as well save it alright so the button section is in place cool and now for the last section we are going to render the header label over here so in the list header component we are going to render a new function called render available we would header and we are going to create this function over here so function render available rewards header and we are going to return a container view give it some styling margin top equals to sizes not padding margin bottom equals to sizes dot radius padding horizontal equals to sizes.padding and now within this container view we are going to render the text component so over here is going to be available rewords give it some styling the color will be app team dot text color and the font is going to be fonts.h2 save it alright so the reward screen is almost ready notice that we are facing an issue here whereby the um the content of the flat list is being blocked by the bottom tab navigator over here so in order to resolve this we are going to use another prop called lis footer component and we are going to render an empty view with a bit of margin bottom like that save it and now it should work properly let me try the toggle as well all right it's working great so that's all for the reward screen next we'll be working on the location screen so for the location screen we have the header bar over here we have tab buttons search bar and lastly is the location list so now head over to the location screen over here and we are going to import a couple of components from reignitive so we need a safe area view we need text touchable opacity we need image we need text input and we need flat list next we need to import from the constants we need dummy data we need colors we need sizes we need fonts and also icons and don't forget we need to connect the location component to the redux that we have already set up so we need to import from react redux and over here we need the connect same thing i'm going to copy and paste it from the home.js like that i'm going to paste it over here and i'm going to replace this with location and now we can get rid of this and don't forget we need to add a few props for the location component so we need navigation and also we need the app team from redux over here okay so now for the location screen the first thing i'll be working on is the header section over here so first thing first we need to get rid of this we don't need them and also we get rid of these two properties as well and now within the container view we have the header section and we are going to render a new function called render header and we will be creating this function over here so function render header like that and return something so now we will return a safe area view like that give it some styling height equals to 120 background color equals to color stock primary and align item equals to center and now within the safe area view we need another container view like that give it some stalling flex direction equals to row padding horizontal equals to sizes.radius align items equals to center okay and now within this container view we are going to render an icon button and followed by the text component and for the icon button we are going to create a standalone component for this so head over to the components folder create a new file called icon button same thing we need to import from react we need to import a few components from react native so we need touchable opacity [Music] and also image and lastly we need to import from constants we need the colors all right and over here we will create the icon button functional component and this component will receive four props which are container style icon style icon and on press alright so arrow function return something don't forget we need to export default icon button and now within the return statement we are going to return the touchable opacity give it some styling align item equals to center justify content equals to center as well and we are going to include the container style and within the touch opacity we have the image component source equals to icon resize mode equals to contain and style equals to width 25 height 25 thin color equals to colors.white and we will include the icon style over here oh and the arm press equals to unpress like that after that we can head over to the index.js file copy this change it to icon button and export it over here all right now head back to the location screen make sure to import the component over here so import components we need the icon button so now within the container view over here we can then render the back button here it's going to be title title like that and also we need to create another empty view over here so that the title will be placed in the middle alright so for the back button we are going to render icon button like that [Music] the icon equals to icons.left arrow and whenever i click on this button on press i should be able to go back to the previous screen so navigation not go back like that and navigate to the location screen all right so we have the back button in place next will be the text component for the title so over here we need a container view give it some styling flex equals to one align item equals to center and within this view we are going to render the text component and this is going to be locations give it some styling as well color equals to white fonts equals to h1 and i would like to overwrite the font size to 25. save it all right we are almost there all we need is an empty view over here so that the title will be in the middle so style with 25 perfect all right so after the header section we are going to create a container view for the detail section over here okay so underneath the header section we are going to render the detail section and over here we need a container view like that give it some styling flex equals to one background color equals to app team dot background color margin top equals to negative 20 border top left radius equals to sizes dot radius times two border top right radius equals to sizes that times 2 as well and padding will be sizes dot padding save it alright now the container view is in place next we are going to work on the tab buttons over here and since we'll be using it for multiple times and also we'll be using it in the order screen over here i am going to create a standalone component for the tab buttons all right so head over to the components folder create a new file called tab button over here we need to import reit from react we need to import a couple things from react native we need touchable opacity we need view and also we need text after that we need to import from constants we need colors and also fonts and now we can then create the tab button functional component so for this component we need a few props which are container style label selected and unpressed all right so arrow function over here return something and don't forget we need to export default tab button and within the return statement we are going to return the touchpopacity give it some styling align item equals to center and we will include the container style as well and over here the arm press equals to on press now within the touchable opacity we are going to render two things which are the text component and also a line underneath all right so we need a text let me just do some comment as well text and also line all right so for the text component we are going to render label give it some styling for the color if it's selected then it will be colors.primary if it's not then it will be colors.great the fonts will be fonts.body2 just that i would like to modify the font size to 18. and now for the line we are going to create a view like this give it some stalling margin top if it's being selected it will be 3 if it's not it will be 4 height if it's being selected then it will be 4 if it's not that will be two width will be one hundred percent and the background color equals to if it's being selected then it will be primary color if it's not then will be great all right save it and now you can then export it in the index.js file copy this and change this to tab button and export it over here now head back to the location screen within the container view we are going to render a new function called render top bar section and we will create this function over here so function render top bar section and we are going to return a container view give it some styling flex direction equals to row and now within this container view we will be having three tab buttons which are nearby previous and favorite so we have nearby we have previous and also favorite and we need to import the um tab button over here like that and we can then use it over here now so tab button container style it goes to width will be 80. label is going to be nearby try to save it next we have the previous tab button all right so type button container style width equals to 100 and the label equals to previous all right and the last one is going to be the favorite so tap button same thing container style equals to with 100 and label equals to favorite okay the padding is missing i'm pretty sure there's a typo over here all right so sizes dot padding like that okay next we need to make sure these tab buttons are clickable and to do that we are going to use the u state hook so scroll to the top over here constant selected tab set selected tab it goes to react dot ustate initial value is going to be zero and now back to the tab button component over here we are going to include the selected prop like that and it will be true if the selected tab equals to zero and whenever i click on this type button i am going to set the selected tab to zero and now i'm gonna just copy and paste it over here and here and next i'm going to change this to one and this one to two save it and now you should be able to change the tab button like this perfect all right so after the top bar section we are going to work on the search bar so to do that we are going to render a new function over here and we are going to name the function as render search bar same thing we are going to create this function over here so function render search bar and now we will return a container view give it some stalling flex direction equals to row margin top equals to sizes.radius height equals to 50 padding horizontal equals to sizes.padding border radius equals to 25 background color equals to colors.light green 2 and the align item should be equals to center now within this container view we are going to have the text input component on one side and also the search icon on the other side so over here we have the text input give it some styling flux should be equals to 1 height equals to 50 color equals to like and the font equals to fonts.bodytree and for the placeholder it's going to be enter your city state or zip code and the placeholder text color is going to be colors dot light grey 2. all right so underneath the text input we are going to render the search icon so image source is going to be icons dot search and style is going to be width dirty height 30 and the tint color is going to be colors.light gray 2. save it all right sweet so for the last part of the location screen we are going to render a list of location by using flat list so over here we are going to render a new function called render location list and we will be creating this function over here now this function is going to return a flat list like this give it some styling so margin top equals to sizes.radius padding horizontal equals to sizes.radius as well the data is going to be dummy data dot locations the key extractor is going to be item item dot id shows vertical scroll indicator equals to false keyboard dismiss mode equals to on drag which means whenever we scroll through the list it will actually hide the keyboard okay now for the render item over here is going to be item arrow function and since this whole thing is actually a button we are going to return a touch opacity as the container give it some styling margin bottom equals to sizes dot radius border radius equals to sizes dot radius times two padding horizontal equals to sizes dot padding padding vertical equals to sizes dot radius and background color equals to app team dot card background color and whenever i click on this button i should be able to navigate to the order screen so navigation.navigate to the order screen and i'm going to pass over the selected location as well that save it all right now within the touchable opacity we are going to render the name and bookmark the address the operation hours and also the buttons all right so over here we are going to render the name and bookmark address operation hours and also buttons so for the name and bookmark we are going to create a container view give it some styling the flex direction equals to row and now over here we need to render the text component and it's going to be item.title give it some styling flex equals to one color equals to app team dot text color and the fonts equals to h2 like that save it all right so we have the title in place next we need to render the bookmark icon so over here we are going to render the image component and for the source it's going to be if the item is bookmarked like that then the icon will be icons.bookmark field and if it's not it's going to be icons.bookmore for the style is going to be height 20 with 20 and tint color equals to if the item.bookmark is true we will return colors.red and if it's not it's going to be colors.white save it all right after the name and bookmark section we are going to render the address okay so over here same thing we need a container view give it some stalling margin top equals to sizes dot base and width equals to 80 percent and within this view we are going to render the text component over here it's going to be item dot address give it some styling color equals to app team dot text color and the font is body tree just that i would like to override the line height to 21 save it all right we are almost there after the address we are going to render the operation hours so over here same thing we need the container view give it some styling margin top equals to sizes.base and we are going to render the text component as well this one is going to be item dot operation hours and the style is going to be color equals to have team dot text color fonts equals to body five and i would like to overwrite the line height to 16. all right so the last part of the location list is the services i'm sorry it's not buttons it's called services all right now for this same thing we need the container view as well give it some styling flex direction equals to row margin top equals to sizes.base and now within the um container view we are going to render the pickup service and also the delivery service all right so here we have pickup and also delivery same thing for this we need a container view give it some styling border color equals to app team dot text color border width equals to 1 border radius equals to 20 padding horizontal equals to sizes that radius and padding vertical equals to five and now within this view we are going to render the text component that says pick up give it some styling color equals to app team dot text color and fonts equals to bodytree save it all right now for the delivery i'm going to just copy and paste it over here like this i'm going to include the margin left equals to five and this one should be delivery save it all right so the location list is completed great so after the location screen next we'll be working on the order screen so what we have in the order screen is that we have the header section over here and within the detail section we have these tab buttons which we have already developed in this screen location screen all right and we have this listing over here and also we have this um vertical sidebar over here that can you know change the listing all right now let's see how we can achieve that head over to the older.js file and over here we are going to import a few more components so we need save area view we need text we need um touchable without feedback we need image and also we need flat lists all right after this we need to import from um constants we need dummy data we need fonts colors [Music] sizes and icons we also need to import from the components so over here we need the icon button and also tab button and lastly don't forget we need to import from oops and board from viet redux as well so we need the connect same thing i'm just going to copy and paste it from the home screen like that and paste it over here and i'm going to replace this with order all right now we can get rid of this and now we need to import a few more things for the prop so we need navigation we need route and also the app team all right now everything should still be the same okay just that i would like to remove this and also these two properties over here all right now remember that in the location screen when we navigate to the order screen we have actually passed the um selected location over so in the order screen what i would like to do here is that i would like to retrieve the route params which is the selected location and store it in the u-state hook so constant selected location set selected location equals to react.ustate and this one is going to be now and then we are going to use the use effect hook like that arrow function and now i will get the selected location from route dot params once i got it i will set the selected location with the selected location like that all right now the first component that we'll be working on is the header section and in the header section we have the icon button which is a back button over here and also a text component in the middle and lastly is the location name all right so to do that we are going to render a new function over here and i'm going to call this render header section and i'm going to create this function over here and within this function we are going to return a safe area view give it some styling the height equals to 200 background color equals to colors.primary and align item equals to center save it all right now the container view is in place so within this um container view there will mainly be two sections which are the nav bar and also the location all right so here we have the nav bar and also location so for the nav bar we are going to render a container view give it some styling flags direction equals to row padding horizontal equals to sizes dot radius align items equals to center and within the navbar container we are going to render the icon button icon equals to icons.left arrow and on press whenever i click on this icon button i would like to go back to the previous screen so navigation dot go back save it alright so the button is in place next we need to render the text component and to do that we need another container view give it some styling flex equals to one align items equals to center here we are going to render the text component it's going to be pick up odor give it some styling color equals to white and the fonts equals to h1 just that i would like to overwrite the font size to 25 save it all right almost there all we need is an empty view over here so that the text component will be in the middle so style equals to with 25 perfect and after the nav bar we have the location right so over here we need another container view [Music] give it some stalling margin top equals to sizes are radius background color equals to colors.white one padding horizontal equals to sizes.radius padding vertical equals to five and border radius equals to sizes.padding now within this view we are going to render the text component and here is going to be selected location title give it some stalling color is going to be primary and fonts will be body tree perfect now if i were to choose other location it should reflect accordingly all right now that the header section is completed next we'll be working on the detail section over here so go back to the source code this one is the header section and now we are going to work on the detail section so for the detail section we need a container view give it some installing flex equals to one background color equals to ab team dot background color and margin top should be equals to negative 45 and border top left radius equals to 40 and border top right radius equals to 40 as well save it and within the detail container view which is this part over here we are going to first work on the top tab bar section okay and within the top tab bar section we have three tab buttons over here and also the order number over here all right let's see how we can do this now within the detail container view we are going to render a new function called render top tab bar section and we are going to create this function over here now within this function we are going to return a container view give it some stalling flex direction equals to row height equals to 50 margin top equals to sizes.radius justify content equals to center padding left equals to sizes.padding times two padding right equals to sizes.padding and now within this um container view we are going to render the tab buttons over here and also the odor number over here okay so for the tab buttons we need another container view give it some styling equals to one flex direction equals to row and now we can then render the tab button all right so for this the container style equals to with 60 label equals to menu and i'm just gonna copy and paste it for the other two tab buttons like that oops all right i'm going to change this to 90 this one as well i'm going to change the label to previous and favorite save it all right same thing we also need to use the use state hook to keep track of the selected tab so scroll to the top and over here constant selected tab set selected tab equals to react.viewstate and the initial value is going to be zero and now go back to the tab button and over here we can then include the selected prop and it will be true if the selected tab equals to zero and the unpressed prop whenever i click on this menu tab button i'm going to set selected tab it goes to zero all right i'm going to just copy and paste it for these two change the index to one and change this index to two save it and now you should be able to change the selected tab perfect all right so after the tab buttons next will be the order number so come over here we need to render a container view as well give it some styling with equals to 35 height equals to 35 border radius equals to 10 align item center justify content center as well and background color it goes to primary and within this um container view we will render the text component and for this we will code it to zero give it some styling color equals to white and fonts equals to h3 save it perfect all right so after the top tab bar section next we'll be working on the sidebar and followed by the listing okay so in the detail container this one is actually navbar oh i should call this tab bar and now we will be working on the sidebar and listing so for this we need a container view give it some stalling flex equals to 1 and flux direction equals to row and of course within this container view we need to render the sidebar and also the listing underneath and for the sidebar we are going to render a new function called render sidebar and we will create this function over here and now for the sidebar i'm going to return a container view first give it some stalling the margin top should be negative 10 width should be 65 background color equals to colors.primary align item equals to center justify content equals to center as well save it all right now within this container view we are going to render five vertical buttons and to make it easier we are going to create a standalone component for these vertical buttons okay so head over to the components folder create a new file called vertical text button so over here we need to import react from react we need to import a couple of things from break native um we need touchable opacity and also we need text after that we need to import from constants we need to import fonts colors and sizes and over here we will set up the functional component so constant vertical text button and for this component we need the container style label it and unpress arrow function return something and over here don't forget we need to export default vertical text button and since it's going to be a button we are going to return touchable opacity like this give it some styling align items equals to center and i would like to rotate this button by using the transform property so transform rotate by negative 90 degree and then we will include the container style as well the unpressed prop equals to unpress and within the touchable opacity we need to render the text component and over here it's going to be label give it some styling for the color if it's being selected then we will return white if it's not then it's going to be light green fonts will be body 2 and i would like to overwrite the font sorry font size to 20 and now we can then include it in the index.js file so over here i'm just going to copy change this to vertical text button and i'm going to export it over here now we can then head back to the older.js file make sure to import it and and the components sorry from the components okay so here we need the vertical text button and now go back to the sidebar and within this container view we can then render the vertical text button like this so the label for the first button is going to be snipe so snipe let me try to save it and see what we have next we have coffee so i'm just gonna copy and paste it like this coffee just that for this the container style should be margin top 50. save it all right it's over here so next we have smoothie same thing i'm going to just copy and paste it like this change this to smoothie and this time the margin top should be 70 and width should be 100 all right next we have specialty same thing copy paste it spatial t and for the margin top it's going to be 90 and width equals to 100 as well okay so we have specialty here and lastly we have milk tea okay so same thing i'm going to just copy and paste it like this and change this to t margin top should be 80 and width should be 80 as well all right now all the vertical text buttons are in place next we will need to render the curvy shape like this okay and in order to achieve this we are going to use the svg so scroll to the top over here we are going to import svg and we need circle as well from react native svg go back to the sidebar function what i'm going to do is that i'm going to create a container view and wrap everything inside like this save it okay and over here i am going to render the svg height equals to 65 with equals to 65 as well view box equals to 0 0 65 and 65. and now within this svg we are going to render the circle like that so cx equals to 5 cy equals to 60 r equals to 60 and field equals to colors colors.primary save it all right we are almost there just that we need to copy this and paste it over here and this time i'm going to change the cy to zero save it oh it seems like the mute t text button is being covered by the svg so to resolve this within the container view we are going to set the z index to one perfect all right so all we need to do now is to make sure we can keep track of the selected category and in order to do that we need the new state hook so scroll to the top um over here constant selected category set selected category it goes to react.ustate and the initial category is going to be all right save it now go back to the vertical text button component over here we are going to include the selected prop and this will return true if the selected category equals to snipe and whenever i click on this button i would set selected category do snipe now i'm gonna just copy and paste it like this all right and of course we need to change it accordingly so this one is going to be coffee this one will be smoothie next we have specialty [Music] and lastly is the milk tea all right save it now we should be able to change the category perfect all right now that the sidebar is completed next we'll be working on the manulis but before we can you know work on the flat list we need to be able to first filter the manual list based on the selected category and to do that scroll to the top over here we will be creating the menu state to keep track of the menu list so constant menu set menu equals to react.ustate and the initial value is going to be no all right now we are going to have another use effect hook like this arrow function oh and for this i'll need to include an empty array like this but for this we are going to listen to the selected category which means whenever the selected category is being updated or changed this use effect function will be triggered okay so now i'm going to filter the manual list like this it goes to manual dummydata.manuallist dot filter menu item arrow function menu item dot category equals to selected category which basically means that i will retrieve a list of menu where the category is equals to the selected category and once i got that i will then set the menu like that all right now that the menu has been populated we can then head over to the listing section and we can render the flat list so the content container style equals to margin top sizes that padding padding bottom equals to 50 and the data is going to be menu which is the one we have just populated the key extractor over here is going to be item.id and for the render item okay over here item index arrow function and we are going to return something and since each of these um menu item is actually a button that can navigate to the older detailed screen we are going to use touchable without feedback like that and whenever we click on this like this on press it should navigate to the older detail screen and at the same time i am going to pass over the selected item as well all right now within the touchpad without feedback component we are going to have a container view give it some styling height equals to 150 padding horizontal equals to sizes.padding and for the margin top if the index is more than zero then it will be sizes that padding and if it's not it's going to be zero a line item equals to flex n and justify content it goes to sorry flex n as well save it i'm gonna navigate to the older screen all right now within this um container view we are going to render the thumbnail and also the details all right so here we have the thumbnail and also details alright so for the thumbnail we are going to render the container view give it some styling position should be absolute top equals to zero left equals two sizes that padding width equals to 130 height equals to 140 align item center justify content center as well border radius equals to sizes dot radius background color it goes to color start light yellow and we would like to set the z index to 1. save it alright now within the container we can then render the image so the source is going to be item.thumbnail resize mode equals to contain and style equals to width 100 height 100 as well now save it all right so these are for milk tea category i can change it to specialty i can change it to smoothie i can change it to coffee and also snacks all right cool and lastly we are going to render the detail section all right so over here we are going to create a container view as well give it some stalling width equals to 70 height equals to 85 percent padding left equals to 22 padding right equals to sizes that base padding vertical equals to sizes.base as well border radius equals to sizes.radius justify content equals to space between and background color equals to colors.primary save it all right we are almost there all we need to do now is to render the text component so over here we are going to render the item name give it some styling color equals to colors.white and the fonts equals to h2 and i would like to overwrite the font size to 18 and also the line height to 25 let me arrange it properly all right save it okay and lastly we need to render another text component for the um price so over here item.price give it some styling as well color equals to light yellow fonts equals to h2 and font size equals to 18. save it all right perfect now we can change it as well it should reflect properly coffee milk tea all right perfect so we have um completed the older screen the last screen that we'll be working on for this project is the older detail screen so for the older detail screen we have back button over here followed by thumbnail item name and description after that we can choose the size of the cup we can choose the milk and also we can customize the sweetness and ice level alright so back to the source code head over to the older detail screen and now we are going to import a couple more components from break native so we need view text image touchable opacity and also image background after this we need to import from constants we need dummy data we need colors we need fonts sizes icons okay after that we need to import from components so for this we need the icon button oh and i think i need the scroll view as well i'm gonna include it like that and lastly we need to import from react redux we need the connect same thing i'm going to head over to the home.js copy this part and paste it in the order details screen of course we need to replace the harm with order detail and now we can remove this all right now for the older detail component we need a few more props over here so we need the navigation we need route and also we need the app team from redux all right what i would like to do next is that i would like to remove the text component i'll remove the style sheet as well i'm going to remove this as well all right i'm gonna navigate back to the older detail screen okay now for the container view i'm going to give it some styling flex equals to one background color equals to app team dot background color all right next we are going to wrap this whole thing within a scroll view so over here we are going to render a scroll view the content container style equals to padding bottom will be 150. oh and before we work on the scroll view we need to first retrieve the route.params value which is the selected item from the order screen and keep track it in the order details screen so to do that we will make use of the used hook so constant selected item set selected item equals to react.ustate and the initial value is going to be now and after that we can use the use effect hook so react use effect like that here it's going to be empty array and we will get the selected item from route.params and once we got that we are going to set selected item selected item like this now back to the scroll view we are mainly going to divide the screen into two different parts the first part we have here is the header section and followed by the details section over here okay so within the scroll view we have the header section and also the detail section so for the header section we are going to render a new function called render header section and we are going to create this function over here so function render had the section like that and for this we are going to return a container view give it some stalling with equals to 100 height equals to 55 percent align item equals to center justify content equals to center as well and now within this container view we are going to first render the green background over here okay so we need a view like that give it some styling position should be absolute top will be zero bottom will be zero right will be zero left will be forty border bottom left radius equals to 100 this is to create the border radius over here and the background color equals to color start primary um the reason why it's not showing i think it's because we need to include flex one over here okay after the background we can then render the image source will be selected item dot thumbnail resize mode equals to contain and style equals to width sizes dot width multiplied by 0.7 and height same thing sizes dot width multiplied by 0.7 as well save it all right all we need to do now is to render this back button over here okay so back button we are going to use the icon button component so icon button container style equals to position should be absolute top should be 45 left will be 20 padding will be 10 border radius equals to sizes dot radius background color equals to colors.black and the icon will be icons.left arrow and whenever i click on this icon button i am going to navigate back to the previous screen so navigation dot go back save it all right now if i click on this button i should be able to go back perfect all right that's all for the header section next we'll be working on the details section over here so to do that we are going to render a new function over here so we will render render detail section and we will create this function over here so function render detail section and we are going to return a container view give it some styling flex equals to 1 padding horizontal equals to 30 margin top equals to sizes.padding and justify content equals to space between within the container view we are going to render the name and description over here we are going to render the size and lastly followed by the milk and sweetness section all right so over here we have the name and description section after that we have the size section and lastly we have the milk sweetness and eyes section all right so for the name and description is pretty straightforward all we need is two components two text components so over here we will have the container view and within this container view we are going to render the text so here we are going to render selected item dot name give it some styling color equals to app team dot header color and the fonts equals to h1 just that i would like to overwrite the font size to 25 save it all right now we need another text component over here and we are going to render selected item dot description give it some styling as well so margin top equals to sizes dot base color equals to app team dot text color and fonts equals to body tree save it perfect and next we'll be working on the size section okay so over here we need another container view like that give it some styling so flex direction equals to row align items equals to center and margin top equals to sizes dot radius and within this container view we are going to render the label and followed by the cups okay so we have label and cup all right so for the label we are going to render the text component so over here it will be pick a size give it some styling flex equals to one color equals to app team dot header color and fonts equals to h2 just that i would like to customize the font size to 20. save it all right so we have it here and next for the cup section we also need a container view like this give it some styling flux equals to 1 and flex direction equals to row now within this container view we are going to render two buttons okay and within each of these button we have an image we have text component in the middle and also we have the price at the bottom all right so we need the touchable opacity give it some styling align items equals to center justify content equals to flex n we will work on the unpressed later on all right don't worry and within the touchable opacity we are going to render the image background like that source will be icons.coffee cup style equals to with the height at the [Music] align item center justify content center as well and next we need the image style this is so that we can customize the tint color and for now i'm just gonna put primary alright save it okay i need a closing tag for the image background like this and now within the image background we are going to render the text component that renders 20 ounce like that give it some stalling color equals to white and the fonts equals to body tree save it all right we are almost there now underneath the image background we need to render the price so i'm gonna just hard code it to 450. give it some styling margin top equals to tree color equals to white and the font equals to body tree save it perfect all right what i'm going to do next is that i'm going to copy this whole thing over here and paste it underneath like that save it and now for the image background component instead of 80 we are going to change it to 100 and this one is going to be 32 ounce and the price will be 5 dollars like that all right now that the ui is ready next we need to make sure that we can actually pick a size okay so to do that we need to use the u state hook so over here constant selected size set selected size equals to react dot u-state and the initial size is going to be 32 so go back to the cup section over here and whenever i click on this button this one over here i am going to set selected size equals to 20 because this one is 20 ounce and we are going to customize a bit on the thin color if the selected size equals to 20 we are going to render the primary color if it's not it's going to be colors.grade 2. next for this one over here whenever i click on this the arm press should be set selected size equals to 32 and same thing we need to customize the tint color a little bit so so if the selected size equals to 32 we are going to render the primary color if it's not it's going to be colors.gray 2. save it and now we should be able to pick a size perfect all right so after this we are going to work on the milk sweetness and ice level section okay so over here we are going to create sorry we are going to render a container view give it some styling flex direction equals to row margin top equals two sizes that padding and now within this container view we are going to render the milk um section first so we have the milk section we need a container view like that give it some styling flux equals to one a align item equals to center now within this um container view we are going to render the text component first so over here tags we should render milk and give it some styling color equals to app team dot header color fonts equals to h2 and i would like to overwrite the font size to 20 save it all right now after the text component we are going to render another view which has two icon buttons on the side and also the image in the middle okay now underneath the text component we are going to render the container view give it some styling flex direction equals to row width equals to 100 height equals to 100 as well margin top equals to sizes dot base align items equals to center border radius equals to sizes dot radius background color equals to colors.primary all right now i am going to render the icon button like that the icon equals to icons.left arrow container style equals to margin left will be negative 15 width equals to 25 height equals to 25 as well border radius equals to 3 and background color equals to white the icon style equals to width will be 15 height will be 15 as well and tint color equals to black save it all right and we are going to work on the unpressed later on okay next we need to render the um image sorry the milk icon okay so over here we will render the image component the source will be dummy data dot milk list now this is actually an array and for now i'm i'm gonna just hot code it to zero and dot image resize mode equals to contain style equals to flux equals to 1 with equals to 70 height equals to 70 as well and tint color equals to white save it alright so we have the milk image in place next will be another icon button like that so the icon will be icons.right arrow this time container style it goes to margin right will be negative 15 width will be 25 height will be 25 as well border radius equals to 3 and background color it goes to colors.white and the icon style equals to width will be 15 height will be 15 as well and tint color equals to black [Music] same thing we are going to work on the arm press later oops sorry a bit of typo over here should be margin right perfect and next we need to render the type of the milk underneath the image right so over here we need a text component like that and we will render dummy data dot milk list again same thing i'm going to code it to 0 for now dot name give it some styling margin top it goes to sizes.base and the color will be colors.white and font will be bodytree sweet now what i am going to do next is that i would like to replace this hardcoded index with a state all right so over here constant selected milk index set selected milk index will be equals to react.ustate and the initial value is zero and now underneath the use effect hook i am going to create a function called milk button handler it will take a parameter called action okay and this function will be called whenever the icon button is being pressed so now if the action equals to next and the selected milk index is less than dummy data dot milk list dot length -1 then we are going to set selected milk index equals to selected mute index plus one else if the action equals to previous and selected mute index is more than zero then we are going to set the selected mute index to selected mute index minus one like that and now we can then head back to the milk section all right over here milk section and for the icon button whenever i click on it since this one is the left arrow which means previous the arm press should be mute button handler previous right and i'm going to copy and paste it over here just that this time the parameter should be next and of course we need to replace the hard coded index to selected mill index same goes for the text component as well save it and now we should be able to change the milk perfect all right now after the milk section next we'll be working on the sweetness and eyes section all right just want to make sure it's correct and now for the sweetness and eye section we are going to render a container view as well give it some styling the flux should be equals to 1 and within the container view we are going to render sweetness and ice so for sweetness we are going to render a container view as well give it some styling flux equals to 1 justify content equals to center and padding horizontal equals to sizes dot padding and now within this view the first thing we need to render is the text component so text and here it will be sweetness give it some styling text align should be center color equals to add team dot header color and the fonts will be fonts.h2 just that i would like to overwrite the font size to 20. save it alright so the text component is in place next we need to render this part over here which basically consists of two icon buttons on the side and also a text component in the middle all right so underneath the text component we need a container view give it some styling flex direction equals to row align items equals to center justify content equals to center as well height will be 60 and border radius equals to 15 background color equals to colors.primary and within this view we are going to render the icon button icon will be icons dot left arrow container style equals to margin left will be negative eight width will be 25 height will be 25 as well border radius equals to 3 background color equals to colors.white and the icon style equals to width will be 15 height will be 15 as well and 10 color will be colors.black and we will work on the unpressed later on alright save it so after the icon button next we are going to render a container view like this give it some styling flex equals to one align items equals to center and justify content equals to center as well and within this view we are going to render a text component and for now i'm just gonna hard code it to 50 give it some styling color equals to white and fonts equals to h3 save it all right and lastly we need one more icon button over here icon equals to icons.right arrow container style equals to margin right will be negative at with equals to 25 height equals to 25 as well both the radius equals to 3 background color equals to colors.white and the icon style equals to width will be 15 height will be 15 as well and 10th color will be colors.black and same thing we are going to work on the unpressed shortly save it all right next we are going to create a state to keep track of the sweetness level okay so scroll to the top and over here constant selected sweetness level set selected sweetness level and the initial value is going to be 50 and now underneath the milk button handler i'm going to create another function called sweetness level button handler same thing it's going to take in the action as parameter as well and if the action equals to plus and the selected sweetness level is less than 100 then i am going to set the selected sweetness level like that to select the sweetness level plus 25 else if the action equals to minus and the selected sweetness level is more than zero then i'm going to set the selected sweetness level to selected sweetness level minus 25 like that now go back to the sweetness section over here and for the arm press whenever click on the left button we are going to call the sweetness level button handler and we will pass in the minus sign like that i'm going to copy this and paste it over here just that this time it's going to be plus and of course we need to change this to selected sweetness level save it and now we should be able to customize it perfect all right we are almost there the last section that we'll be working on is the eyes section and since it's more or less the same as the sweetness section i'm gonna just copy this whole thing let me see okay i'm gonna just copy this whole thing like this and paste it over here now try to save it okay and we need to change the sweetness to ice like that and of course we need to change the state as well instead of selected sweetness level we are going to change it to selected eyes level and we will create the state over here [Music] so constant selected eyes level set selected eyes level it goes to v8 dot u state and the initial value equals to 50 as well and for the button handler i am going to copy this function over here and change it to eyes level button handler and if the action equals to plus then the selected ice level sorry i mean if the action equals to plus and the selected ice level is less than 100 then the set selected ice level should be selected eyes level plus 25 else if the action equals to minus then the selected ice level sorry and the selected ice level is more than zero then the set selected ice level will be selected ice level minus 25 all right save it and all we need to do is to head over to the i section over here and replace it with this function ice level button handler same thing goes to this one over here now save it and we should be able to customize the ice level we should be able to customize the sweetness level the type of milk and also the size of the cup and i think this is it let me just play around with it a little bit alright guys we have finally completed this very cute looking boba milk p app based on the design created by ansley on marketapp.wondershare.com now if you like to support our work or if you are in a hurry the full source code for this project is available for just a few dollars on sharp.buyprogrammers.com and i have included the link in the description below if not that's totally fine as you can still achieve the same result by getting the starter template for this project and follow along the video so if you like the video we'll be more than happy if you can give it a thumbs up comment share it to your friends and also don't forget to subscribe to our channel for more videos like this i will see you guys in the next video happy coding peace

Channel: ByProgrammers

Views: 15,519

Keywords: react native, react native tutorial, react native ui, react native project, byprogrammers, byprogrammers react native, react native app, app development, react native animation, react native animation transition, react native animation tutorial, reactjs, react, animated flatlist, swipe card, react redux, react redux tutorial, react redux project, react redux connect, react redux thunk, react native dark and light theme, dark mode, night mode, ecommerce app

Id: uEoA9Gf0LiE

Length: 164min 31sec (9871 seconds)

Published: Wed Apr 21 2021