Deliveroo Food Ordering Clone with React Native (Expo Router, Zustand, Reanimated, Google API)

light has built a full-blown food-ordering UI clone with react native using the latest packages of Expo router to stand for State Management reanimated for animations and even include Google API [Music] hey everyone what's up this is Simon from galaxies.dev and in today's video we're gonna have a huge build of a react native cologne application we're gonna try and clone the deliveroo food delivering application and we're gonna have 10 different sections that I want to quickly walk you through before we get into the code of this build you will also find the code linked Below on galaxies.f which is my platform to help you learn react native and then you're gonna also find the asset bundle that we need for our build so the first step is we're gonna build a cool header component in our application this is the part up here we're gonna have this custom setup of a react native header the second part is then integrating a bottom sheet which appears once we click on one of the elements up here in our header third part is integrating a modal which opens up if we click a different button here in our header to Define these settings on this page we will use some cool checkbox behavior and additionally come up with this cool animation which is using reanimated it to make that button appear as it expands and then closes back once we're done with that model we're gonna get back into our initial model and Implement a cool Google Maps view including a search for locations that is really working with the actual Google API and focuses on our map wherever our user selects a place when we are done with that we're gonna Implement our page up here which has these cool horizontal scrollers and the cards which display just like this based on some dummy Json data after the home page is done we're gonna get into the details page of a restaurant where we kick it off by implementing this cool Parallax header up here and the animation that comes up once we scroll that page after that animation and work on the header we're gonna Implement a section list which displays the menu as we can see it based on different sections in our view including different setup with borders and different components at that point we're going to also Implement these cool sticky segments up here which by the way only come up once we scroll roll that page to a certain degree and which also Focus one of the elements whenever we click them to actually add items to our card we're going to implement this model with additional animations from reanimated to make the images fade in and the different text elements as well we will then wrap it up by actually using a state Management in our application which allows us to add elements keep a card of items and then view the basket where we also add a cool swipe to delete and finally we'll be able to finish our order with a nice little confetti animation so if you're ready to take your react native skill to the next level follow me in this build make sure you subscribe to this Channel and also check out galaxies.dev where I have in-depth courses on helping you with specific problems to become a great react native developer but now without further Ado let's dive into our food delivery clone thank you all right let's start our application by using the create Expo command so simply run npx create Expo app at latest which means we're going to use the latest version of the Expo SDK we give our application a name I called my deliveroo clone and we're also going to use a little template so you can run this and get the list of templates but we will simply pick the tabs layout as this will give us the Expo router version 2 and a file based routing which came with Expo version 49 included so once you get that you can bring up your project your favorite IDE I'm using visual studio code and we can immediately get started by running npx Expo which will then bring up the preview of our application you can scan this QR code with your device if you have the Expo go Application installed on Android and iOS you can preview your app there or you can just press I for the iOS simulator a for Android or even W for the web but later on we're going to use native components so the web will not work great in this example anymore so I'm going with the iOS simulator I have it here to my site and it comes up with the default view of that initial tabs template before we write any code let's quickly check out what we got in this initial setup so we got a bunch of files here for our typescript configuration the package.json with all the packages installed we got the Metro config for bundling our app um we got the Expo environment we actually will create our own environment this app Json file is also an information for Expo how to build our app in the manage workflow and then we come to the actual files So within app we're gonna have the actual app and the different routes don't worry about this we're going to remove a lot of this and simplify the application right now this is actually a tabs application including a little modal but we're going to build something more epic anyway we have an assets folder in which we can already place the assets that you can download below this video um it's just some dummy data that we're going to use in our application and then we also have a components folder we won't really use the components that are initially in here so we can actually start by removing a lot of stuff so let's remove pretty much all of this and also the test folder uh can we just delete this uh yeah I want to delete this oh I can just delete the whole folder and create it when I need it we got the constants folder that one's actually okay uh and we can quickly add a few colors down here so uh we're gonna Define like a primary color a light gray a gray a medium background and a green background so I took those from the official delivery application um and then we're gonna reuse them in our application that will make it a lot easier in our Pages too stick to this color theme now additionally I want to get rid of the tips folder I want to get rid of missing HTM actually a model as well I want to pretty much remove everything but to use the file based routing we're gonna at least need an index file so let's create an index.tsx and within I'm going to use a little snippet I'm going to run rnfe which stands for react native functional export component so then it selects this name and I can just give it a name like uh index or page or whatever you prefer additionally we need to fix the layout file so in the layout file this defines the actual UI for our application with the Expo router and we're going to remove a bunch of things so we don't really need this first part here we can keep this but I want to set this to index because index is my initial route name I don't really need all this stuff here um yeah really we don't need that we're just gonna keep the root layout but I'm going to say export default function root layout we're going to get rid of the color scheme and the theme provider to really simplify our app as good as possible we don't have a model anymore and the only deck screen we have is an index file and I will actually um remove the header shown false so now we have simplified this in a great way uh We've removed all the code from Expo that we don't really need and we can just build out our own application based on this let's check uh no no such file let's try and just hit R for reload if you get stuck that's usually a good way to get unstuck so now we can see I have just this index page which shows page in here and that's the content we had in our index.tsx so at this point we have a blank application and we can just get started the first thing we're gonna do in our application is let's take a look at what they did in the official app so we have this list uh that means we do have an area right here which is pretty much the main page so let me keep this this is the main page so we got like Sliders in here and here here and we're going to get to that later what we want to focus on right now is actually this top part here because this is like a custom header you see creating this with a default react navigation is somewhat complicated so we're gonna do this on our own that means we're gonna have to take care of a few things so first of all we have like two rows we have this row up here with some information uh and then we have this search bar row with an additional button at the end that's what we want to focus on so additionally to this we have some click events uh if you click on like uh the driver here or select location it will bring up a little bottom sheet if we click on this item here we're going to open a model with some filters so there's a lot going on and we can't really do this um in let's say an easy way with react navigation so we're going to create our own custom header now let's get started with that by creating a new folder at the top level so I should have kept I can't just do like I just want to do a new file in here please let me do a new file visual studio uh why can't I do like a new folder I'm going to call this one here components and I'm just going to copy this up to the top level you just need to know how it works so then go ahead with a custom header.tsx and we're going to call this custom header I should made that in a better way I'm sorry I messed that one up so here we go this is our custom header component also make sure that you of course name it correctly now how can we use that custom header component we just go back to our app and within the layout file we can now find the place where we Define our first page this is the first page of our stick so we're using the simple stack navigation from Expo router which is under the hood using react navigation which allows us like to just push Pages onto the stick and what we want to do is we want to Define some options here so I want to Define options um there's a bunch a bunch of things like we could say this is home and then it changes up here to home you could Supply buttons to the left and the right but as I said this is limited and we can't really have like a custom experience so what we want to do is we want to supply a completely custom header in here and we do this by saying please render our custom header instead in this place um now our header doesn't really look great so we're going to work on that and I also want to use one of the latest features which are the Alias path in here I don't know why but I think yeah they didn't include it in this package anymore so what I want to do is I want to set up in my ts config a pair so everything that's under the top level so top level selection then everything else as you can see here will be available with ADD slash and then that name maybe that sounds confusing but let me show you in reality how this works We additionally should set in our app Json under experiments not only type routes but also TS config path to true and once we do this and we have the TS config setting we can change this to Ed and it just makes it a lot easier later when we are like a few levels down in our application um to get the right components in the right places okay now we can finally get started with our header as we can see it's behind this top area so in order to prevent that I'm going to use the save area view which should come from react native and I want to make sure that it spans across the whole page so I will set Flex to one which means it takes up the entire space and we see it already moved down the page here so we respect that area once again in this application if you want to clearly see what's going on you can always of course set a background color so if we set this to Red we would see that this is now in the safe area up there however I usually want to use white in here now within the save area view we can then begin and we want to start by creating something let's try this out um this is just something that um that yeah that definitely doesn't work um so I want to set the my custom hate in here so therefore we're gonna Define some Styles we're not using any specific styling Library I will just use the react native style sheet and call create to Define my own Styles basically like we were using CSS so this container should have a specific heat actually I'm going to give this a heat of 60 and I will give it a background color for now of red so we see what's going on and then I want to make sure that I close this correctly and also import the style sheet from react native now we can easily access this because I don't really like to put all my Styles in here so instead of having it like this we can now say Styles dot container and we see our style is applied in here we could also do this for the safe area view if you want to be really strict save area so within that save area we're going to use flex 1 and background uh White and then we would refactor this as well into Styles dot save area um sorry oh yeah I missed the comma so here is our custom header um we're pretty close to the final result already uh not really uh and we're first of all gonna focus on the area up here so that first row with the icons the text and whatnot and then we're gonna uh later add the actual um search bar below this so this is our container and I'm gonna wrap the first item that I want to show into a touchable opacity so attachable opacity can be used for stuff like buttons and a Perpetual opacity has an on press Handler so you can supply a function that will be called when this is called and what I want to have inside is an image so the image element comes from react native as well and we're gonna set the source just like this actually because we don't really call a function yet I'm gonna remove that for a second but this is what we want to do so the problem is with react native we can't just say hey please use this local asset that is lying here we have to use it in this require way as the code runs in this compiled and it just can't work with a local URL you can load an image from a web URL with an HTTP request but not like this so I'm going to put the bike into the images folder that's one of the assets of the assets bundle but of course you could also use whatever else you want and now within the require I'm going to say this will be at assets so again I can use the path Alias images and under images we should have a bike.png most likely this won't work and I either have to reload or completely stop my server because I added a new file and usually Expo is mad with me if I don't if I do it like that so I'm going to close this for now and press I again to make sure that my live reload works correctly again and then we see we could not find the file so that we uh yeah I should probably call this one bike that makes more sense right uh so stuff like that can happen be sure to completely read your error messages in case you make mistakes like I do okay um let's do another one I'm gonna call this one just bike and I want to specifically set the width of this to 30 and the 8 to 30 as well gonna apply the style in here just like we did before and then we have a little smaller image in here also we already see that within the container my items are not really aligned in the center so in our red container here let's say we want to justify uh no we don't want to one justify I want to align the items in the center um and I want to justify the content with base between so that would put some space between our items maybe I comment this out for now um and usually if we use react native we're using a column layout so that means if we're using a column layout every item that we place will be put in each other that is somewhat okay but in our case we have this icon we have the text so what we want to use instead is a row layout which means I have item one in the row I have some text in the row and then I have something else in that row so that is a row layout therefore we're going to change the container and say please use the flex Direction row instead good um that means I can put something else next to my touchable opacity so actually I'm going to wrap the other stuff in a touchable opacity as well um so I could put let's say just for testing I'm going to put in home here and then we would see if I close this correctly and thanks for doing this one more time it shows next to it not below it however uh this is going to be something else let's call this uh the title container because this is this part so so let's call this title container down here and for the title container I want to make sure that it spins up as much space as possible therefore I will later give this a flex of one and we can also say for our container please use a gap of 20. a gap is used between the items of the flex layout so we see it put this little gap between those items in our example we also need a button right here so we can add that third Button as well that's going to be attachable opacity again and this will be something called the profile button profile button okay going to be an empty styling object for now I'm going to add the Styles here so style styles dot profile button okay the profile button does not really have any styling yet and what I want to display is simply an icon and we can use the ionic on so the export Vector icons are pretty cool you can use them if you want to and I want to use the person outline you can just look up all the available uh elements but this one should be available uh uh what's your problem import ionic guns from Expo Vector icons uh we might have to set the size first so I'm going to set this to a size of 20 and for the color I want to use my predefined color so we should be able to import our colors object from uh when we have before and I want to use the color um primary okay ionic guns why are you mad because there's no closing Tech most likely so let's self-close this and there we go so now we have this up here um so I want to now get rid of my red background color for debugging and really see what's going on so I want to give this row actually a background color of white that's what we see in the default as well so here we go looks better now let's try and align our items in the center of that row so they're right here that looks better additionally I want to now use my space between which would assign these items with space between equally between the objects additionally we see on the outside we could use a bit more space there so let's use padding horizontal and set this to 20 which brings both items a bit closer uh here to our view now for the title container I said it should take up the whole space but it's also centering the items right now so I'm gonna give this a fly X of one actually I think we don't need the flex one for my title container as it's oh yeah we haven't used the title container that makes sense so let's do you see the difference if we assign the title container here now uh styles styles dot title container and then I put the flex to one it shows up here and aligns the item to the left which makes a bit more sense cool now um we need to display the actual title in their title container so let's add another text in here we have this one I'm going with another style here so styles.title we can't just apply the text styling to the touchable opacity it's not like we're using scss or something so we're going to have to do our own title element in here I'm doing something like let's say font size 14 and then we make sure that we have the camera in here and additionally I want to use a bit different color so once again we can make um so this is color we can make use of our colors object I don't want to really use primary I want to use medium in this case so we have this light gray text which should be delivery now so you can use this hide dot I think this is what it's called instead of home we're using delivery now cool that's a good start I think our row starts to look really good uh we might have one issue as the icon up here needs to have a gray background but I think we can fix that real quickly so we do have the profile button um so let's set for the profile button the background to something uh background color should be set to Colors dot light gray I think that should look good yeah it's a slight change you can't really see it a lot also it's too narrow so we definitely want to do something like a padding here as well let's give this a padding of 10. oh yeah that makes it uh so yeah we want to make it a circle of course so let's give it a border radius as well and now we have that rounded button that we can click that looks good we can click that as well we can click that as well cool now below the delivery now we got another row of selected location and this icon and once again if you want to do it like that we should do a simple Flex layout and if you don't want to do an object all the time just set Flex Direction in here to row so that should be fine in this case as well I don't know what copilot gives me but uh rope but yeah that's pretty much how it should look like so I'm gonna set this to London or it could also be Berlin although in Germany actually we don't have it anymore and I want to call this one subtitle so let's go here let's put subtitle in it and for the subtitle I want to use a bit bigger font size so something like I think 18 should be enough yeah 18 uh we use black and I want to use the font weight bold I think we're getting pretty close to what we want to see you see how this custom header comes together and I hope it makes sense for you now I only want to change this icon here I think Chevron down is good we don't really need to use outline though so it can be a bit bigger um size 20 is cool color should be primary so we have it like this and do we need a bit more space between or how did it look in the original um well it's just longer the attack is just longer but overall it's the same the only thing that might be good is to align the items in the center uh it's a it's a small change but I think it's it's good um I think it should be it's not justified I usually get confused with both justify and align yeah but just if I putting it like this so we only need to align the items in the center and coming to think let's refactor this and let's have everything down there I think that looks just better so let's just cut this out call it however you want um I don't know it's like a location name that's the closest thing I I think that's right uh location name and then I want to put in my object and a comma and then we have separated everything nicely so this is the start of our header we're gonna assign the different actions to the touchable opacity later on for now this is all we need we can click this part we can click that part and we could even click that part now if we check out the official uh design here we're gonna see that we've covered this part but now it's time to cover this part as well so I want to display this as well in our custom header and therefore I'm just adding a new object a new component up here I'm going to call this one the search bar so you can just do this we don't need to pass any props to this component actually we don't even need to make this an object we can simply have the rounded brackets if we just return a view so let's use uh something like style styles dot search container close this and make sure yeah we have no spelling issues and then we need to go down here and for the search container I want to set the search container hate to 60 as well so I'm going to hit save and then we can simply add this let's add this after the view so I'm calling the search bar in here and then we should see our search bar right here below the container we don't see it yet let's try and give it a background color of red for the beginning again ah nice there it is so here is the search bar I'm going back to the white container uh in fact I don't know if we're going to use white or something else but let's stick with it okay um we're gonna have different elements in here so we're gonna have um search section so let's put this in our view we're going up here to our search bar and then I'm gonna put in another view so this search container I will just have the right View and with the search section we're going to wrap the actual elements this is not exactly what I want so let's call this search section we're going to fix that problem in a second uh for now let's add another view so we just get an idea of the basic UI so what we want to put in first is of course the search field so let's give this also a name here that we can then reuse and within the search field we want to have an icon and a text input and towards the end we're gonna have this additional button um so let's put this right afterwards we're gonna actually wrap this now in the Expo router link component which is pretty cool so you can give this an href to a specific page of your application I hope it's not mad yeah it is mad if I use an empty object um and let's say we just open slash then it should be fine this is the cool thing it's using typed routes so it's actually checking which route exist in our app folder and right now we only have the index route because we're just wrapping this around a touchable opacity we're gonna have to use as child as well so now it will just not really add anything only the routing functionality to this touchable opacity that ionicon will actually be options outline and I'm going to give it the option button styling so now we got these three styles that we have to implement so let's put them into our style sheet I just copied them so I don't forget about the names we had the search section we have the search field and we had the option button right so with that in place we already see our option button the option button by the way it's pretty much the same like the one up there is it not aligned like in the official this is not aligned I think a crazy I think it also has no background so we can just say like uh padding 10 and the Border radius uh does it actually have like something I mean I think this looks good here for clicking uh in the official app I can't really see if it has a background I don't think so so our search section which is the part before here which has no element yet uh let's give it an element So within the search field part we of course need a text input we can say placeholder search yeah so once again we have the same problem we now have that input but we're using by default a column layout for our search section so we want to change that let's go into the search section and set please use flex Direction row which puts everything next to each other additionally we want to have a gap between the elements maybe 10 in this case is enough I think this should be fine also this search section should take up most of the space so I'm telling it um okay yeah the search container actually now in the search container is around it then we have the search section which is basically everything and then we have the search field the other search field should actually take a flex of one yeah that puts our item towards the end that makes sense search section once again padding horizontal just like we had before to make sure that the items are nicely aligned yes that looks a lot better we have the alignment as well so align item Center that puts it into the center of this search row and I don't know if we need the background color but for now let's keep it like it is so the search field will get a nice little background color it will get light gray and then we can finally see that yeah there is actually a search field now but I want to give this a nice little border radius probably not 50. that's a bit too much co-pilot uh bought a radius of 8 should be just fine additionally I also want to include an icon now in the search field so if you look up here that's a pretty common thing to have this icon in the front and also of course we can change the default placeholder so I want to call this one restaurants groceries dishes all right that should be fine also that text input should get some styling so let's call this Styles dot input and I'm going to put the input styling somewhere here uh Cape good so for that input we now see that this phase is definitely too small so I'm going ahead with a padding of 10 but I think yeah it actually looks pretty good um this is also using black I want to use a different color so I'm going to set my color here to um how does medium look like uh that's two or no I think let's see I think I had another like medium dark value I think this should be this is a bit darker yeah let's use medium dark yeah sometimes we need to play around a bit with those values okay let's hit save everywhere and yes that's a nice medium color I think our header is coming together really nicely I don't know about you but I know definitely also want to have in search icon so let's already add some styling for a search icon and we're just going to place that search icon in front of our text input so within this search field I'm going to add my search icon and it should use the I don't know search outline yeah well we could also use something like iOS search yeah that's a bit bigger size 20 is cool colors should be just medium so then it Blends more nicely with our placeholder however for the search icon we now see that again we have the same problem with that search field it's using a column Flex layout so I'm going with flex Direction row and again items are not aligned so align items Center that looks better um and for the search icon I might want to give it just a bit of padding so let's just say padding 10. that's actually a lot maybe just padding of four or padding just padding horizontal um I don't know it should be just petting left I think we should just use padding left in this case because to the right it already has enough padding yeah that looks pink good job with that header if we compare it to this one it looks really really nice um I don't really see a big difference maybe they use some different colors here and there but overall we have the click functionality to all of these items we have an input here we're not really using the input here but it's pretty easy to just assign a state to the text input and react to the changes and actually we can use the text input not from real native gesture Handler but just from react native that's fine as well um that means we have finished the first section and now it's time to talk about the different actions that we have to assign like the filter here or the bottom sheet model that should appear here okay in this part we are now going to implement a bottom sheet model so if we click in our application somewhere up here a bottom sheet model should open that looks like this so nothing really fancy um this is a standard bottom sheet model uh that is triggered by an action the problem is how we set this up with react native because there's no built-in component for this so we have to get a bit creative and use a package called react native bottom sheet this is actually uh one of those packages that is like used by most of the community to create bottom sheets that look just like this the only problem is that we have a somewhat complicated setup as we click here in the header component and we're going to display it at the bottom so we have to wrap it in a component and pass around some references which makes it a bit more challenging to set it up nonetheless we can get started by first of all installing it that's pretty easy um so let's do this bring up our terminal again and then we're going to install the gore home bottom sheet additionally we need to install will Expo react native reanimated which we will also use later for some cool animations and the react native gesture Handler so this will hopefully set this up correctly in our application I just want to make sure by checking our Babel config that yeah it wasn't included that's what I thought so under plugins we want to add the react native reanimated plugin here and as I've changed this now I assume that I have to refresh my application as well additionally we can also get into our layout file so this is the file that is usually like the FTS X that is always called initially where your app is bootstrapped but with a file based routing it's a bit different we only have this top layout file that we can use for that however what we want to do is we want to wrap our whole application into a bottom sheet model provider no I wanted to do this one here um as we need to call it from different components and therefore we're going to wrap this first of all around our app again I'm going to yeah we already see this I forgot to add reanimated that's a good issue here so I'm starting npx Expo again going with I4 iOS and then I usually it messes up the live reload so I want to open it again and make sure we're connected correctly with live reload and if the error is gone oh did you did you forget to reanimated Babel plugin in the baby no I actually did um this is good that it happened right now because I think sometimes especially here with reanimated we have to pass dash dash clear um to our export command is that will clear our cache of any other builds so hopefully at this point it should open it might take a second longer to build but usually that should get rid of the issue there we go okay we got the bottom sheet provider let's create a new component that we call bottom sheet so bottom sheet dot TSX goes into our components folder and I'm once again using the tiny little helper to create this initial component it's going to be called bottom sheet and it returns something it will actually return a bottom sheet modal um and this will require us to implement some functionality I don't know if there's like some default stuff that we could probably just add um yeah it's missing snap point so that's the first thing we're gonna have to Define up until where in our view this snaps and we can define those snap points up here and we're going to use use memo to memorize the value as this is not going to change and we can just save a bit of the performance in our application by wrapping it like this in our case we will actually have only one breakpoint I'm gonna add this at 50 percent um then we have an empty dependencies array and then we can pass the snap points to is it snap points yeah there we go um okay I assume so yeah something else is missing uh property children is missing uh so I think we don't have anything in it yet right so let's just put in a view um and the text bottom sheet and finish the view okay so it looks good so we have the default implementation of the bottom sheet now we want to call this from our custom header and as I said this is going to be somewhat more complicated so I want to add the bottom sheet model now in my save area view here so I'm going to add the bottom sheet just like this first of all I think this won't really change anything now we want to of course toggle this bottom sheet or display it on click of a specific button or area so that means we need a new function I'm going to call this open model and this will do something uh yeah we can log open mode actually we're going to add this to the first touchable opacity so on press we are going to call open modal and we're doing the same for the second touchable opacity as those both should just open it okay cool now this should of course lock the value but we don't really want to just lock this now we need to create a reference and pass this to our bottom sheet to actually use it in the right way so we are now creating a reference we call this bottom sheet ref and we use use ref for that from react we use the type bottom sheet model which comes from the Gorham bottom sheet model and now we can pass this ref to our bottom sheet model so it will then later be correctly assigned and displayed now we should see a new issue or warning function components cannot be given references attempt to this will fail did you mean to use react forward ref and that is a nice warning and tells us exactly what we need to do so our bottom sheet now needs to be wrapped in a forward wrap that's just a specific reacting because it's otherwise not working with functional components as we use them here so we are wrapping this now with forward brev we're going to make some brackets around our bottom sheet and to the forward wrap we get access to props that are usually passed to something and the actual ref and normally typescript will complain about something so we can create our own type in here and call this ref and this will be the bottom sheet modal type I'm going to add this as the type for forward ref in here so now we have the ref with the right type and this ref is now assigned to the bottom sheet using rough and hit save and then we save in all the places um let's see gonna reload yes that looks good so what happens if I click here we can't see the modal yet um there are a few settings that we might have to add to the bottom sheet model in K uh to actually display it or oh we're still not using it yeah that's a good point um so let's change that one so instead of just logging something we're now going you use the current reference and called present on the bottom sheet model and I hope yes there we go my head is probably covering this so This section let me put this to the other side so we're quickly swapping things around in here um and then we can see I can also close this here and we now see that we got this nice bottom sheet working and it's already 50 of the way to it so if you have some coffee grab it take a sip um you know that was actually a lot easier than I initially did it you don't want to see how I initially implemented this okay um we got the bottom sheet we can display with passing the reference um we probably need a function to dismiss it because we right now can only pull it down uh and we need to put some items into it we don't need this view anymore uh but this is what we want to eventually Implement in that view just a few UI elements actually okay let's get to our bottom sheet and Implement and make sure that it looks like this so we also need some sort of backdrop we don't really want to have these rounded borders so you see here is a rounded border this is actually just straight we don't want the notch so there are a few changes we have to apply that's not going to be a big issue for us let's get into this I'm going to put this here and the first thing I want to add is that I actually want to disable this because in the actual app this is not working so you can set the over direct resistance factor to something like zero and if you set it to zero you see there's no more over dragging possible I also said we want to have a backdrop component so for the background component you can just Supply whatever component you want to have so we can just call One Call this render backdrop um and this will return a function so I'm going to use use callback which gives us a bit better performance as it will use and memorize the value here again if it is a function so that's basically the same like use memo to use callback is usually used for functions um we can now use I think the bottom sheet backdrop and to initialize this we need to pass some props to it um let's see I will just use any for now in here and we can pass the props with a spread operator can we put this to two lines please uh yeah that's perfect line break thank you for that this is the bottom sheet backdrop and we need to tell in which cases this bottom sheet backdrop appears and we also need to assign it to the actual component here so let's see if I bring this up there's not really a big change as we think having or can't see it yet so within my bottom back let me just do it in another line what I want to say is I wanna appear on index and disappear on index that's what I want to set so it appears on index 0 so in our first breakpoint it should appear and should disappear on index -1 and now we see it appears on our first breakpoint which is that 50 of the view and it disappears when it's gone so minus one maybe we could just also um no we need to use minus one otherwise it won't work but nice we could also of course customize the back rub but I'm not really interested in that right now we also need a button to close this so let's get that by using the hook that's actually pretty cool so we can call the use bottom sheet model hook here and destructure it to use the dismiss function I could now simply add a button in here from react native that onpress calls our dismiss function we usually need to do it like this now and let's see I open it and it dismisses so we have the basic functionality and we even have a nice backdrop uh which automatically uh dismisses our um uh our backdrop no our model now we can finally implement the real uh view so just as a reminder where is my preview here it is uh we have the dark background so we now just need these two buttons up here um this will actually toggle another screen or open another stream and confirm will also be just our dismiss functionality so maybe we're going to just start by that and use a touchable opacity from the bottom sheet no not really not really and the bottom sheet on press will call the dismiss one I'm going to give it text confirm and then we need to wrap this in some cool styling so once again we create our styles using style sheet from react native dot create and let's say this is the button text so the button text should have something like color white we can use the hex value and for the button text font weight of bold yeah maybe bold and then we need to close all the brackets and at this style equals Styles dot uh button text of course not stats so now we have it uh we still need oh we need the background for our touchable opacity so let's use Styles dot button this is going to be our well let's call it generic button styling um this is interesting as we're going to use for the background color our primary color and make it wrap across the whole um rope so with this it already looks pretty good but of course I want to have some padding I think 20 is too much we're going with 16 yeah that looks good um we also want to have a little border radius uh of four to make it rounded and of course we need margin to the sides as well if we actually want to see those around it so that looks already better and align the items in the center align items Center puts the confirm in the middle now if we implement the other stuff the button will automatically be at the bottom so we don't really have to care about that too much right now but what I want to care about is actually the uh background color of my bottom sheet um and I think we can set this right here I think we can set the background style to something okay let's see what this results oh that gives us a pretty dark one no I don't want to have that I want to use my colors.light gray instead so that's a nicer green and also I want to get rid of the Border radius as said initially so I'm going to set the Border radius here back to zero and that gets us rid of all of these things I think that already looks like a nice bottom sheet so you see it's pretty easy to customize it I also don't want to show this little notch or indicator or whatever I think they call it so handle indicator Style um I'm just going to tell this one display none that should most likely hide it right yeah now it's gone perfect um The View should use something like a Content container so let's put in some view this will use flex one and we are assigning it here as the style so now we should take up the whole Space of the bottom sheet with our custom view in here the first part is going to be these toggles so the two little toggles um delivery and pick up we won't make them um we won't make them toggable but we're going to assign the different styles anyway and you're gonna see that it would be pretty easy to switch out the styling afterwards so we're gonna wrap this in a view I'm going to use Styles dot toggle and we will most likely have more styling so we're going to have um a toggle active and toggle active and we're going to have a toggle in active exactly that's what we're gonna use now for the toggle you can imagine that those should be used the flex Direction row again so we can already set this to flex Direction row and we're gonna have these like two buttons inside I'm just going to make the first one uh yeah that could be attachable opacity it actually doesn't matter if it's a touchable opacity or not uh so let's close it the first one will be delivery the second one will be touchable opacity using the inactive one and the text pickup nice you figure that one out pretty well um additionally in my toggle I want to align them in the center so there we go I want to put a little gap between them so let's do this here we have a gap and I want to have some margin to the bottom of I don't know 20 or maybe a bit more I think in the official way there quite a lot of space here so now we just need for the active and the inactive the correct styling and the active one had a primary background and I think let's see yeah pretty much like this um it should most likely also have like a white text right but for that we probably uh need something else yeah we can just let's just do it in here I don't want to do another one like um oh wait let's do it okay you want to do clean yeah you want to clean okay it's okay it's okay active text I'm with you I'm with you of course it's better if we put everything in here so toggle active then we have the active text should use a white color and some bigger font weight we don't always have to use bold by the way we can also use a number instead so now uh that looks okay but the toggle active of course needs more padding so let's go with a padding of eight here and then of course we also need a border radius I think four won't do it I think we need really something heavy here yeah to make it like a pill um and I will try and use a width in here I don't know if this works but let's set a width of 100 yeah then we have like this fixed side we could also have like margin can we use just padding horizontal uh like 30 yeah that would pretty much give us the same result I mean that looks good as well I really like it um I feel like our toggle uh is using justifiers Center something is not centered here my pickup is not really centered right uh so for the toggle inactive we kind of want to use the same uh only that for pick up we have a background color of just like nothing and the text for that is the primary color so active text this is the inactive text and I will use our primary color so it's pretty nice that we defined those in the beginning we can just reuse our colors it's really a good pattern and make sure that like if you really want to change it at some point you just have to change it in one place uh actually for the inactive text I don't want to have this to use like a font of 700 I mean you could use something but not like that okay this looks pretty good what is the gap of our toggle I feel that's too much yeah uh that should be fine so now if you click it you could easily toggle between them uh with a bit of additional code but we're gonna now focus on the rest of this view so then in the screenshot we had your location followed by a little item and then pretty much the same again here so let's add first of all a text element and we call this your location okay this of course needs some styling so Styles Dot subheader I think this is the right term for this let's copy this and let's find the sub header I'm just going to add it down here and for the sub header we're going to use a font size of 16 and well then we want to really use bold or let's try like 600 is like semi semi bold and some margin I think we usually use 16. yeah that makes it look good we can of course already add the second one if we want to so that was arrival time uh here we go and then we just need to put the items in between now they will actually also be wrapped with a link component from the Expo router again as they will toggle something so this one right here will eventually toggle our location search I don't really have that page yet so I will just use it like this and then close the component already so I don't forget about it I'm going to put a touchable opacity in we don't need an unpressed event as the link will handle all of that but what we need is to create this sort of item-like view so there's no real component again for this in react native that we can use out of the box but we're going to make that work anyway um maybe we're just gonna put it here for a second so then we can switch between the preview and it's actually a good idea I should have made up that one before so let's put in a view into that touchable opacity um yeah that one that view will use some styling how do we want to call that like item yeah that's probably item and for that item we're gonna use a flex Direction row again Flex Direction row we also want to have a gap between the items here and we need an icon a text and another icon that's that's pretty much the setup for this row um so what did I say I have a text the text should be that actually doesn't need a lot and the text should basically just span across this and use everything so current location would be the text I'm going to put an ionicon in front of it that could just be location outline size 20 colors probably not primary electrically use medium and then we're going to have another icon towards the end which would be the Chevron forward Chevron forward and that should actually use the primary color so we see we get that and if we now want to align this uh we got different options as we've used before for the item so first of all I want to align my items in the center um align items Center so that move the current location tiny bit down uh I want to use a slightly different background color here so I'm going to use a white color you see um maybe I'm going to do this with red for the second so then we can see it a bit better now we will simply make sure that the current location is taking up actually most space and we can do this by simply giving that item a flex of one and then we'll just expand to the full available space here we go flex one and it's taking up the space now we're just going to change this and where was that uh yeah where we use red and we're of course going to use white instead and I don't know then we have like a border or is this fine um there's probably a tiny boredom so I don't know uh do we want to put this where would we put this I think we would put this under the item let's say we're going to give this a border color of light gray oh that's not this and this is here and then we will also have to set the border with I'm actually going to set this to medium um yeah that's probably too dark um bored uh let's just use border with then it's using top and bottom and then we can use something like gray yes I think that's perfect oh yeah I think we got it so we got this item and now we can simply replicate this uh we're not going to use another link here I mean we can I will just put this down here so this one should simply say now instead of current location it should not use the location outline but say a stopwatch outline and if we hit save we have our location now and we have the arrival time and I think with that we have finished our nice bottom sheet so we've integrated this with a different component and extracted the code for the bottom sheet into its own component so we can reuse it basically across every screen by using forward ref we might have a bit too much padding but I think actually our buttons look better on the official ones um we will later attach more functionality here as this will bring us to another screen but confirm already closes this and before we talk about this because we're going to need the Google API here and include some cool maps before we do that let's tackle another screen which is the filter up here now we are implementing a cool modal page that will allow us to select some filters this is what we want to do and this should happen once we click on this button up here so this button here this one should trigger a modal just like this okay I need to fix my arrows okay the cool thing is this is going to be pretty easy because we can use this directly with the Expo router we just have to set the type for this page and then we can implement it additionally we're going to get into creating some cool check boxes and afterwards we also have to add a little animation here to this section so this is going to be really really interesting let's get started by adding a new page I'm going to add a new group in here so we can do this with brackets this won't really change a lot but it just helps to like structure my application and we can group stuff together I'm going to call this one filter.tsx and I'm going to call this one filter now I will go back to the layout and within the layout we can now add a new screen so we're going ahead with stack dot screen the name for this is going to be the pairs to that file so with our file based routing it's under modal slash filter we don't need to add a component here that's actually all we need and now I could already call this from my custom header So within the custom header let's find the place this was here in the search bar so I'm going to add model slash filter and we actually get the route here and then we see this now pushes the page forward now this is not what I want to do what I want to do is I want to display this actually as a modal component so therefore we have to supply some options here again and within those options I want to say that the presentation of this page should be a model if I said this it immediately changes the presentation and we get this right out of the box so this is really really cool um I will also set my header title in here so I'm going to set this to filter instead and not have this like the default name of that route so now we have filter I don't want to have the header Shadow so I will call header Shadow visible false so that removes this little Shadow we had before In Here Also in this case the whole page is gray so we're gonna apply the same gray color to my header and we can create a header style here header style and for the header Style I want to not use a transparent background but instead go back to my colors file and select the light gray color um header style background light gray maybe this is already light gray and the page is not using light gray or we might have to reload let's check I can't completely see if this is light gray already or not but we're going to check this out soon um additionally I will add a header left component so I want to have a little X here to close this I mean we can swipe it down but usually you will still see this in applications that they have an additional button there for people who don't know you can swipe the page down so touchable opacity and goes in here from react native on press I want to go back we probably have to implement that in a second for now I don't really need the text let's directly go for an ionicon so ionicons name should be like close outline uh then we don't really have a text and we can close this in here I cannot find the name so at place at the import and now we should already see it yeah that's very small uh we of course need this a bit bigger so let's change the size of it to 28 and let's use the color primary okay so perfect uh looks pretty close to this we just need to make sure that once we got the background of this page that the background colors are aligned and then the close is actually closing this page so we can inject our navigation with a hook here so let's say cons navigation navigation equals yes navigation and that will allow us to easily access it I mean we could have also just wrapped it in a link component that wouldn't have made a big change um so now I'm just going to say navigation go back and with that in place we can click it and we would just move back so we already have two cool things in our app we have a modal and we have a bottom sheet model uh so that's pretty nice now let's continue with our filter page on that filter page we're gonna have to do a few things let's close this engine just focus on this page so we have this area up here which consists of a few items and then we have the actual categories and we're gonna go the categories uh from the data so I forgot to add this I will now add this finally you can download this or grab this below uh this is basically a list of filters with a count uh no are we using the count yet I think um just an array of some data that we will use to display that list but let's get started by first of all creating our Styles object using stylesheet dot create um you could please just add my import automatically that would be really really cool and of course I need some scored of container and I'm going to apply this Styles dot container right out here this will now use flex one so that will make sure we're using the full page I want to give this some padding as everything on that page actually had padding so we can just put the whole page under some padding and for the background color I will now use the same grade that our header is using so I'm going to import colors and light gray and yes now we have it a smooth without any Shadow or border below that header area um the next thing we need is do we want to add the footer first yeah maybe let's add the photo because that one's actually somewhat easy um so I'm going to say view style styles.footer so that should be at the bottom of our view yes you can have a uh you can have a text in there copilot if that makes you happy but what I want to do for my footer is I will actually give it an absolute position um do we have to well we have a list inside so it's kind of above it um I think it makes the most sense yeah to position this one absolute if we position this one absolute we should also give it a fixed position so bottom left right zero and I'm going to give it a hate of let's say a hundred so then we already see the footer come up here in terms of the background color let's give it like a medium color and we can see the difference so this is our footer area right now within what we need is a button so I'm going to use a touchable opacity again uh and on click this will have the text done and that touchable opacity we don't really need this actually and we need to close this of course and have we not edited yet now we have this will get the Style Style start full button so this will once again be a button that is uh visible with a complete with just having a bit of margin and padding here and there so let's add this I don't know have we used this before on my other page for the bottom sheet maybe is there like a full button um maybe this one uh but then maybe also not yeah let's let's go with our own styling so for the background color we're using the primary color and we will use the full with available so this is the done button it looks perfect not really um that should once again have some padding so let's give this a padding of 16 so the button becomes bigger you want to align the items in the center that done button and of course we need a footer text so that text should be use the white color in fact I don't have that in colors for white we'll just use white like this and set my font weight to bold and the font size to something like 16. I think that should look good and now we're going to apply that to our text here so Styles dot footer text I always make the same mistake okay now it all really looks like this becomes better but of course our full button needs uh um what do we need we need to board our radius and our footer should probably just have some padding so for the footer oops what was that I'm going to add padding of 10 yeah then it makes it stand out and then we can also see that if we now apply a border radius of whatever eight it should look like this good I think I like this I like this I really like it of course our Footers should not really have colors medium for the background color but instead just a white background and if we observe this we see there is a little Shadow at the top and we can create this with a little elevation here on our button so we're going to use elevation and then we're going to use a shadow color of black um if we apply that nothing will really change because we still have to set the shadow opacity and the shadow radius and boom We Got The Shadow up there you can also directly affect the shadow offset if you want to so if you would do it like this uh it will look a bit different I think this looks pretty cool like this is really cool so on clicking our done button uh we of course want to close our filter as well so we can just get the same hook in here which means we can say const navigation equals use navigation um what's the way to like tell copilot to not do what it's doing uh there should be a way but anyway we're going to attach this and then on press of the button we're going to do the same as we did before navigation go back cool so yes perfect okay we got the model now we just need to implement the content the content is going to be interesting as I said as we have this list of items and the top the list will be displayed in a component called flatless there are different ways you could also use a scroll view but flatless is a bit more performant there's also a flash list component but that makes everything a bit more complicated and I don't really want to rely on that now already so we're going to use a flash list and we can probably already add that flash list in our view so instead of having the filter here I'm now adding the flat list the flat list needs some data so this is where the data comes in yeah not this data the data comes in from the file that I've shown you a second ago so we're going to add an import for our categories from assets data filter Json that's just where I place this um and then I'm gonna say hey please use the categories for your data additionally the flat list needs a function to render every single item so there's a function render item and we're going to create our own little function because that will just give us a better structure you can create one called render item and we're going to use the type list render item and a category do we actually let's add this at the top so this is an interface for a category could have a name account and could be checked so this is optional and then we're going to see this is the category of that item and within do we actually need functionality in here not really so we should be able to just wrap it in regular brackets and we're gonna return a view um yeah view item dot name is it actually a name yeah in fact we don't need the return right good so let's try and pass this to our flat list here and let's hit save and text must be yeah I think that's good I think I fixed that one hopefully uh okay that's a good one that usually means somewhere in your code yeah you have a character without the text element so here we go we have this nice scrollable list before that list I don't want to show these items and in order to show them it's a bit more complicated if we just put them in here it could work but then something is not scrollable so the usual way if you have a flat list in your page and you have something above or below is to just use the list header or the list footer component so we're going to do another component in here I'm going to call this one the item box and just like before this will be some sort of view I'm actually going to call this one Styles dot item container so we're going to give this some styling uh yeah there will be items at some point and I'm going to add this already down here for the item container and now we can pass this new item box component as the header component to the flat list so list header component is now our item box so that means the item is displayed above the flat list and now that the item box is visible here the first item so this one this item is actually not part the actual list starts down here uh where we see a PSI and all the other things uh we can Implement that little box up here so we already gave it the item container now I'm just going to put in a few touchable opacity elements uh they will all have style let's say style dot item I don't know if this is maybe the same styling like we had before I actually assume so so let's go to the bottom sheet and we had this item styling here so I'm going to grab this and edit in here this could probably be the same item styling or actually it could work um it gives us this white thing with the background probably not completely correct but also not bad so we have a gray background um we probably don't need that much padding we just need some padding vertical and I think eight should be enough um but let's let's try um and also this is going to have only a border bottom width so we can say that we only want to have a bottom border and not somewhere else now I think that makes more sense let's try and put in some stuff um basically I mean we could just get it from our bottom sheet so that item really looked pretty much the same um so we had the ionicon then we had some text um so let's put this here into this one we don't need the additional view styling so ionicons from Expo Vector icons and well that looks not too bad um the first one will be sword and if we look at this we see okay Chevron forward maybe a bit bigger like 22 but the first one should be gray and that's good I'm just going to use something like Arrow down outline so this is our first one um this item styling I feel like um the item container should have more padding yeah the general surrounding item container needs some styling so let's give that item container some own styling I'll give it a white background and I definitely want to give this container some padding as well so then yeah that makes stand out the items and the Border looks like this that is good that is good uh we also want to board our radius for the white thing and then I want to add margin bottom so our list just starts there actually there also should be like a header text for the categories below I think we could add this right here so that header should definitely have a bigger font size uh like 16 font weight bold and also margin bottom at least let's use 16 as well and then we can already wrap that up in here and put it somewhere below these um that actually belongs somewhere else like uh that's a good case again so we're going to yes put this in here call this category so it would display in here but the problem is I don't want to have it in there I want to have it after the view and that usually complains because jsx expression must have one parent element and you can just use an empty fragment in those cases around this and then we would have our categories here and the sword up there and with that we just need to replicate this block three times um so second one was like hygiene rating uh what do they like fast food uh outline then we had what was that offers in dietary offers dietary gets like nutrition and the offers gets a price tick and let's check on I think that looks pretty good we could probably remove the board at bottom as well or from the last item as it's not really super great but at the same time it's also not really bad um how do I feel about this I feel like the items in general could use a bit more petting I don't know let's check out the item again we have a gap of eight I think the item Gap could be bigger yeah Giga and let's use something like well maybe 10 maybe 12 is a bit too much that should be okay um so I don't know if I want to use the bottom border or not I will just keep it in for now we don't have to be like Pixel Perfect so we can scroll that area we have the button down here and now it's time to talk about the flat list again so for our flat list we now need to render all these items in a nicer way because that looks horrible so we're going to do them as these items with a checkbox at the end we already have our list render item functions so we're going to give that one a style and that will definitely be like styles.row so we certainly need a row layout or setup for our flat list items so I'm pretty sure that at this point I want to use a row Flex direction of row I will also align my items yeah I will most likely have some padding actually the padding doesn't matter too much in this case but I want to align the items and I want to give it some padding around this as well and also the background color should be set to White now that gives us already a bit nicer list we see we have a problem at the bottom but we're going to take care of that later or actually we could just easily fix this if we just put a view in here uh so if we just put a view in here and say style uh hate 80 or 90 I don't know and then close it so hey what's your problem it shouldn't be a problem how did I mess up my live reload so hard I love it uh let's see I'm just going to press I again should bring it up I don't know sometimes I really like I don't know it takes oh it's again this one the text strings one uh yeah better so now it has like an additional component in there so a little fakie here uh actually I don't like when we should just do like ADT yeah I think that's better or even like 78 unless I just I mean I don't want to do Pixel Perfect but it still should be like pretty epic yeah I think this is cool okay and now we need to do the rows so name count uh checkbox and separator we can do that um so let's see our render item is pretty boring still uh we can certainly do better and we need one additional package which is the react native bouncy checkbox this is a cool component for creating fancy checkbox just like this because the default react native checkbox if it's not that cool you don't really want to use that so let's install the react native bouncy checkbox instead and let's put that to use in our page so we're going to add the import for the Bounty checkbox up here and then we will see how we can use this uh so yeah this is the basic usage and there's an advanced usage uh I don't know exactly which kind of usage we need well let's see we have the text with the item name and we can actually at the same time display item dot count as well so let's put it in here item count and it should be in regular brackets displayed okay Additionally the text should have a different styling so it should be like a bit light gray I would say this is like the item text let's put in an item text down here and that item text is most likely taking up most of the width so we're going to give it a flex of one again and probably yeah probably um actually I think this should be enough do we need what's the color what the column I said uh I don't know I'm just gonna I think I'm gonna stick to to my black color right now let's just try and put in our bouncy checkbox here now so we have the row we have the item text and now yeah let's add the bouncy checkbox I don't know if copilot is giving us the accurate implementation here I'm just going to try um this is not too bad this is actually not too bad um let's unwrap what we've implemented so we have a fill color Trail car is of course the primary color the unfilled color is white that also totally makes sense then we have some icon style the icon style is also using that border but probably um probably we need to change that a bit especially catching the state here is somewhat tricky and we're gonna have to talk about that in a second also I would like to give this icon style uh somewhat different so I will not only use a border color I will use a border radius of just four so that should give us a box instead and I think I will go with the Border width of two so that gives us a bit bigger box or maybe I'm just gonna stick to one actually I think it might be enough so this is the icon style um for the uh pressed State we also have an icon style or an inner icon style that I want to set so I'm going to set that to Colors as well and the Border radius to four so now we have both States covered let's look at this one actually I think we're going with a border width of two yeah I think we're going with that and now it also works with this bigger box so I think we made a nice job already with this list however we now really want to get the state of these items and that's not that easy in fact I mean it should be easy but apparently it isn't so this component manages its state itself but if you want like to have a list of the checked and unchecked items or if you want to check them and update the component it's getting to be really challenging and that is somewhat of a Pity so what we're going to do is we will now pass disable built in state so now it's not catching any of our state anymore and we will manage this ourselves so on our page I'll now say cons items set items so we're going to introduce a little stage in our application use State this is going to be an array of categories and it's just using our data now that also means I want to pass these items to my flat list instead of just the plain Json data with that in place we can hit save and for now I think nothing should change it's still the same data passed to this however we can now select items and we want to do this let's see by passing a new function to onpress so on press we can check if the current item is checked and we can check this by using the index we're going to grab the index up here so we're going to destructure the list render item in not only the category item but now also the index and we can check if the current box is checked by using items add the position index dot checked this also means we have a new way of setting the actual checked value so we're going to set is checked is checked two item well not two item.checked because I want to use my state instead so I'm going with items at the index index.checked or at the position index.checked actually we have that function so I'm going to remove it now when I click on one of these I need to update my state and I will do this by creating a new array so I'm going to call this updated items um and therefore I want to iterate through all the items that I have uh I don't think I need the index for that and if the item name is equal to that name um we're gonna set the item check uh will this work I'm not entirely sure about you copilot I mean we can give it a try but what I want to do afterwards is of course calling set items with the updated items let's see okay copilot actually figured that out correctly and we're once again able now you don't really see a difference to the built-in State however with this approach we are able to create a function now so let's call this const clear or handle clear all and with that function we are now able to update our items by going through each of them and setting the checked to false and once we've done this we can then simply call set items with the updated items and that would actually work let's see if we can just put a simple button somewhere um I'm just going to put this above the flat list for testing whatever I'll just make it a button button from react native so let's see I got the button and if I hit this it clears all the items so now we're able to correctly check this date and from code also clear this and this will become more important soon is we're going to add another button or also you can think of this if you would like to pass this down to another component which we don't do right now because we're actually not going to use the category filtering but then you would have to know which of your items are checked and then you now got this list of all the items including their state and the check value and it's not only managed internally in the bouncy checkbox so with that in place we have finished ninety percent of this filter but now the last fancy thing is that we want to animate this button there is actually a built-in animation package for react native but usually what you want to do is you want to use react native re-animate created four more powerful native animations because this is actually not just using some web apis this is using a really native code to run your animations which is a lot better in performance the good thing is we've already installed react native reanimated with our expert application in the beginning and what we now want to do is we want to create a separation here so we want to have two buttons we want to have a button to clear all and the done button and those should actually divide up the space so in the center it there should be a divider or that should be nothing so in case we have something selected we're going to have a button here and a button here and in case we have nothing selected we will just have this one take up the full width and expand to the full width now this is easy as than done but let's get started to understand that with first of all add a bit additional state to check if we have selected items so this will be an empty array of categories um or yeah we can I think we can keep it like this then I will also add a new value so I'm going to call this flexible width and this is now using a use shared value from react native reanimated so we're basically adding some styling to an additional button and I'll uh I think not to that button I want to just take up the available space um and that button will get like a style sheet but a bit different way so the way we do it now with this flexible width is that we can animate that value and we will pass an animated styles to our new component using use animated Style and within use animated style we will now return object where I'll actually use the width and then the value of that object and whenever we change the flex width we would animate that on our button it's actually a lot easier than you might think to achieve something like this you just need to play around with a few values and make sure that it works correctly so let's go down here um we have our footer here and I'm now going to wrap this in another view I will give this a style of styles dot button container and this button container will now have a row layout once again because we're going to have two buttons in there so it will have Flex Direction row as always we're going to have a little Gap let's use 12 and I will use justify content actually not space between that didn't really work well so animating that it didn't completely work out as I was hoping for um so now I'm going to wrap this around my two touchable opacities and that one here will have the text clear all this will also not have the style footer text I think but this will have like outlined button text and this other one will actually have an outline button because that button should not look the same it should be a bit different so the outline button will have a border color of our primary color and a border width of I think just 0.5 is enough in this case and I'm going to give the outline text co-pilot come on you can do this online button text that one should have colors primary uh fun weight bold font size sick thing something like that uh let's see we need the camera and now okay that button is not perfectly aligned yet so align items Center and of course as well justify content Center additionally we need the Border radius we should use the same like that full button uh what is the full button using border radius ATM so outline button should have 8 as well in that case and do we need anything else I think that looks good for now the only problem is that within the row these buttons actually don't really take up the space that they should so initially um or I'm going to use a fixed value here now um we're gonna check with a use effect hook now so with use effect we can react and run something when any of the dependencies here changes uh so we have an array of dependencies for the actual callback function so when our items changes which means the state has changed because I clicked something and now it once again becomes important that we did not use the built-in State when this changes I want to check did we previously had something selected so I'm going to say has selected and I'm going to say selected dot length greater than zero and now did this changes the question because if we already have the button we don't really need to change anything but if the new selected items and we can get them by filtering um all the items and checking actually I want to get ah do I want to get this like this I mean it should be fine so const new selected would be selected items dot length that one should have selected items should have lengths shouldn't it filter should return an aeration it length greater than zero okay where's your problem no problem so now it elected e unequal to the neglected it means something has changed either we have no more selected items or we haven't selected items so let's actually add this has changed and we can see this in the logs so if I check out the locks now okay I can click this one actually it's called the whole time now that's not perfect and clear all should also call our handle clear all we can by the way put that into use already so where's my button yep first button should not use navigation go back but just handle clear all and the second one is navigation back okay so let's see again clear all clears all that's good but has changed is definitely triggered too often so let's see let's go bank here and if we do this okay yeah after we've done this we also need to set our selected so that is like the the historic version we're gonna set this to the new selected items so once we do this we should see okay this is let's refresh so we can see this again we change it once but now it's not changing anymore only when I go back and have zero items has changed this trigger again so only in those two cases our function will now run that's good so in those cases I will update the flex value and I will check do we have selected values then I want to use a width of 150 for my button if not I'm going to reduce the button size to zero and because we're using these animated Styles it will just animate the change of that button in fact to make that change take some time we're going to wrap this but for now let's just see how we can apply this so we now need to apply our use animated Style 2 component just like we would do with a style sheet therefore let's go to the button so here is my touchable opacity and I'm going to change this into an array so it will not only get the styles from the outline button but we will also use the animated Styles in here oh that should be animated styles I definitely don't want to have a typo in that case okay so we also see that we now get an error because reading the value directly is only possible on the UI runtime yeah that is a very cryptic error and it usually means that when you use these animated Styles you also have to um apply this to the surrounding View and I'm going to do this in a different way now so I'm actually not going to do this on here I'm going to put this in an animated Dot View and I'm going to use my styling in here also for the touchable opacity we can basically remove this so we have all the styling up here in the animated View and then we close it down here make sure that you update the import from react native reanimated and now it's better so now the button has a width of zero that looks actually okay I wonder if it changes something if I change the order here uh not completely but we're also not yet done so we will now go back to the full button and first of all tell that full button to use a flex of one so it's using up the full width this sometimes causes some hate issues as well with our animation so I'm going to Define this button should have a height of 56 and I will actually set this for my outline Button as well good now what happens if I click this okay not too bad not too bad um this is actually a pretty good start I didn't expect that one um so with that in place let's see uh we have the hate we have everything now we just need to animate this and we somehow need to get rid of the Border I mean we could probably animate the border with as well but what I found is that it's just about the scaling as well so while we currently animate only the width of it we're gonna also now animate the scale and we will also add the actual animation and we can do this by making sure that when we change our shared value here we're gonna wrap this in with timing with timing is a default function from react native reanimated that gives us some nice ease into a function so as a result this now looks like this and because I really want to be perfectionist in some cases this is not perfect for me so the button the text should somehow change I feel like the button should transform um and the text should scale down so I'm going to add another shared value I will call this one scale it starts at 0 as well it will change its value here with timing and if it's visible it will use a value of one otherwise we're going to scale it back to zero and now I'm creating another animated Styles object I will call this one animated text and instead of something with a width we are going to use transform and we apply our value to the scale now we just need to apply this to a part of our item and we need to make sure that we once again put animated in front of it if we want to use our animations on this component so I'm going to put in my animated text here for the button text and let's see uh-huh now the text is while it's getting smaller the text size is also shrinking down the only problem that's left is the Border radius on our view so why is there still a border radius that's a pretty good question okay I think I found a little heck so for our animated Styles we will not only change the width we will also change the opacity so the opacity will be flexible value either one or zero let's see yeah that's better I mean it's not perfect but I think a combination of these different pieces really helps us to build that animation and now I think we can be quite confident about that uh for users this will just look good we have an animation that enters this um hello on click I should be able to clear this and it will also Fade Out that button again so I think we can be really confident with that and this is really the basic usage of react native reanimated you create a shared value at some point you change that value either with timing or with another function so there are different functions that you could use with timing with spring with sequence delay a whole lot that you can figure out and play around with reanimator we've just really used the basic and then we create our styling using use animated style and apply that just like we would do with a style sheet to the actual component which then needs to be wrapped with animated to allow the animation of the different parts of that item now we have the bottom sheet we have the somewhat perfect model including animations so I think it's finally time that we get into some API calls foreign we're going to integrate a Google map in our application and we're also going to use the Google Maps API so this is the screen we want to build and that screen should come up once we click here and on current location so in current location we have to open this new page it's going to be a model that's not a problem we know how to create a header like this and then we need an input bar which will come from a nice component we need a map view which we can use from Expo and a button fixed in an absolute position and we have already seen how that works so let's maybe start with the easy part the easy part would be to add another model to our application and I'm going to call this one location search dot TSX this is going to be a react native functional export component and this is location search you could also just call all the pages page it doesn't really matter what you name them to get to this page we're gonna have to include it in our layout so just like we did for the modal filter page I want to copy this over um so this will be under modal slash location search the presentation in this case won't be modal this will actually be a full screen model so that will just copy the whole screen the other one gave us the little iOS card Effect and we're gonna do it like this now the header title is going to be search location uh header Shadow visible we don't really need any of that we probably want to have a custom header left button so I think close outline with a primary color should be just fine now let's go to our custom header and add the position where we can no it's actually in the bottom sheet right now we got confused so we go back to the bottom sheet and where we can click on current location you previously had it like this so I'm now using my new URL which is the location search and now pressing it should bring up this model in full screen so you see previously it would just push this on a stack then it would just like come in and we hit this back button and now we have this nice modal overview we just fills up the whole screen so there's a nice getting started point so on that page is getting really interesting as we need to integrate the Google API so simply navigate to console cloud.google.com and it might open up one of your projects so I'm just going to start a new one I will call this food UI clone it doesn't really matter and I hit create so usually this takes a few seconds to create and what we need is we need to get an API key for the Google Places API and the I think reverse or geocoding API um there's no project food UI clone I think it is so here it is let's get a bit bigger from the navigation menu I don't want to go to the credentialed as I want to set up some credentials um I don't want to set up a content screen yet I only want to create an API key so it's going to create this API key and then we're gonna have to find the right apis that we're going to enable for this key we can actually copy this we will restrict it as well in a second um so let's go here and let's see we can now restrict this key to specific apis so I'm going to search for the places API that's good and the geoconi oh yeah we haven't enabled the services yet let's probably enable them first uh how can we close this yeah yeah that's better enable apis and services I'm going with the places API so do we want to use the places API new or do we want to use the places API I feel like we should just use the places API I don't feel fancy about anything new today so let's enable this one which will give us information uh get the data from the same database used by Google Maps um is it enabled yeah it should be right uh okay perfect now let's see let's get back to my credentials I can actually also can delete this one but I should be able to write now see uh the places so the places API can be enabled however I still need the geocoding so I'm going back geocoding API hit enable on that and then we are able to add that for our key as well so by default our key is unrestricted and with that key anyone could use all the services and you don't really want to do that because that could lead to some problems probably so I want to get into my API key I will restrict this now so it can only be used for uh places API and uh no geocoding API those are the two apis I'm going to hit save now you can later on also restrict your key to other things like specific websites or specific bundle IDs and applications but for now we're just going to stick to what it is and copy over that key and now we create a new DOT EnV file at the root of our project we're going to add Expo public and if you add something with apps go public you're able to access that key from the process environment in your code and then we're going to say this is the Google API key I'm going to put it in here now to pick this up we also have to restart our server here so let's restart npx Expo and that should put out a little lock actually uh I hate Helio is enabled I feel like this did not pick it up yeah because I haven't called this dot EnV it needs to be called dot EnV of course let's see again and now EnV file loaded export public API key now one word of caution here so this key is inside an environment file and you might have heard that keys are safe inside an environment file but that is only true if it is on a server if this is in our application it will still be bundled with our application so we're now going to access that key in let's say the location search so at some point we're going to use it like um process.env dot whatever it was called I think Expo public what was it called Expo public something key so just like this uh are we still doing this yeah we're still having this so let me restart my iOS um View and I wish you'd probably even see the key right in our location search and the problem is wherever we use this in our code it will be bundled with our front-end application and therefore it is not a secure way this is only secure like for private Keys If you integrate stripe payments and stuff only inside a server environment not in here so just making sure that we are on the same page about that now what we need as well is a map view so we're going to install the Expo map view this is already working right here in our Expo go client so it's going to be really easy to test things out for us let's give this a bit more space and call npx Expo install uh react native Maps the package we also want to install is called create react native Google Places autocomplete and it looks basically like this so we're gonna have this nice view we can search just like Google we can show Power by Google or we can leave it out no matter what we're going with npm install react native Google places auto complete and now with both packages in place we can finally Implement our location search so I'm going to start by wrapping this whole view in Flex one so we're taking up the full space I'll also create my usual Styles object down here and I will add a map property here and that map should also take up the full available space for now style sheet comes as always from react native and we don't really need the text like this we actually need the process value so I'm going to put it in here so I don't need to figure it out again in a second so this is what we're going to use now in our view we want to display the map view from Expo so we can use the map view from react native maps and we're going to pass a few things actually I don't know what happens if we just use the default styling and nothing else let's see oh we see a map that's pretty nice uh cool so now we can play around with this and I'd say we get started by defining a default location so in my case I'm going to set a little State here and use this default location so by default it is not yet set but we can specify the region for the map view and I will put in my location and if I do this it will focus on London right now I could have also used Germany or anything just want to show that with the right coordinates we're able to focus our view now would be cool if this stays open thank you Additionally you can also say something like show user location so if we set this to true it should eventually show the location let's try and refresh the application by pressing r and then we see now we don't really see the user location yet I don't know why but well we're gonna keep it like this um additionally I want to display the button at the bottom so we have that view and we have select oh it's selected location not search location and then confirm at the bottom so we're going to add that confirm block which is going to be a simple view with some styling most likely is it going to be absolute I don't know but I will call this absolute box so that's the name I will give to this actually we can define a few objects so in that absolute box we will definitely have a button so button goes here and then we held so as always have a button text which goes here so that means we have a touchable opacity once again touchable opacity using the Styles dot button that's correct update the import and for the text we're gonna just say confirm now our box here should be a set absolute position so we're going to have to call it position absolute I want to use uh build space from the bottom so I'm going to use bottom 20. and we will use the whole width so I think we can just give it a width of 100 no we haven't styled the button so let's probably do that first and then we already see the button down here but we will of course use colors dot primary and if we give the button some padding and some margin uh then it should already look pretty good yeah that's a decent start additionally I want to align the items in the center just like before we could probably also just create our own like generic button component and also this needs border radius yes okay we're coming pretty close that button should also just hide the view so we once again inject the navigation here using the hook navigation equals use navigation from the Expo router and then on the touchable opacity we will say on press please just go back go back there we go and that should probably close it yep let's and the button up there of course works the same um by the way I still want to fix this like I can't stand this this has to say select location now I'm fine with that okay cool so we have a map view and by the way a quick word about that if you use the Expo map view in a real application uh you have to use uh some other keys and create a real API key and use that especially if you're using the Expo application build Services it is described in here we won't go through that as I'm not really related to our UI client it's just that the map you automatically works with the Expo go client but if you want to do this in a real application your own application later you're gonna have to add some more information great um we have the map now we just need the input for Google Places and this is where the second package comes into play that we install the react native Maps we can import Google Places Auto complete just like this and by the way whenever you see something like this just put in an ad um usually Visual Studio code is not figuring out correctly so you can do it like this and then let's just take this first little snippet here and put it in the view so we have a placeholder we have an on press and we have a query um text with string okay yeah it looks like yep I copied that one so let's go back and we have a search let's search for Berlin and we see okay there's an overlay but something seems to be wrong so I'm going to hit J which opens up the JavaScript debugging console because usually in here I can see better what's going on so let's try and zoom in and just test this um okay so most likely I mean we kind of know what's wrong as we can't really display any results without an API key so let's put in our API key and now I can finally copy this out again and put it in the key so this is my API key now let's try and reload this so it correctly picks up the key and can I now search yeah I can we got the search how epic is that this is using the key that we just created in Google API this is our key we are talking to Google I would love it when I can like connect apis and just make it work oh I don't want to uh kill that um also when I now click on an element like Berlin here uh we will get a lot of description so we get data and details uh match string structure information types a lot of interesting stuff but there's no information in here that tells us um where exactly this place is so in a perfect world I would not like to update my state with a latitude and longitude but I can't really do it right now usually we should be able to get the point Let's see we normally should be able to get a point from uh details geometry location um geometry might also be null and details might also be null so I will just log out the point however I think right now yeah the point is undefined because we're not yet using the API completely what we want to put in here is we want to also add something called Fetch details true if we do this it is using the geocoding API let's try again uh let's use Berlin here and then we see we get back a point with those coordinates and with the coordinates we should be easily able to update our view and Center our map but keep in mind you have to enable the geocoding and the places API in the Google console to make this part here work also I will call this search or move the map and in my function here I will check if we don't have a point then I will just return and otherwise I will update my location and I'm going to use Point dot latitude for the longitude I'm learning point longitude and I will yes I will keep all the longitude and latitude Delta so I mean you'll use the spread operator of the current location so it will take all the values currently and then just overwrite those two that should work let's give it a try I'm trying to use Berlin Germany and we see in the background the map is updating now there is a problem this seems to completely cover our map so we do have a little issue with the styling here and we might put in some different styling so let's add a style object Styles and we could do it in here um I think it was recommended actually I don't know if we want to do this in here or not so the places has some props it has some styling how did they recommend it yeah they recommend to use these keys for styling like a container a text input or a text input container so let's try and use them directly in here first of all for the container I'm going to say please use flex okay we need to make this an object Flex zero so then it will not be above the map at all I mean that's a good start actually that's perfect right I mean that mostly Works um so let's also work on the text input now so we can give some custom styling to the text input field as well for the background color I will use my own gray color now going to use colors.gray and if I close this we should already see yeah the background here turns gray I'll also give this some more padding left I'm heading left of 35 so I really want to move it away because what we eventually want is to have this white border around it so we really see there is a white border around this field and we need to make that happen and we also of course need that icon therefore let's go back here and let's also add text input container styling that one will actually get a white background okay so we see it already shows up a line and if I now add padding I think yeah we make it stand out that looks better good nice um also that field should have a border radius of let's say 10. okay we're pretty close we also have um the intentional padding left here so we can render an icon at that position to render an item left there's also another function we can add so we can have render left button you can also have render right button but of course we want to just render one to the left hand side and this one will be well it should just be pretty much just an ionic con right um let's see can we just do an ionic cons um name should be something like search outline size 24 and colors medium what happens what what styling did you add styling margin left okay so that renders it like this this is a problem and it's not correct what if we use the background color the same Gray that we used um somewhat okay but I feel like we need an absolute position this is not going to work so I'm going to remove the styling from the ionicon and instead I will simply wrap my ionica in another view so let's open a view style and this one will get Styles dot uh what do we call this box icon perfect name sign perfect okay uh box icon goes down here I think that's actually the last thing for this view already right so this is going to be an absolute position from the left I'm going to be let's say I think 15 that should work and top 18. okay so now I'm not seeing anything I'm going to up the Z index here yeah now we're talking and I don't even need to set the background color I think this looks perfect um speaking about perfect I think that's our view so we're initially focused on London uh we can hit something like New York the United States uh yeah new new United States yeah that's what it means of course it's New York uh we can zoom scroll out as much as we want to we can select a different location and start again and just quickly jump over to Berlin or my hometown Minster Germany here we go I'm living in the south of Munster and this is Germany and there's the see yeah okay perfect and with confirm we can leave that view so it wasn't actually too hard to use Google Maps um just keep in mind your API key is not save only because it's an environment file the map view might not work if you finally deploy the app so for go live for production mode you're gonna have to follow the guide from Expo to set up the according values in your files but with that in place I think we figured out all the overlays so we have the custom header with the bottom sheet we have the location full screen model and we have the card model here with the animation so I think we have finally ready to actually build out our index page with the restaurants and categories foreign we are now going to focus on scroll views and creating some cool components especially we're going to create a component that helps us to render this horizontal scroll View and we also want to make a reusable card component that we can put into another scroll view so surrounding this will be another scroll view that goes like here in this place how many cards we have same here of course this also goes out to how many items we got in that list and to achieve that we're using um some assets from our file so I got a home TS which has some categories for the first scroll View and then we have like three restaurants with some random information that I took previously from the deliveroo page so credit again to all of the assets and information from deliveroo okay uh we can get into our index file and let's probably clear up what we already had so we can close most of that in our index file we now want to render these two components so we can put them in the app directory so I'm going to add them to my components the first one will be the categories scroller so we'll just call this categories and the second component will be a restaurants row restaurants dot TSX react native functional export restaurants cool with those two in place we can once go back to our home page and on the home page render a simple scroll View so let's use that scroll View and within that scroll view I'm going to put my categories so there's nothing else this requires and below it we think we had some text right so above the restaurant ones we're gonna add some text I'm going to use a Style again so we haven't set that up yet but this will eventually be like the header styling and then I would say top picks in your neighbor uh put okay I don't know British English American English I don't really care I'm from Germany uh stylesheet create and for my header I'm going to use a font size not too big 24 is probably too big I'm just going with 800 um and I will also of course use Font weight bold uh in some margin bottom margin bottom actually just a bit less like margin bottom should be 16. and some padding horizontal to make sure that we stay here so we don't see anything because our custom header is currently actually blocking this so we are now going to add a new container styling and I'm gonna wrap my view in a safe area view because that will make sure that we also respect the different areas and I think we have used the safe area view before in other screens so as The Styling we will use Styles dot container and now for my container I will say that we're going to have some padding at the top of 30. uh will this help me probably let's also set my background color I currently don't see anything I feel like my save area view is not yet taking up um I think we need this save area view from react native safe area context yeah yeah well it's it's getting better uh it's not perfect yet but once we have our stuff in here I think this should eventually work so below this we would then render the restaurants item and then we're just gonna repeat that pattern and I will just call this one uh offers near you so we're gonna have something on our screen to scroll I'm not entirely sure why top 30 is not enough in this case um maybe I had a different hate before um I feel like my header here the search bar is quite High uh what do we use for the custom header um it looks like this search container is really very very high so let's look at this this is a height of 60 in our search container what if we give it like a 50. well and that's also making like everything smaller I feel like there's something else at work what's about the search section um well we just got a padding here well it's not too bad actually I just feel like this is quite the distance here especially towards the bottom so we might want to address that but I'm also not super sure if we have to uh so probably we're just gonna keep it most likely we had this one we had the attachable opacity this is actually just the search thing maybe the search field but that one also just has a flex one on row there's nothing bad about that search field in the search section just has a yeah there's nothing really messing up the whole styling of that thing I don't know who exactly is um doing all of that padding but for now we're gonna keep it like it is let's implement s the restaurants and the other restaurants scroll up um first of all let's start with categories so on that page I want to first of all bring in the data so I'm going to import uh categories from this file and those categories will be used in my view now this should be a horizontal scroll view so we're using a scroll view from react native and I will tell this to please be horizontal make sure you get the import and then typescript should also work now it's a horizontal scroller and in that horizontal scroller I will map through all the categories that we have and create views for them they will all have something like Styles dot category card let's call it like that and for every item in your map block you should assign a key so that everyone or that react is able to figure it out correctly and make sure there are different elements we don't have the Styles yet so let's also add them so style sheet dot create um yeah and there will be something in that category card also add that up here and then we should see the first results now in that view I'm going to give this an exact height and width so I'm going to where the width and height of 100 and then we already see we can scroll this so I'm going with the first thing I want to display is the image it usually really helps to construct The View so the image source is the category uh image and if I render this um no it's actually the IMG yeah then we have it we have this ugly scrolling thing at the bottom and we can get rid of that by saying shows horizontal scroll indicator false okay now we can scroll it just like this um additionally do we want to have some styling in there we might want to have but at some point let's for now also add a text element here and that should be the category dot text okay so that renders be low not too bad but most likely we're gonna need some styling in here as well so this will be category text and I will put it down here as well I should probably have something like a bit of padding um does it already work and the font size yeah really small font size but still a Big Font weight um that we okay yeah that looks somewhat good um now I want to make sure that these items are actually white and have a little bit of Shadow so I'm going to make sure that the background here is using the right color I think our index page I don't know if the index page is or yeah it's using a white background I don't want that I definitely want to have colors light gray that's what we usually use for the background so now we got the light Bay gray background and with that we should also be able to give the category card a background color white okay there should also be some padding between these elements how do we do this I think we need to do something with a margin let's say we give each of them a margin of 10. then we have this nice separation we also want some padding here um I think if we want to inject styling into the scroll view now we're going to use the content container style otherwise it will complain uh how you inject The Styling and within here you can say something like padding 15 so now it stands out more and I think this is already pretty close to our desired result isn't it also I feel like no we don't have to be that far away from the top anymore yeah no it totally makes sense now this looks a lot better cool uh we also wanted to give this some elevation so let's use an elevation of two for Android uh elevation and then we can Define our shadow color so for shadow color I'm just going with black usually and then make sure that the shadow offset works so let's use something like this eight two maybe just hate four um and then we also need the shadow opacity yeah that's pretty nice maybe we can make this even more visible just a tiny Notch here um I think this is actually really not too bad isn't it uh we have our font the font doesn't really need background but I think it could be more centered uh what if we give this no not like that um justify content I want it it's not really working here right we have just the full width so I could probably give this more padding but that won't change a lot but anyway in general feel good about this although this could actually be 14 like it's not that small in this one yeah I think this comes pretty close just some border radius up here for the radius give you the Border radius and four and voila you have an epic slider we have the padding at the start and end as we can see here so it will be nicely aligned with our 16 petting that we usually have in all the places and also for the end this so you see these like mental lines that you can draw they're usually pretty good if you can stick to them in here we have the same so we scroll this back uh we should see that here is basically a line and this is where everything is aligned so once you do something that is not aligned uh same for here this is also just a line once you see this it just feels off and you should always keep an eye on that anyway this is our first scroller and I think we did a pretty good job with that one now the interesting thing is I think we can just copy this over for now we can copy this over to restaurants um just making sure that this is now once again called restaurant I don't want to import anything and for the restaurants we are going to exactly import that data and we still have the same scroll view now in our restaurant view we want to horizontal scroll we might have to limit the hate a bit uh we're gonna see that but for now what we're going to do is we're going to start by mapping through the restaurants um and every item will eventually link to something so we're going to add the link component around it the href will be set so I'm going to set this for the moment just to the slash path but we could easily Now link to like a Details page of that restaurant we're going to use the key and just like before we are using S child as we will wrap another component or multiple components in that view no that's actually a nice start like I didn't expect that that happened really fast however we should also use a touchable opacity once again touchable opacity from react native wrapping this around the actual View and that view can stick to the category card the only thing I want to change is that this should be 300 in width and 250 in hate so as you can see this is going to be a lot bigger these are bigger cards um also top picks in your neighborhood this is not a line but we can maybe fix that later let's stick with this video for now um so we have the category car we don't need the index in here again um so like this and then we have first of all a really big uh image so this is going to be the restaurant not the um so this should be the restaurant image okay that image is probably a bit too big um let's say we're going with a little image container and that image container goes around the image I wonder if we just Supply style in here and say that this one has like a flex one that's not too bad I mean that's not too bad but the width um let's try something let's give this a width of undefined yeah and do I have to still set the hate as well or oh well it won't really change but giving it a width of undefined yeah Flex one to take up the full space but then with undefined that should work so then it's just using the inherent width Styles dot image and I'm going to add this down here so that would be a different way to create your styling just try it in line basically and then later create the object in the styling down here now below this we also need the actual information so we need to just only need the image but we want that block with information so let's see how we can fit that into our cart we're going to do this still in attachable opacity we're still doing this within the category card um but I want to do this now behind this I'm going to give this some new styling so styles dot category box and within the category box we're going to have some text elements so we're going to have something like the restaurant.name and more information to come so let's add category box I'm actually not sure if we use or will need the other one okay that shows nicely below this already that's not too bad let's see okay I think we can just do this pretty easy um so the category box here and the image are both in a flex layout right now they take up just like some automatic space if I tell this category box to use up like Flex one uh both would use the equal space if I want to have like one thing take up about 60 and the other 40 we can combine these different uh Flex values so if I give to the image let's say five um okay yeah and then for the category box we use like two yeah that's not too bad I think that should be or three maybe actually just two should be fine isn't that nice I really like that view uh I think this should be enough for us to create our box only the category box should have more padding so padding of 10 to make the text stand out but besides that wow this is so clean it just works like I didn't expect we need less CSS than I had prepared um but that's good that's good so we have the restaurant name uh we also want to have like the rating and how far it is just some more general information so I'm just going to put this here uh we have restaurant dot rating and then we have restaurant dot ratings uh okay they should have some different styling so I will not use this one uh I will just use color uh colors.green oh I forgot the import colors.green so then it shows up like this um oh we added the padding to the category text I guess category box huh category text does the category text have padding as well okay padding let's say padding vertical just in case um the category text um [Music] I wonder so for this one and now they are aligned this works this seems to work okay good and we need another text object let's use colors medium here and this is the restaurant distance so the different properties from like a Json that you might Reserve from a server could be displayed in here and as we can see they have different values and I could change them around now in the assets file where's the assets file data dot home so we had the piano we had Urban greens let's say this is about 1.7 miles away and El minero is about three miles away and we could just swap around the different things that we had in here and of course it would just show up it was used the images once again we're using require if you got a Json response from your API you would usually just have the string like an HTTP string to a server so you then you didn't don't really need like a require in here this is only because we're right now making use of the local assets um with that in place let's go one time back to the index because I think there was something I wanted to fix in here so in the index page the header has a margin bottom of 16. um but what about the top distance um that's same margin top well if it's also 16 and it doesn't really make sense and we should give it less like eight here maybe yeah maybe that's good like double here have there uh and I feel this was really fast compared to the other views but now we really see like a lot of the screens in this application are coming together and that's just how you build applications one screen by the other uh one component then the next component just structure it make sure you're using the the right colors like have some Global colors like we do have respect the padding and margin here and there and um at the end you're gonna be surprised what you're able to achieve now what I don't like is that at the bottom our save area View has some uh issues so how could we set this like uh with the edges okay so we won't use the edges as that will just confuse us and use the save area View and apply it only to specific potions of like top bottom left or right but instead we will do something with a scroll view because that is the actual problem here so for the scroll view we can once again set the content container style as we can't do this just with the styling and set something like padding bottom 240 so right now um of course covering this once again problem down here is that this is definitely too close to the bottom so I'm going with bot padding bottom 14 now and now we see that there's some padding left in our scroll View good with that we finished the home view we now have this scrollable component up here we have the scrollable component up here and what we're going to do next is we're going to dive into the details page once we click on a restaurant and we're going to do this for just one fictional restaurant we're not really using any other information but it's still going to be really challenging foreign so let's get started with the details page and this is going to be a bit challenging especially in the first part I mean in general but especially right now because we're going to use a little bit of an outdated package that we're going to have to update ourselves so here on the left side you should see my application actually let's do this one I can draw better this is the official application of a Details page and now let's look at this this is called a parallax effect this simply means well if we scroll down the image Zooms in and if we scroll up you can see that the background moves slowly and the foreground so this here like all the content here is the foreground and this is basically the background image so the background moves out slower than the foreground would give this nice effect on top of that we see we have no status bar but at a certain point we're gonna have actually a white bar up there with the name inside and we're going to be able to replicate that to at least let's say 90 I would say so this is a bit challenging but we're up for a task now uh so here we go we are going to use a package called a react native Parallax scroll view um so if you look at this package uh everyone should fear this this is the nightmare of a react native developer a pack that is not really maintained anymore they are like 22 pull requests at this point and probably we could use one of those pull requests but I'm going to follow a bit different approach here just to show you how you could use this because in this case using that package is quite simple there's just an index.js and a Styles file so what I want to do is I want to copy the content here of this file so all the content of that file and I'm going to create my own file yeah some solutions are like installing the package and then patching the note modules folder I'm not really a big fan of that approach to be honest so um no this is another scroll view this is The Parallax scroll View and I'm going intentionally with JS because if I use TS in this case it's going to completely blow up and light up in all the places and I don't want to fix all the typescript issues additionally Styles defined so I'm just going to copy over these Styles and I'm going to apply them like put them in here um oh I copied two not enough I think yeah I need to copy that outer Styles as well sorry so let's get that back and let's put this in I might have to add style sheet if we don't have the import yet from react native so let's go up here and usually once I start using this component uh react native will also complain about a complain about a bunch of other things so we have module exports um let's just say uh export default in this case here export default and I'm not sure what the what's it called like details um how is it called uh properties Parallax scroll view okay sounds like a plan so export default Parallax scroll view okie dokie uh that should work so let's close this and let's try to integrate this for this we're going to my index page or actually to the restaurant because that's where we're going to click on them we already have the link in here do we already have a details component no we don't so let's add that uh details.tsx now in a real world scenario you would of course pass some information to that page like the idea of the restaurant now you will resolve the information we're going to do this just with some static information but replacing it to be honest won't be too hard since we still load the data from a Json file now in my Details page which I should be able to access right I'm going ahead now and I'm going to wrap this here and use the Parallax scroll view um can we get a closing fragment and can we get a parallax scroll view so that Parallax scroll you lives under components Parallax scroll view expected corresponding closing take oh I already immediately closed this okay good now we get this uh we should probably reload this because if I add files Expo is usually confused what I'm doing so I'm just going with a little reload here and then we most likely see another issue pop up so unable to resolve something could not be fine within the project uh come unable to refer from App details okay Parallax scroll view uh scroll oh yeah I gave it a lowercase I should make sure that I use the right naming conventions in the right places uh stopping server otherwise you can also use Clear sometimes as I said sometimes this is the fix but in this case I think we're with a different problem could not be found then uh I'm pretty sure that this can be found because it actually links exactly to this page so my friend we go with clear here we go I'm going to close that Expo clear for the win once again bundling opening up iOS and then we will most likely see a new issue um so uh Styles has already been declared okay we can live with that so that's the cool thing about typescript if you use it it really helps to solve all of these issues um so I'm not going to require Styles in here I'm just going with this approach if I reload now we see it's loading and another issue so view prop types will be removed from react native this is another issue we recommend that you migrate away so I didn't want to fix all of these issues with the package as I said and the easiest solution to this is to Simply install the deprecated react native prop types and then we go into The Parallax scroll view once again and we add the view prop types from react deprecated here and once we get that I'm definitely going to kill the server again because a new package might have confused Expo and I certainly don't want to do that let's see are we actually using the view prop types uh we do uh view prop types has already been declared oh yeah we did import it from react native so we definitely need to change that so we're using the view prop types from the deprecated react native prop type package and now we are finally able to get here with a different error but that error is actually good because we have not supplied any real um view any image to The Parallax scroll view but I think so far we have fixed the general usage of The Parallax scroll view so that was really important to me okay um so we know with these and we're on the details page okay um on the details page for The Parallax scroll view I'm going to start with not with this but with style I'm going to give it Flex one and I think we should put at least a view inside with yeah whatever um and some text maybe as well can we just get the right import the first time I do this no not not possible not today but at least I can make a details tick okay we close the view we close The Parallax scroll View and we hit save and input range okay yep we we still need a few things to be set up maybe we should also consult the package then we should probably see what we need um so maybe if I just give the default stuff it could already render so let me try this out uh they're creating an animated component oh you're crazy you're really crazy in here I don't want to do that at all um so I want to stick to what works so let's try uh we're gonna set the background color first rank round color also if we have had configured this correctly uh we might be able to use typescript in here so that would be really really helpful but we haven't so we got to live with what we got we also need to Define The Parallax header height so let's set this to some value and I wonder if that is oh that's already enough nice we got the package working you see oh that's cool that's hot right cool nice so um oh that feels so good like now we I was scared that we wouldn't see like the real stuff uh for quite some time but now we get this so style sheet coming from react native and we're gonna start with a little container styling uh so let's call everything that is in the application the details container and I will use the background color gray so when you import from our colors once again light gray and we will add this as The Styling for our view so we don't really need to use hate in here I think uh Styles dot details containers and then we have a gray background in here and instead of having a red background I will actually use a white background so that will get rid of the effect I mean we can still somewhat see it in here yeah someone but overall we just want to display an image here so the image of our restaurant so therefore let's import the restaurant data and this looks like this so again this could be just Json coming from your API we have some foods which we're gonna display in a little list we're going to get into that later for now we're just interested in like the general information up here and to present the general information uh we're gonna have to show the background so we're going to implement a function here now let's call this one render background well I mean it's not our name uh it's inside the package we just don't have the uh code completion of typescript right now and we want to display a react native image and the source is going to be our restaurant dot image if we hit save you see this is why I wanted to use this package it is not cool it is seven years outdated and not updated since five years or four five years there are tons of pull requests but actually with minimal effort and changes in the JS file we are still able to make it work so kudos to the official creators uh from back then and I think this package deserves more love so I hope maybe after this tutorial somebody picks up work makes a fork that works because a parallax quality is really important in many applications and the usage of this package is just unbelievable easy so we get this which is really really cool um now what else do we need we actually want to have a different header in this view so I want to have a sticky header can we make sure that why are you not rendering this on separate lines I just don't understand uh vs code sometimes it would make so much more sense to just render it like this um I don't know why if I hit save I'm pretty sure it's gonna be all lost again so there is a way to render a sticky header which would look yeah basically like this so it's not visible right now but once you scroll up it becomes visible and Fades in so for that we have to set a specific Parallax header height and there are many more properties that we can set so I'm going to show you how we configure it then it makes sense for our case first of all we're adding another function render sticky header so inside of render sticky header we are returning our custom header View and this view I think needs a key of sticky header and we also need some styling I actually don't know what we're going to use yet uh probably going to call this styles.sticky section um that makes sense yeah I feel so sticky section that goes to our snailing down here and for sticky section um maybe we're going to set the background color for now it's usually nice for debugging uh so we have render sticky header which should render the header but we haven't set that so we're going to set the sticky header height let's set it to 50 and I think we there is another property to make sure yeah that we have The Parallax header headset okay this is maybe by the way too big we're going to set this to 250. um and we can see that there's the bar coming in so this is our sticky header in action and then we use the right styling yeah it's probably not applying this yet but we're gonna fix that as well but what we see is that should be actually up here so we have a problem with the default react navigation so that means we want to hide that in Stead on use our custom sticky header implementation so we can use another layout effect therefore so let's use use layout effect which is called when this page renders and within the layout effect we are going to change the appearance of our header that's usually a good place so let's add navigation equals use navigation from the Expo router and because underneath the Expo router there is still the react navigation package we can directly use the navigation in here and call the same stuff that you might have used before okay this is navigation set options for your header options with react navigation okay so I want to have my header transparent so I'm going with true that already changes to this that's good that's a good start um besides that what I want to do as well I will hide the title uh header title should be empty um the header tint color should be my primary color because remember what we wanted to see is this in the default State we want to see this so we're going with primary and we have to supply our own icons for header right and header left header right are is actually a view with two icons so on the right hand side we see we got those two items on the left hand side we got one maybe we start with header left because it's it's easy and header left there we go um um I just want to make sure that I close all the stuff okay yeah I'm closing it now so now the arrow is gone but I'm gonna just replace this with a touchable opacity um opacity from react native just add the import when I click on it I don't know what's your problem and of course this one should just bring me back so that's the back arrow so we can say on press we're going to use our navigation that we already added and call go back as always from this page additionally I want to I know I really don't know why it's just not displaying this on two lines additionally we're adding the ionic on so we could use the iOS Aero back it doesn't really matter or just Arrow back would be fine uh color primary and style margin left I don't think we need that I don't think but the touchable opacity needs some styling so let's add a styling to the overall Button as we're gonna definitely reuse that so let's call this round button and let's go down here and round button okay round button uh should have a width and height of 40 and a background border radius of course and a background color of white okay that's good that's a good start now we just need to yes justify and align in the items and then our back button is done and we can just copy that over to the header right as well so header right let's implement the same stuff but now um header right I don't have a typo but in this case I'm going to wrap this in a view and then have the two touchable opacities in there as we're gonna have two next to each other so let's call the style here Styles dot bar something like that really creative Simon and that bar should of course have a flex direction of row otherwise we want to see we would see the items below each other nonetheless we're gonna align the items in the center we're gonna justify the content in the center I want to have a little gap between them so now I'm just copying over my two touchable opacities into this bar I could actually have like three and we see both show up here we just need to give them some different um icons so let's give this one up here share outline and then when the second one what was the second one search right search outline okay that looks pretty nice I just want to remove the on press Handler since those buttons will actually not really have a functionality in our dummy and that one looks I think that looks pretty good however at this point I don't see my sticky header so I'm a bit worried about the sticky section right now uh we do render my sticky header here and give it the and there's actually nothing inside of the sticky section we should probably change that um so in the sticky section here we're going to render a little text element yeah let's let's just try a sticky header for now okay we see it up there so the only problem we have right now is that it's in the wrong place but if you see something on the screen that's progressed that's always good so uh we will just play around with the different styles here so let's go with a Styles dot uh sticky section text here oh yeah that's totally not how you spell my styles and instead of showing sticky header we can by the way just use restaurant.name and it feels good to have some code compilation once again so um sticky section text has the sticky section text well nothing too fancy but we're going to make sure that it's I think it's using the black color by default right yeah there's the name um but probably you want a bigger font size I want the font size of at least 20 and probably also some margin so yeah that gets better now the only problem is that our sticky section is in the wrong place um so it should be further down when we scroll down let's do a quick comparison if I scroll down here it looks like the standard header bar you're used to so we're gonna have to make sure that it is further down um in the page how do we do this uh let's see I'm going with a margin left here because the text is would currently be above the icon so if I do it like this it would be in the right place um that's actually not too bad I also will give this a fixed hate of a hundred so it's a bit bigger I think but now we just need to find a way to make sure that this sticky section is actually not up there so let's see we have the uh sticky header height I'm going to up this a bit so now if I use it like this we see it's a little bit of a fake um but I think we should be able to use this to our advantage if I now just place the name in the right space here we might have a chance to see this correctly so that means we just need to play around a bit with the numbers here um so additionally I want to have the okay I haven't said that yet so we can also Define the content background color real quickly colors.light grape um this would also change for our overall pages so now it applied the color let's change this to primary so it applied the light gray down here that was missing as well light gray okay cool and up there I want to make sure that the piano is actually displayed at the end of this so within sticky section um I will give this justify content not Center as we always do but something called Flex end so that would align the items down there and we now see what's happening when the sticky header comes in it actually nicely positioned with our items I can just go for a white background here and let's see I think that's not too bad isn't it the header is maybe a bit too big um so we might be able to chop something off that which is the sticky header height yeah that's the sticky header height um but now I think this is almost perfect like look at this look at the comparison like it just fades in you just need to get the timing right but yeah it's like a tiny bit different but from what I can see I really enjoy this I wonder how are the buttons buttons yet it just does it like on One Snap immediately we could probably fake that as well but I think I'm kind of happy about our setup as well uh and how we did it it feels really natural to me and I don't think any of your customers would complain about how we rendered it um in here so we got the image the image is actually a bit too big um we might want to change this so where we render the background we are able to of course use some styling as well so let's see I want to use 100 of the width yeah okay and let's give it a smaller hate um so the hate of this Parallax background I think was 300 yeah so now we can definitely see more of that image I think that feels better than just being zoomed into one pizza um I really I really like this Parallax I always love to implement Parallax and it was really somewhat easy with that package I mean it wasn't perfect with the JS but we could easily or with some effort convert this to typescript and then we would have all of this so again cue this to the Creator here and you might be able to create a pull request or fork or this and like make this updated but for now we're happy with this and now we can focus on the details below foreign we got this cool Power like scroll view but now it's time to focus on the details below so what we want to achieve is something like this we will later talk about this section up here that's going to be something special but for now we want to do this and this is a super great example for using a section list so you can use a scroll view uh you can use a flat view for items or if you have different sections which group stuff together you can use react native sectionalist which usually looks like this you can have these pieces sticky or not you can design them however you want and we will do exactly that and style them to our needs to achieve the images and the different information for the dishes of that restaurant so before we do the section list however let's quickly show a few more information about the restaurant so I want to present the restaurant.name which is usually shown below that and therefore I'm going to need some more styling so this should be some something like Styles restaurant name eventually we will then have something like the restaurant description did I just cut this out restaurant description and that should be actually that's going to be a bit more challenging in here and also I managed to once again miss that name okay so restaurant name is just going to be a bit bigger most likely in restaurant description should be a list of some some texts that we're going to display but we can easily uh loop through these texts for example we can show something like the delivery restaurant dot delivery DNS delivery and then we are also going to use the high dot again that we already used before to put this between them then we're gonna show all the text of the restaurant so if you check this out there are like different texts in an array and we can display this by simply mapping through this real quickly so just go with restaurant dot text Dot I mean we could join them [Music] um I want to make sure that we don't include this for the last text so uh we got Tech and index here and I want to show um we could probably just put I mean we are already in a text element so we don't need another text element here uh I just want to show the actual tech let's use a string lateral um tag and then if the index is below that I want to show this hi dot not a comma and otherwise an empty yeah that makes somewhat sense um the only thing is someone is not happy about this so we probably don't even need brackets in the first place here um what are you now mad about um restaurant index comma expected what what kind of comma I don't want a comma here I just want to close this and close whatever uh too many brackets so we definitely need one regular closing bracket I think that was too many okay that looks good yeah we got the name we got the text so now we just need the styling uh for that section so the restaurant name as I said is just going to be a lot bigger so something like yeah font size 24 or even 30 and we're going with some margin here as well we will overall use a margin of 16 in most places yeah that looks that looks pretty legit um and for the restaurant description I want to use a smaller font size of like 16 still same margin uh you know I mean I want a general margin of 16 then it looks like this and I will also set a different line hate so if we do this we should get a bit more separation between the items and finally let's use our colors so color should be colors not gray I think we can't see that um something like medium probably or medium dark no that should be enough I think that's fine still like that maybe that margin is too bad but yeah whatever let's just go with that okay um we got that information now we're going to put in a little about text that we should have um so where are we we're here in this inside view um so going with a little text element and we're rendering restaurant dot about so that should be a bit longer text and again adding some styling for that one as well uh this is probably our um not this I mean we can just use description again uh I don't know does it look good I mean it's okay we can live with that if you want to just use a different color but that's not really a critical piece here so now let's add our section list section list from react native that's action list first of all needs some sections and that's going to be a problem because if we check out the official implementation of the check section list we see that the data looks like this title and data I mean that's a nice structure for a section list I'm going to scroll in a bit so you can see this better but we're gonna have to bring our data into that same format so let's create a value up here I'm going to call this data just like they did and what we need to do is we need to map through the elements of our restaurant so restaurant dot food dot map so we're going through every item we have and I will also keep track of the index here and I will return um the title in fact we can make this even faster if we remove return and we just put it like this so we're just returning an object here I think we have enough brackets now yeah um so we got then the item category we check this out for every food item there is a category and there are meals and we need to assign that information in the structure that we had here so that's a nice nice little task of creating this structure from our app but usually copilot or any easy tool can figure this out so data will be the meals I will also include the index just in case we might need that so this is the data for my section list let's add this to the section list uh we already got that will this already render I wonder no not really yet um because we need the render item function usually so render item just like inside a flat list we need to tell how the actual item renders so every item will get the item and an index uh let's see if I got the brackets right yes should be like this and then we can actually know these are the right brackets this should be right and let's just try and render a view or some kind of text element just to see that our stuff is working um so item that name would be the title of that meal okay here we go um we got a little warning or actually an era about virtual Idol it should not be nested inside plane scrollers the problem is that our Parallax scroll view that we added to this page already defines a scroll view you can look into the implementation you're going to see that the main party of the children are already wrapped in a scroll view so what we can do to overcome that problem is to our section list we're going to add scroll enabled false so you might think oh then I can't scroll but we can anyway scroll that whole container so that is actually not a big problem um okay this looks pretty nice um we also should set for the section list a key extractor so the key extractor in this case and we have item plus index yeah I mean it doesn't really matter too much but I think we need to make or should make this a little string instead so just use a string literal in here and make sure you don't mess up the brackets um you can use item dot ID so that should be the idea of something plus the index just making it somewhat unique and it would be so cool if we could just show everything below each other I don't know what's wrong with this rendering okay um so we get all these dishes in here I feel like we don't really have the actual section header so what is the section header in our case we need to render that as well so next to our render item we're going to place a render section header function this one um gets also an object and we got the section which consists of a title and an index okay once again making sure that we don't mess up the stuff in here then we can render whatever we want so I will actually just render a text for um the section header so let's just run our test and then we already see we have the section headers between different dishes that's pretty cool however of course I don't want to display test I want to display uh the actual title so now we have meal deals pasta something else something else something else and of course that section needs some styling so Styles dot let's call this section header and I'm adding the section header down here so of course that section header should have a bigger font size than the rest of the stuff actually I'm going with 22 and the section header should also have a bold font weight and some margin top so that is really important because without that everything will looks the same just like it does right now but with the right amount of margin top and some general margin we're gonna see that and now the list stands out we also see that we have a little issue down here with our styling um because we're in the container of The Parallax scroll view in order to overcome that we can just add some padding to our list and whenever you're using something like a sectionless flat list anything um you usually want to use the content container style so I'm just getting this like a padding bottom of 50 and now if we check this out we see that we got more padding to the bottom here and everything in it looks good especially the section headers already look pretty nice there should also be like a separator between the items here so we can Define now as well an item separator component just like we previously I think use something like a header component that was cool now we got this item component I'm going to use a view yes with a style hate of one but I'm going to use the gray color because otherwise we don't really see this so now we see that we got lines uh but if you look closely um there's no line here below and there's no line above we just have these lines in between and that's a problem but not a problem for us we can just copy over this part here and instead of calling this item separator We Now call this section separator component so yeah the sections do have separator components as well and as a result you see now we also got a line down here and a line up here and of course same for all the other sections in there great uh we made really big progress the only thing we need to implement now is the actual view of one of these um meals or dishes or whatever you want to call them so we are now implementing the render item if you want you can extract this into its own function uh do we want to do this yeah why not so we're going with a render item here list render item I actually don't really have a type for meal so I'm going to have to say any imp and this will return something like a view yeah that's probably not the right thing but I will just want to have something quickly to show you so render item should now be replaced by completely replaced by my render item okay and for a start right this is a nice section list I mean just add a few more images and you're pretty good to go but anyway we're doing this on our own so I will also wrap all of this in the link component um I'm going to use href um but I won't Define this yet I will just say slash later on this will open the modal but for now I will just wrap it like this okay so that should be fine I'm going to wrap this around this and also I don't want to have a view this should actually be a touchable opacity so I can touch this stuff for the style I'm going to rip this out and just call Styles dot uh item so this should be a like pretty standard item styling with some white background I think just to make sure we are doing this correctly let's use a white background for the item some padding of 16 that was our number for this view I think and of course the flex direction should be set to row so we can display all the things next to each other analog's already played cool I really like the section list to be honest like I don't use it that often but when I do I really enjoy it so uh we got that now win my touchable opacity um we have a few items so we have this first part here and then we have an item so in that row there are just two views um so this would be view one and this would be view two that means this first view will then also have a column layout again so this part here uh therefore I'm going to wrap all of this now in another view and that view should take up most of the space so again using Flex one if I do it like this this view takes up uh most of the available space in the row The Source will be set to my image and then I'm going to not do this inline I will call style.dish image and this image will be um just as specific width and hate I'm going with a hate of 80 with the same and a little border radius so that looks pretty good I think and we're pretty close to the finished result already uh we just need to implement the first part of that view so we have the uh this name we have the description and we have the price so that means more styling uh let's copy this over so this should be dish and this is the dish text and we need this another time and this one will display the info and here we are just adding a dollar sign I'm just expecting dollars so this dish text and yeah again this text [Music] and this we just need to make sure that we implement this somewhat closely to the original so let's set a font size of 16 here size 16 for the dish and a fun weight of Bolt good that looks pretty close already now let's just give this one the same font size I think it's is it the same it might be smaller it might be smaller let's try 14 how that looks and of course we need to change the color to a bit gray color so let's go with uh fail to prop style where did I go wrong [Music] um I'm sorry why did I miss uh Emma props Colors oh yeah it's of course not colors it's color I'm sorry uh well then we I think we need the medium dark color in this place um yeah that's probably yeah we see the click event works and I feel like this list is pretty good we have the section headers which have some more margin to the top we have the separators in all the places probably the item separator could actually have some padding horizontal so these item separators are not going through completely but that's a minor detail uh we can just fix this in the item separator component if we say this one has like a padding horizontal of I don't know 10. and making sure sorry the item separator um sometimes mess up horizontal and um yeah that seems to work I don't know how much we're going to use 20. yeah I think this is cool I mean it's it's maybe too much but no actually I think it's good maybe we could use 16 because that was like our magic number all the time so we have the different items in here they the dish text could get some more padding uh if you like the dish text just some um padding vertical not too much it's like four or two yeah just a tiny bit of Separation can go a long way like see do you see the difference everything is so close together petting vertical four ah feels a lot nicer and here we go we got the menu for that restaurant implemented working nicely alongside the Parallax scroll header that we added before so I think this is already pretty cool you can imagine how that would be used just the stuff from One Restaurant from the Jason if you have a server implementer that Returns the data but for us this should be enough foreign we're ready for the last missing piece of this view so we got The Parallax view we get the section list but if we check out the official application we're gonna notice that after scrolling for a while this cool bar up here appears so we're now talking only about this bar we can call this like sticky segment or whatever you prefer and the cool thing is we can click these segments and it would scroll the list however I wasn't able to completely achieve that functionality um but I still thought that having this animation appear after some time and just having this horizontal sticky scrollable list would be a cool addition to our application so we're going to implement this as I said it's not 100 there the problem comes from once again this Parallax scroll view package so in case you don't want this I'm pretty sure we could do this so you can manually scroll scroll you to a certain position but right now we have the surrounding Parallax scroll View and um maybe yeah it was pretty hard to actually access its own scroll view so with a bit of typescript and refactoring of that scroll view I'm pretty sure it would be possible to achieve this so without further Ado let's do this um we are now going to put our view behind The Parallax scroll because it should be outside of it and also we are going to use react native reanimated so we're directly saying okay this is going to be an animated view within that animated view we're gonna have some stuff and then we have our view um probably we're gonna start here with an array and then we can give our Styles so Styles though this should be something like sticky segments and then we're going to have another view to mimic the shadow because that's actually not too not that easy to achieve um so we're doing another view but that one does not have to be animated so I'm just going to call this one style styles dot uh segments shadow okay and this one should be around the rest of this View and within then we got our actual scroll view component that's not too complicated this one should just scroll horizontal uh it should not show the horizontal uh scroll stuff so segments Shadow uh the import should hopefully be already there but I don't want to do whatever they added in here uh we might have some content container styling so I can keep it in there for the moment uh Additionally the scroll view needs to be closed and within we would map through the restaurant dot food so if we go through the food we have the different categories and that's what we want to display at the top so some are special anti-pesty in Salata whatever it might be so category category category that's what we need so we met through all the food and for every item we will create a touchable opacity because we actually need the touch feedback and we will set the key to the index um style should also well the Styles actually complicated we're going to do this probably later and on press we don't really have to implement it yet so then we have text uh which will also get some conditional styling so I'm going to remove it for the second and just use item dot category okay we got sticky segment and the segments Shadow and we should add uh and this one was segments Shadow okay we're gonna Implement that later for the moment let's see what's missing that's apparently missing uh no let's see uh we close this we close that we close the scroll View if you like we should do another record yeah okay um now it's not really anywhere in our view so we should get started probably by positioning it at least somewhere in our view uh so let's go to the sticky segments and tell them to use an absolute position I want to give them a height of 50. and we see it already appears up here I want to make sure that we start at Zero from the top we actually need some distance uh we need some distance I think 110 is the right distance yeah that looks looks somewhat correct um and I think that's actually pretty good we also need a background color background color should be white oh come on yeah so don't worry that this is not completely what we wanted to see yet um we're gonna fix that in a second actually 110 might be 10 off um yeah that looks better yep and we should probably also say write zero so it spans the whole width there we go so now we got this don't worry about uh the other sizing of that box we will eventually figure that out um so the shadow will be implemented later I don't really care about it right now but we're gonna have a styling of course for some buttons within and those buttons will also have a text so segment text now you can already imagine or maybe you can imagine what comes next if you check this out we see we have different styling for the active and the inactive buttons and that's what we need so we need conditional styling we will apply this to the element but we first of all need to actually Define them so let's see the segment button um maybe we can give this to our touchable already so styles style Dot segment button and the text should most likely have the segment button text however uh what did I call this segment text yeah should be fine as well however we need to check which is the active Index right now so I'm going to use some State up here let's say const active index set active index I'm going to use 0 at the beginning so then we can use this active index um and we can actually already if we want to add a little function in here to set our set category so const select category that would receive an index and then we could set the active index to the new index we're going to do a few more cool things in here later but for now that should be enough and with that active index we can now check in styling whereas The Styling here we go uh we got my touchable opacity up here so instead of doing it like this I will say is the active index equal to the current index well in that case please use a different styling then in the other case so we can do Dots here so Styles segment button active otherwise I would just use the segment button and now whenever the active index changes The Styling would change as well and we are going to apply pretty much the same logic down here so if the active index is the current index I'm going with segment text in active and otherwise just segment text so we need segment button active as well as segment text active can you figure that out yes thanks there we go so here we go uh let's probably add a bit of stylings we're going to start with the segment button active background color in that case would be our primary color um and we're going to use some padding horizontal like padding horizontal 16. uh-huh that already looks okay I can already see that we need the color white here and a bigger font weight uh-huh yeah that looks good that looks good um probably font size something like 16 bit bigger uh for the segment button I also want to have padding vertical I think eight is probably too much they were really like really flat in here so I think four should be enough and we need border radius we need really big border radius border radius of like 50. yeah that looks like a like a pill or something I think that's actually pretty good now the segment button pretty much needs the same but has no background color um the segment text should also have the same setup but in that case the color would be the primary color uh primary and I think I don't want to have bold font okay yeah it looks already quite nice once again don't worry too much about that it displays the whole time we're gonna add a little animation to that and we're also gonna add uh the shadow soon so I think we probably should add the shadow now so that view is already wrapped around it I'm going to justify content Central that will also um that should also put my items correctly in the center why are they not in the center yet we're going to have to figure that out honestly actually I think might actually not be that bad what if I add something like padding top in here that could work I think it could work already looks pretty nice I really like that view um why is the change not working oh yeah we're not calling the function yet we can probably do this so it becomes really interactive already so on press of our touchable opacity we call [Music] um uh select category with the current index so we're going to do function here okay and now yeah now I can change this this is cool I want to add something that it actually also scroll to this view but we're going to do this in a second let's let's for now add the shadow so we have the segment Shadow here um we're going with a shadow color of black a shadow offset with zero hate let's see what this gives us um I don't see anything yeah we don't have it yet Shadow opacity I think we need a bit something that is more clear uh this is certainly not what I wanted to see I mean it looks interesting uh but it's totally not adding in the right place um let's see what is wrong here I think this view needs to take up 100 with and hate to actually apply it to the bottom of that view so that was a little fix and I feel like we added the segment Shadow definitely in the wrong place so uh segment shadow goes around here um and there were how in the world is this adding the shadow to my touchable opacity I mean it's interesting that honestly that should definitely not happen um okay why is it adding that the did I mess something up in here okay we got my sticky segments these sticky segments by the way need an additional styling in here um maybe we can just do this in a sticky segments actually and say that the Overflow is hidden um so then it gives us this hard border down here and I think we require that um for our animation I'm going to just set the padding bottom as well so if we give this a bit of padding bottom it should work now I really don't know why the segment button I mean the actual segment button is using the segment shadow um this should definitely not be the case uh what I definitely know is we need a shadow radius as well to make the shadow look good but right now I feel like we are iterating in in some place in the wrong way uh we do have the view around this and then we have the scroll view no horizontal uh we have some headings I definitely want to align my items so we can do this and let's do another styling so Styles dot uh segment scroll View I'm gonna call it like this segment scroll View and put in the stuff we had already but additionally I want to also align the items in the center so I'm going to put in a line items Center and close it oops that was kind of closing yeah we're getting there we're slowly getting there that's at least correct I also want to add a little gap between my items so that adds a nice little Gap maybe even a gap of 20 like just spreading this out a bit and some heading bottom to make it a bit higher yeah I mean overall this looks good just honestly not sure how it applies the shadow to the buttons because the shadow should just be to the outer view so let me fix this all right I forgot about an important piece and that is setting the background color so right now it looks really ugly like this but if I add to my segment Shadow a background color we get it like this it is not the perfect Shadow I completely agree with you uh but it's better than nothing uh we can probably tweak this as it's really hard to have a shadow shadow like this with the absolute element and overflow uh getting working so you can probably play around with these values uh you can just make like the shadow opacity a bit less um as I said it's not perfect so it's just doing this Crainer crazy Shadow down there but I think for now we're gonna live with it more important is that this thing is showing up the whole time and we only want to show it after we've scrolled for like 400 500 pixels or something so we're going to use another reanimated styling in here and for that as always we're gonna create a value a shared value so we're not using new animated value that would be the react native default way but use animated uh use shared value huge and value from react reanimated so opacity initially will be zero then we have to create our Styles object so animated Styles equals use animated Style just like we did before I think we used this on yeah where we animated the button at the bottom so this animated Styles can then be applied to our view um so let's find it somewhere here's the animated view so after sticky segment I'm now adding my animated Styles which would by the way already hide this now at some point we want to show this so we're going to implement a new function it doesn't really matter where we do this const on scroll which will get a scroll event and we will be able to grip the content offset of that scroll event and if this value is above let's see I don't know 350 or something if Y is go whatever I do here if Y is greater than 350 we will call or set opacity value to 1. uh but probably not like this uh we're gonna do this slightly different way as you might know this would immediately set the value so probably let's let's give it a try um uh imported export may only appear at the top level where did I use that I'm sorry oh I missed the bracket somewhere animated styles on scroll is not yet finished yet so on scroll will go to the scroll event of The Parallax view yeah that actually has a scroll event it's passing through and we can catch this now with our function so after we've scrolled at an offset of 350 I expect this to show up or hide yep we could probably change the value to whatever we prefer but I think this should be close enough now we don't want this to animate appear immediately so instead of giving it a Direct Value we're using with timing one of course this also comes from reanimated and we're doing it with timing zero so now we have this nicely fading in effect of our bar and you see how these views come together one piece at a time take a look at the first part take a look at the sections take a look at the sticky header and just go through each of them on their own um it is pretty much finished there's just one more thing so in the official application when you click this it also Scrolls this View and at least I wanted to do a bit of scrolling from code so let's do this as this is quite an interesting um thing to implement so first of all we're going to grab a reference to the overall scroll view we're going to use ref for that so use rev and that will be of the type scroll View and that's going to be null initially then we will also grab a reference to each of those items which is actually not that intuitive because we have to set it up as an array of touchables so touchable opacity um or I think this could also be null but let's keep it like this and we already have the active index that's at least good so now we can get uh or set actually our scroll ref by going to the scroll view that is around here because we're gonna at some point tell this hey please scroll to 500 scroll to 600 wherever the element might be so therefore uh let's find this scroll view is here and let's set the ref to the scroll ref good now the other ref is not that intuitive as I said it's going to be on all the touchable opacities and the heck here is to call a function for every rep and this is I think this is not what I want I mean for every element um well actually it should work for every element it's setting our item ref current at the index to that element it's also adding this to make sure it's not null but I mean in that case it's pretty obvious that this is not going to be null so now when I click on something which we can do with select category so when I click on pasta or pizza it already called select category we now just need to extend this with a bit of functionality so we're going to grab the selected button from items ref current Index this is going to be the selected touchable opacity we should be able to work this out so a bunch of things but overall where's the starting point overall this should be well it's not showing but it's a touchable opacity nonetheless the cool thing is that we can now grab the position or get the position of that element on the screen so we can use selected dot measure and this will give us the exact position of something on the screen and once we got that it is it's super easy to Simply call our scroll ref which is the surrounding bar dot current dot scroll to current yeah you can do it like this could be in a scroll to and then pass in the object of where you want to scroll so I want to scroll to let's say I want to scroll to 200. we could do it just like this if I click this now it would just scroll somewhere randomly however we will use the x value here so it should scroll an element exactly to the start but as we know we have this little offset so I'm going to with -16 which would show the element as close there as possible but focused with that offset and I'm also adding uh y 0 and animated true and by the way we are not really interested in the other stuff so we can get rid of this so now we have it we can scroll this it focuses nicely and slowly to a specific item uh also we got the nice reanimated animation the only thing again is that I would really love to scroll the sectionalist to the right section but it was basically impossible to access the section list here in The Parallax scroll if you figure out a solution to this problem please let me know in the comments open up a gist or GitHub repository anything with the fix and I'm gonna um put it into the description so people can see it because that will really make the page perfect and I spend hours trying to get this to work um because it's really cool like you click here and it updates or actually it worked also the other way you scroll to pizza and it focuses Pizza up there but therefore you will have like a listener on the section list to see which section is currently active so we won't overdo this video will become anyway pretty long and we're I think now finished with this View so the remainder of this tutorial of this big build should be about the items so creating the item view with another animation and then talking about the card and the checkout all right so the next screen we want to tackle is the actual dish page which as we can see brings up this modal view so we can see this here because like we got the same card style we had before we have a close button we have an image which actually in the real application fades in so we're going to use a little animation also for the text so we're going to make this an appealing View at the bottom we're gonna have this area I'm just gonna skip this first part and we will just do the button so we can add something and we will just do the dummy functionality and then later add our state logic to this so that's the general plan for that page we should begin by adding a new file under the modal folder and I'm just going to call this dish dot TSX react native function oh come on is it too early for you oh I should probably call it not TSH but TSX it won't make more sense oh yeah here we go so that's that's better right okay this page this page um we're gonna include this now again in our layout file because we want to make this appear pretty much uh where do we use the modal we use the model here for the filter page so I'm going to copy that block edit again and then this will be modal slash um dish we're gonna say presentation is model the header title uh will be well let's just make it empty because in the screen there's actually no header title um and I still want to show the header area because of that button up there so that would make sense uh we don't really need a header style header Shadow visible um I think we won't see that anyway and header left yes needs a button which will use navigation go back that should actually be cool and close outline however I think we need some custom styling let's let's see we're going to hit save here and on the details page we will say that inside the render item we're now going to model slash dish and once again we have the code completion here so let's go into the page select one meal and this page comes up okay not too bad however um the header should be transparent I think we can set this as an option um so header transparent going with true so now it looks like this that makes more sense I don't think we actually need the header Shadow because if it's transparent there should be no Shadow but at this point we also need to give this a white background maybe we can do this later because right now we can't really figure out the size of that anyway so let's continue with the dish page so on the dish page we could actually I think we should actually be able to get the actual ID in our assets data um restaurant I think we have a function yet you get the dish by ID which will just go through the meals of a restaurant here of our dummy fake restaurant and grab that item so we should also actually send the ID to that page um so therefore let's go back to the details page and where we create our link here right now we just navigate to slash model slash dish but we want to include some information so therefore I'm going to make this an object now and we're going to say okay please use the path name what we had before and please also use the following params so I want to also pass an ID which in this case would be item.id I think we are we have no code completion on that at this point we arrive on the dish page with an actual ID of the meal we selected and we can just grab this by saying const ID the structure the use local search params from the Expo router I will just do a little lock here so let's see I'm clicking something and I get id1 if I click something else I get ID 3 or something here id7 okay so our logic works and we should be able to get the actual item by saying cons item equals get dish by ID using our ID and again I want to use the path Alias uh argument of type string is not assignable to type number okay yeah get dish by X expect a number in the argument from the local search programs if you don't use any types here will be an ID so there will be a string so with a plus you can simply convert that string to a number Super secure way of doing this okay um so we got our view we're gonna set up some Styles as always style sheet create and as always I'm going to get started with a container styling using Flex one and a background uh you don't like that when they thing is not closed yet let's see style sheet yeah I haven't actually added the import I can't blame you this time it's my fault you're cool you're cool um I don't have colors white but yeah I pretty I'm pretty sure that ffff should be white so let's apply this here for the style Styles dot container we only got one style right now and then I call this Styles oh yeah I made it duplicate I'm sorry here we go okay this is our container maybe if I give it the color red we should see the difference okay cool now at this point we can also finish up our button up here so in our layout file for the touchable opacity up here we should Now set some style we have a style sheet here now so let's just do it ourselves um I'm going with the background color of White and then we need a border radius and probably some padding yeah that looks good probably a bit too much uh padding yeah that's definitely too much that's these are six padding yeah that's good that's good we're done with that button thank you red debugging use of your uh served your purpose so we can go back to the actual page now on that page at the top we want to have the image in the background so we're gonna get started with an image tag and that image source will be our item dot image um and we probably need some yeah okay not too bad it's good like if you see something on the screen that's usually good that's progress uh we just need some right styling here so let's do our own image styling and I'm gonna add the image styling here uh Styles dot image okay we're gonna give this a width of 100 and maybe that solves the problem nah it's not really oh yeah we should probably set a specific heat let's use something like 300 yeah that looks good ah that should look good by the way you should notice that if I click on something else it already shows the other image like that's pretty cool isn't it nice uh also that button closes it yes so we are we're really good here um below that I'm going to show a little view I'm just going to give that in general some padding I don't want to do another uh styling element here and then we're going to add the text which would be the um yeah the item name and below that we have another text element with and the description actually don't know what it is um name it's info okay not too bad not too bad font size bold um we're probably gonna give this some margin bottom of like eight or so yeah that looks good and I'm gonna do this now in its Elemento style dish name so then we have a clean View and don't do this in any ugly way so that's better the font size here ah the color actually I would rather like to use like my own colors I hope the medium color works here yeah maybe medium dark in this case maybe that's I don't know uh styles that I don't know dish info we're going to put this down here to clean up our mess that we did but I think that's actually looking pretty legit and quite nice yeah that should work okay on top of that I want to have uh the footer element and uh and notice whenever I work on the footer I should change the views so let's put this here let's expand this there let's make this here and okay that's also a nice exercise for your brain like looking in different directions so you you don't get any confusion with your neck or anything else I don't want to do that to you so uh let's put our view to the bottom that's definitely needs some additional styling and we're going to use something like footer and then I will add that down here okay uh then we wanna I think we will probably position this in absolute uh yeah absolute position um I also want to put in some stuff so we need the uh touchable opacity in here and that shows also the price so we need to make a little we actually have the price right and that's nice that's nice I think but we're gonna wrap this in another view here so let's do this is a touchable opacity uh it will have some we're going to use the full button styling I think we had that before or at least I hope we had it so is copilot smart enough to figure that out that would be pretty cool uh I think it is actually I think it is so this comes from react native and then we do have a text let's call this footer text I'm going to add this below so this is still to do but actually maybe that's right maybe that's right what co-pilot gave us um where do we go wrong can we [Music] um I think we're cool like can we just reload uh expected closing Tech yeah I think I forgot I forgot to close the touchable opacity yeah came so back to my dish yeah I don't know um yeah not too bad this is not too bad this is a starting point now we're just gonna make the button uh appear at the bottom also we can say add four and then item dot price so then we can actually have the real information in here and we're going to add a little function cons add to card that we're gonna trigger uh right now we won't do anything but we're gonna already set this up for later point so here we go back to the footer let's position this at the bottom so position absolute that means we have to set some specific positions so bottom um I'm gonna also say left zero and a width of 100 okay that's not too bad that should be fine uh let's add some padding um let's do a padding of 10 okay not too bad not too bad but I also want to we need some more margin to the bottom right um let's say if we add margin bottom would that work yeah that's actually not too bad but I wish we could probably wrap this in a safe area view I don't know let's give this a try uh save area View but I don't know if this is going to kill up uh yeah but if we now give this a styling of Flex one should bring it down but then it's also not really it's not going to be really helpful right yeah I've wrapped this around the whole View would that help us yeah but then we have that that background right and I also want to only have this at the bottom so let's see if we can play around with this let's give this a background color of uh red yeah so that's that area and I only want to have the safe area at the bottom so what was the name edges yeah I only want the edges okay was this an array I only want to use bottom yeah so there we go uh and now we're just going back to a white background and then we have the perfect save area at the bottom cool yeah we we went really nice around that uh you see usually it applies to the top and the bottom the safe area but if we Supply the edges here we can say okay please only do this at the bottom or in whatever place you want to have it so we have that button um we have that the footer text looks pretty nice oh yeah they had this cool uh they had this Shadow up here so watch here there's this little Shadow at the top usually you're gonna have a shadow at the bottom so that's a bit more complicated now we're going to add this to the footer again so we're going to start with some elevation here of 10 for Android then we're going with the shadow color so I usually set my shadow color to Black there's some cool generators actually that you can use fellow opacity and Shadow radius that's what you usually need and now I'm going to set my 8 to -10 so that should show it up here um now the footer still wraps this view here I think I have to give this some um let me try something out so if we give this internal uh view here some styling like uh Flex Direction row um okay then we want to have it like this um [Music] well that won't really help us um I mean it would add if I had justify content uh Center and what Center everything but that won't really help us in any case if we just comment this out we get this uh the problem is I really want to have my oh I think this is the same case like we had before we need to set the background color of this View yeah and then we just see the shadow up there you see what's going on uh that's a nice idea thanks Simon uh really happy about finding uh like I learned something myself while we figure this stuff here out um can we increase the padding top to something bigger or with this yeah yes maybe 30 oh that's maybe too much I'm learning something myself while figuring this out with you and that's pretty cool so we have this button and we have that view which is already pretty cool like it's generic it opens the information there's everything on this page that we need to add something to the card however we can make this a bit cooler by simply adding animations so if you have a view like this it's really easy to just sprinkle in some animations so what we're going to do is on the image I'm going to say this is an animated image if I do this I'm going to add the rec native reanimated import and now I can do some simple stuff like initially I wanted to have a shared element transition which basically you click here and then it fades into this image however that didn't really feel good in this scenario and actually on the real app what they do is they just fade it in so we're going to do the same uh let's do this we can just do this right on the element now and what we can say is we can define an entering animation so for entering I want to use fade in left um it should take a duration of 500 milliseconds and actually I'm going to apply a little delay uh of 400 so that because this is a modal card that opens I want to play this after the model opens so let's hit save um okay let's see if I go here not too bad but I feel like we should just fade this in let's use just fade in yeah I think this is better maybe we can try fade in bottom uh is there like fade in down fade in up probably [Music] this is any cooler fade in down let's give this one a try yeah that's not too bad but we got this like this white area up there I don't know if I'm a fan above that no not really I'm not really a fan of that let's just do the fade in I think that's enough yeah then it just comes in and it feels more natural yeah apparently the delay is a bit too high you can play around with those values same for the duration maybe 500 is too much um and then let's also animate the text so let's change this to an animated text and we're going to say okay for this one please use the following entering animation this one should actually fade in left I think for the text this should look good uh we're gonna do yeah something like this yeah that looks cool and I'm going to copy this for my last text element as well um but this should probably have a higher delay so it looks like it comes in later make sure when you want to apply something like that you're gonna have to add animated to the element and you have to spell it correctly so now let's see fades in and these come gently and yeah I like that we could probably also like fade this in from the bottom I feel like this is probably too much for one view if we now also fade this in so I think for now this is actually enough and I think this is a pretty uh cool View and concept that you can then reuse as well I mean you could have shared element transitions between those you're gonna find a video on my Channel about them as well but overall I think this is a pretty Sleek Details page and with that Details page and that add logic in place we can go for something fancy um maybe there's one more thing that we could do right now and that is when we add something to the card you could use something like the Expo haptics uh plugin so this is now really hard to show you in any real example I'm just going to show you how we include this and then you're gonna feel it trust me really in this case you're gonna feel it because haptic feedback is like your device vibrates a tiny bit maybe I could show you like how this how this sounds but I I don't think so so you would import it just as haptics up here and then you would use a haptics notification async just like this so when we add something to the card we give the user some feedback about it and usually that is pretty cool um because the user gets some some real feedback and actually once we do this we can also uh bring the user back to the previous page so let's import uh use router so yeah we can also use router or use navigation and then call router dot back to go back to the previous page so now if the user adds something it will give this gentle feedback and we will be brought back here and on that page we should now show our card foreign we've done a lot of fake stuff in this UI clone but this time we're going to use something actually real so we're going to implement State Management and we're not using Redux or anything like that but we're using two stand and I've shown this in a stream before and there's a course on Galaxies about this as well and it is a really amazing package to manage our state so let's go ahead by installing two stand first of all which is by the way the German word for state so I'm going to say the German Way Tucson which is probably hard to pronounce for some other people the concept is pretty easy we create a store and in that store we have our values or functions that could change the store we're going to also use this in a typescript like way so that will make it look a bit different is there actually a typescript example I thought there was like a typescript example there's a lot more about this that you can learn about middleware and all cools of uh sorts of cool things so this is what we need uh we're going to create this little State interface and wrap this around our uh store but the cool thing then is that we can just inject this hook in any page just like that we can use our store and get like the current items in the car the current total value we can add something to the card or remove it and it is going to be really really easy so let's do this with a little touchdown bear and we're going to close this and we're going to actually add a new file so I'm going with the new file under store slash Basket store so this is our best kit and this is going to be a typescript file cool now inside we're going to first of all import the create function like shown from not mob X close enough copilot close enough um and I also want to export a little interface for a product so we could have probably done this before the product did we did we enter just have like the product interface somewhere already like we got this from the from the TS file yeah um vs code just inferred that anyway uh we can create our interface now which is the basket that they call this the basket store or state a store yeah it's a store so this is going to be the basket store um but actually uh the interface is not the basket store the interface should be typed script so typescript usage the interface the state so I'm going to call this one state uh and our state now has a few functions so we're gonna have our items um and yes this could be an array of products but I actually want to have the total number so I really just want to make it easy for us to know how many items so what's the total uh value and how many we got like these will be total super easy numbers then we're gonna just have the products and this is not just going to be an array of products this is actually going to be an array of the type product and it's also going to have a quantity so that will make it easier for us because the quality doesn't really belong to the product interface but in this case here for the product we really want to have that information so this is just a little typescript thing then we're going to have a function add product or an action what it's called and this action will add a product to our store then we're going to have a remove product function actually I want to um let's pass in the product let's make it unify so it's always using the product and I'm going to call this reduce because it's not really removing the product we're just going to reduce it by one and then we on also add like a clear card function that doesn't require any arguments and we'll just uh return void cool this is our state with that in place we can continue to actually Define our use basket uh store hook so we're gonna use create we use our interface just like described here and we need a little heck here with these uh brackets so we're going to make sure that we got that in place for um for typescript to be fine with everything that we do so then we have set and we would also have get by the way more and less on in the Galaxy's course but we don't really need this uh in today's example here I think we need a third one to close here I think that's it so let's start easy this is the default State or the initial state of our store we won't have any products the items will be zero and the total will be zero as well then we're gonna have functions for add product uh we're gonna have one for reduced product and we're gonna have one for Clear card so that already satisfies the interface that we created for ourselves and now we just need to implement these functions and then we can use them from everywhere in our application it's going to be ridiculously easy the easiest one is clear card actually so let's Implement our clear card I'm going to wrap this in the set function which is the argument that we get here and what we want to set is we want to set products items and total back to zero so I think we I don't know if we have to return I think this will return it in the right way already so making it quite easy the ad product is a bit more complicated the problem is that um oh this is interesting I don't want to do this uh I really don't want to let's write this on our own I don't trust co-pilot on this uh yet what we want to do is we want to check if we already have that product in our current product state so that's why we have access to the state here um we also want to update our values here so maybe we're going to do this first so state DOT items get one more and state the total gets the additional product price now we're going to check if we already have the product uh by using find on our current products if we find something uh we're gonna have to update that value um actually yeah um is that right let me let me think about this if we have the product we're gonna up its quantity and we would return um everything therefore the products everything I don't know if this is going to work I mean we can try but I currently don't think it's going to work like that anyway in the else case uh what we want to return is for products all the products we already have plus the new product with a quantity of one so that is definitely true for this case so I don't trust this one entirely um but maybe maybe this is a sign and then it will just work maybe maybe um so for reduced product uh we're gonna of course set our state DOT oh no no no not that uh okay yeah we still need to wrap this so I forgot about the set function so set we want to set the new state and we always need to be careful that we don't overwrite anything else but usually I think by default bear or two stand it's not better the bear is just the banner um by default it will not override the rest of the state when we use return in here so uh we're gonna set the state DOT total and reduce it by the current price and then we also need to remove an item right um yes I think so yes should work okay then we can return our object and we're gonna set products to a map so we're going to iterate the map uh iterate our products if we find the product in the current product we reduce its quantity otherwise we just return the element and what we're going to do afterwards is so after this map block here we will also add a little filter block and we're going to filter out all the objects now which have a quantity of zero so imagine you have some items in the car you reduce it by one and the um the amount of the item goes to zero in that case I don't want to have that product anymore in my state products so that's why we add this filter block which will filter out all the products that went to quantity zero so I mean it can only be one um and probably there's a more effective way to handle this and it should work also will this work um yeah we're gonna see I have some questions about to co-pilot if this is the best way but we're gonna see this in a second so let's now see how we can use this in our dish page we can now use that so we can use uh and extract add product straight from use whatever we call this use basket oh if I I guess I forgot the export right yeah at the bottom you have to follow up with export default use Basket store and now we can add it in here and we don't actually do anything fancy like this already works you can reassign the state to something but we don't really have to so we're just going with ADD product in here uh expected one argument okay this should probably be our item um and the well a quantity of that item okay the quantity is at that point not included right no no it's not a cyanide product type undefined is not assignable to type product well um what's your problem with that actually I want to do this before we go back um let's see let's check this out so in our Basket store um so which of these argumentative type so this is definitely set yeah I mean I could probably set this up here we could do this at the top level because in my case I know that we will always get an item now I can add this probably but we don't really see our card in order to show our card we are going for the details page so on the details page I just want to show this bottom view here uh and by the way I only want to show this view when we actually have items in the card so we're going to make this a bit um yeah dependent on the items that means on the details page we also gonna add or use our hook and we're going to use the items and the total from use Basket store just like we can you just do the import like I did before just just do it the same way I don't want to have these relative like just use my at sign I want to use the cool stuff from Expo that's where we came for right so we got the items and the total up and now we're going to just add a view so we got this sticky segments stuff down here let's probably add sticky segments [Music] and then we're gonna add footer basket so then we're gonna see what's going on so we will only display this if the item's length is greater than zero that's the idea actually not the item length this is not an array items is already a number and now we're going to add a view style is going to be some kind of footer styling yeah I'm going to just call this footer and I probably like I'm terrible at doing the brackets in the right kind of way I really hate myself for that uh I wish my fingers would figure that out in a better way actually I think the footer is pretty much like the photo we had on the dish page so I'm going to grab that footer and apply it in here so I'm not entirely sure if it's going to be the same um but to some degree so let's edit here and we already see it coming up at the bottom which for the smart of you indicates that we actually have items in the card so we just need to display them in the total value um as we can see this should be once again a row layout in the button um so let's see we got the view here uh we're gonna put in another view so this one will have the flex Direction row I don't want to okay this is interesting we'll just go with some recommendations here of um it's enough now enough of the recommendations actually the touchable opacity belongs somewhere else and I'm going to close the view here we see a total of 34. that's a nice indicator let's see oh it goes up to 51 so you see our state is actually working I'm really I'm really excited about this but I want to justify my content in the center and I don't really need to align the items that's actually not required I will just add a little gap of 12 here and yes I can already hear you Simon please put this down there yes I will Styles footer container and I'm going to do this filter container yes and this time I made too many brackets so I can't get that right okay we have a total of 51 showing up there that's already a good start however this is not entirely how it should look like so we should first have a text with the total number of items and that one needs a little styling then in the center we're just gonna say um text view basket because this is eventually going to be wrapped in a touchable opacity and then we just have the dollar total amount however as smart people we're gonna do this with some styling but we already see three view basket and 51 and now 4 and 68. so this should give you a little thrill that you're pretty close to what we wanted to achieve let's add three stylings so we're gonna add a basket styling um let's add another uh basket total and then we probably as always we're gonna have some footer text I think that's going to be just the white text so photo text basket and basket total uh let's start so much styling in here right so much styling it really gets confusing we could have probably done this with some other components but then we won't really reuse them I mean it would give them some structure so after this tutorial you might be able to just like refactor this so this view is not 300 lines long um that I'm gonna leave that open for you so we have the three Styles applied now basket footer text we also have the container styling uh actually I'm going with um yeah we still need the actual link so this is another thing we need let's put in a link component href is going to be um this is actually not a modal by the way just a quick spoiler this will be the basket page so this is just another page pushed to the stack so I will just make the href2 basket and I'm pretty sure you're gonna complain about this um as I'm yeah the basket does not exist so we're going with href like this and then put in a touchable opacity and that one going to be full button our good old friend the full button is back touchable opacity closes here and I think already we we should have the full button styling somewhere yeah we do there we go gonna add that down here by the river a footer container okay so photo looks good uh almost good the footer text color should be white we're gonna have a font size bold and font size 16 yeah why is the stuff here not in a row is my uh question right now I think the full button this time needs a bit better treatment so let's say yeah this should be Flex Direction row and then we wanna justify the content um probably yeah we probably in this case we can really use space between as that will or should put the items to the sides um we maybe uh this button should use the full full space yeah now we're getting there now we're getting there um I do have the padding we have the alignment we have a border radius the only thing is that we don't really look great in there um and also is my footer having the shadow yeah it's having the shadow okay I can give it to that uh but we probably also need to add the either the save area once again again um would it work if I just wrap the safe area around it here let's see let's give this a try we're always here to learn uh it's probably not going to work um why is that the case should it be inside I mean it should probably give us exactly the same result yeah well okay that fixes the problem certainly uh also I don't have the footer container yeah the photo container does not really make any sense this does not make sense so I'm going to remove that and hope I don't break my layout yeah cool okay yeah yeah yeah we're close to the Finish Line um the basket should now have a color of white so this one and a light slightly different background color in fact I'm going to do something unheard of um I'm just going to define a color in here yeah we're really Outlaws today okay and we see we just need some more pitting to make that look good and then we need a border radius of something oh no actually yeah yep a bit like a really small border radius I feel like should be the smallest border radius in the world um our button is really high like why is this so high the full button can we probably just give it a specific heat of 50. yeah that's maybe better uh uh then we should say probably putting only horizontal yeah yeah nice we didn't really need that inside padding so that one makes a lot more sense okay and for my basket font weight should probably also be big yeah I co-pilot you you understand me like no one else okay cool I don't want to click that the value here the total should also be white uh and what cool like if copilot just unders I mean it it kind of co-pilot understands my words as I'm saying them but if you really like would listen to what I say while I code um just a little rent okay we got four items 68. I'm going to add another one and we are at five items and something we're gonna do remove items later for now we should be happy with this because this means our state logic seems to work at least adding products to the state seems to work um and we should be ready now to actually add that cool uh basket page so where do we put this um at the top level I think so let's do a new file basket.tsx react native functional export in our layout file uh we're going to Define this as well just because we can then set the right value for the back button at the top so the back button stuff here and that area up there is what we want to figure out for our checkout or basket view we can already now link to that page from where was that what's the details page that's what it's called um so let's try the final link and this one should open basket now and here we go we're on the basket page I really like how easy it is to use the Expo router for for that kind of thing so on our basket page or on the layout we can now Define this so let's try and find the right place to do this should be down here as you can see you don't have to include this in here as Expo router automatically picks up all these new routes however if you want to do something custom uh like we want to do right now you need to override that entry so name of that page is basket options just like before not opinions these are options and the first one header title will be basket right and header left will be Untouchable opacity I think probably what we already had before an arrow back makes sense colors primary I think this mostly makes sense what Coppola just told us let's see yeah that's that's the kind of Arrow I wanted to have up there so where can you reuse most of the stuff that we had before um and we can go to the basket page on which we are now once again able to Simply grab all the stuff from our store so I can grab uh the products that we have the total uh the clear card functionality and the reduce um product and all of this from use card no from use Basket store right yes okay so that's the really cool thing about two stand uh we got access to all of this without any problems on this page maybe later we're also gonna Define a little order so let's already do this um we're gonna set the state to folds so we can then update our view based on the order that also means I'm going to wrap this in an empty fragment and if we do have an order um then we're going to show something like I don't know uh text cool order so let us still to do um additionally we're gonna have that order yet that's our main priority and it should be long by the way in the fragment we opened otherwise uh react native will complain about going with okay let's check this out what can we do I won't do all of these things so I will just do like a little list of items such as like a header then the list of like element and at the bottom we have this checkout thing um I'm going I think with uh how about we just use a little flat list in here pretty easy and then we can Implement all uh all the things we actually need so let's give this a try we're going as I said let list actually we can close this in here already and I'm pretty sure we're going to use some styling so I can't Styles equals style sheet from react native dot create uh yes we're going with the container definitely and the background color of white at some point already close to this to make it work cool now the flat list as you can probably remember we need to pass in some data and the data will be my product um the flightless is not that picky about like the section list where we needed the specific setup so we can just use it like this then the only requirement here is a render item function in which we access the actual item and then display our view so we're going to put in a simple view element and let's just try to put our stuff on screen so it looks like we added these three things to our card before let me add something else like a pizza salame did we add that before I don't know uh the you know date let me all of that is here great um if we use it like this probably you use some sort of row styling so let's give this style styles that row and that row should probably have a flex direction of guess what off-road gopal and you're right you're right with that um I'm also gonna set the background color for now to let's set it to White yeah because I was actually not using the container I think uh let's get rid of the um okay we see yes that looks good they have white row uh we probably also want to add some padding to it so let's add a padding of 10 add spaces them out a bit more and a gap between the stuff in that row 20 because besides the item name I want to actually have the quantity as well so the first text will be item dot quantity and then times the item dot name and at the end we're going to show the price item dot price item dot quantity and add a little dollars okay good start if you want to make that middle part take up most of the space you know the deal set the flex to one so it takes up all this space here additionally we can probably also amp the font size a bit on this view so I'm going to set this to 18 I'm going to do the same here but this one of course has not Flex of one first one we'll just get um color primary colors dot primary oh oh I feel like we've added the wrong object no I actually did the right what's my primary color oh sorry about that and here we go okay now it's better looks good but I also want to have the font side on this view I'm going to dirty okay that's a nice list I now also want to render the header above like um the items align I feel like they're not aligned online he likes I made a tiny tiny little difference um so we want to add a list header component that's the cool thing again if you have different items that come before that list or after that list uh you would do it like this so for the list header component let's just add a text element with items so that should show up there right and we're going to give that some section styling so Style Style dot sec put this down here so that's like our section header copilot what we give in that case something like this yeah I think that should actually look fine uh maybe also some heading horizontal uh probably even more but more yeah feeling too much whatever I I can't figure out the right place for this right now I feel like somewhere here maybe actually nowhere yeah well let's just keep it in there so this is our header I also want to have these gray borders once again um so we need the item separator as well so that's really a lot about the flat list like just getting used to how and what we can do with a flat list is pretty important so that's just going to be and I don't think we need it like this um do we uh that's interesting for the item separator component actually to run Ah that's cool but I don't want to use that color I want to use colors dot Gray makes it a bit more yes it's cool uh okay we got the list header we got the item separator um and I want to also add a footer component so let's do this here list footer component by the way did you notice that we just without any problems uh use our state like that's pretty cool huh um you totally didn't notice it and you thought using the state was hard right no it's not it's not with two stud so let's just do a few things in here uh I want to do like a total roll with the values I'm just going to call this style dot total row okay to make sure that we don't mess up I'm going to add the total row styling down here so for the total row we're gonna use the same again Flex Direction row justify content space between a bit of padding I think we use N 16 I don't know and a background color of white so with that total row I can now add like the different additional subtotal service fee or whatever down there um okay we got the view text um do we have like a style for total I don't know subtotal and then we do I don't really know I think that's actually a subtotal give the bigger probably I feel like we should do something about this um we're gonna give this a bit different color so the text will get dials dot total and we're just going to use like a medium gray colors sticking out like the other stuff uh yes font size will be this color will be colors dot medium yeah you figure that one yep okay maybe maybe we can do like medium you can argue about yeah well I will actually keep it to medium that should probably be something between those but for now we're gonna keep it um also I want to have a little border at the top so I'm just gonna do like a fakie one here uh let's do a view Style eight of one and the background color of gray uh Springs uh bring somewhere yeah and we need to go back okay now we have that border up there actually we could add that to our header component as well to section I don't really want oh no I closed it we're just gonna just gonna continue and wrap this so we have this one total row I'm just going to copy this let's say uh now we have a service fee and we're probably gonna add like a little Feast object really we're trying to make it at least somewhat dynamic so let's make the second piece we're going to add a service key service of 299 and we're going to add a delivery of whatever 5.99 and then we can use this in here fees Dot what was this service and then we're going to copy this and make it a delivery theme and delivery okay so I got the three different fees down here and then we should have the order total as well uh or the total so this is the final value and that one will actually get a bit bigger on weight to make sure that people see what they're ordering and this is going to be um the total Value Plus is that Service Plus fees dot delivery and that looks good here that point this might give us a strange value so I really would like to put this in Brackets I've seen strange things in other applications and I'm going to say to fix two just in case I want to make sure that we round this to two digits not the perfect way but here we go this is our list um and if I add something to that deal wants another vegetarian we should see that the price changes and everything else is updated as well um now let's add below this flat list okay let's see where the flat list starts and ends yeah we've wrapped this in the empty fragment so we can now do another view which will become our footer so once again style is going to be style dot footer full term and can we probably copy this I mean we should be so let's copy our footer from somewhere we used here and we probably also need full button in the foot root I'm just going to copy all of that we might have to apply a change here and there but it should be a good starting point for us nonetheless so that shows the footer down here did we add the save area view inside does anyone still remember uh yeah we kind of did it so we're going to apply the same thing in here again and close the save area view make sure you add the import okay I feel like we did not add the right import why are you complaining about the edges because there's no content inside that could be a reason so I'm gonna put in a touchable opacity definitely opacity from uh react native um style will be of course styles.full button okay on press uh we're gonna actually place our own order on press so I will not use set order I will use like a function start checkout and we can Implement that in a second because this is just going to be a little fakie here and start check out will do something and then we have the button down here uh the only thing I want to show is actually not that I want to show uh place order yeah I think what did they do let's just call this order now okay that should show also our text in the center um so let's check out the full button I don't want to have Justified content space between uh you don't really need Flex Direction row align item Center should be fine flight one eight pool the text is cool as well I only want to have just five Center now the order now is fine that looks better and we have our basket plate pretty much finished already um see do we need anything else in this case uh if you're pretty good about this one um see I actually don't think that should be fine we have it now of padding and margin why are you mad about like my edges what's the problem with the safe area view on this page like we added this on all the other views and you've always been fine and now you're complaining about oh okay yeah I need to edit from react native safe area ah good point not from react native make sure people to import the same area from react native save area context instead and once we got this we can place an order which would by the way clear our card so that would be a nice place to give this a try um so I'm going to set my order true I don't really need the other and I will clear the card so let's see and we're back to my cool order and also we now see that we don't have elements so the whole state management thing seems to work in our application again adding something shows it up we can go there and we see our items so we have the perfect implementation of our state Management in that app so now there are just two additional little things that I want to do on this page first one is we're going to install another packet um so I'm gonna I don't know what this did but eventually I'm just gonna back here so we're gonna install the react native confetti Canon I'm really a fan of the confetti Canon so let's add this to our uh basket page up here and we have to add that element somewhere on our page so we kind of I think we can't just start it so therefore when we have an order uh we're gonna show the confetti Canon um and there are some default settings like 200 pics elements we can set the origin to some place close this we have the full speed we have Fade Out true and I'm also gonna set this to auto start uh true so this will only start when the order becomes visible let's see once we place an order Kaboom we have confetti I just wanted to have some fun police people uh let me have fun okay so I'm gonna add this again and then once we are done we will also display like some some random order information uh we could just play something like an additional little View I'm gonna do the most styling now in here I'm going with margin top of 50 so I'm just gonna like to the middle of in the center and close this and actually I'm going to set my order to true so we can better debug that so yes then I will get like the immediate confetti that's not a big problem the most oh and region what was that it was interesting uh the most important thing is like adding a little text here that should also get some style uh thank you for your order yeah sounds good let's just go with that if I hit save show up and then we're gonna add another button which brings me back so let's use the Expo router href brings us back to the initial page as child as we wrap some touchable opacity inside um style I don't know we're gonna probably do this like the order button again and then put in text styles that could probably be the footer text footer text we had that before and let's start uh New Order text we should have the yeah we do have that oh yeah it's Style and the order button should be the same like the uh full button some padding we need to board our radius we need to align the items that's good uh but I want to make that a definitely bigger let's say I'm going with the width could we probably is this inside a flex layout um it is but then not again we're just going to do this now in an absolute way so you're just going to set the width 250 and the 8 to 50. oh come on you had it co-pilot uh 8250 and then we need to align the items in the center content enter and it should probably have some margin top can we do where do we left it uh yeah let's give that one margin top at least okay thank you for your order brings us back so let's try this one more time we go here it says thank you and we can do it in New Order um I'm gonna set this to folds or no so here is my card I would have some items I would click order at that point here and start checkout you would submit this to your own backend as we do like a little fake thing here we're not really doing this um but we can place the order we get the confetti our basket should be cleared and all the items are gone so yeah we made some abstractions but overall the whole flow of adding stuff into stand now works cool so you see there's just one tiny little thing left uh that I want to show you so I'm gonna one last time no I wanna keep it for now I mean we're pretty close to the to the Finish Line the only thing left is that we can't do like we can only clear the whole card we can't remove single items and usually this is a perfect place for a swipe to delete and how can we Implement that well that's not that but if we check we change it um or the react native gesture Handler here and the software mentioned GitHub repository they have some cool examples for a swipeable row an apple style swiper below and there's also a Gmail styled swipeable row and I want to take this row here because it's an example I'm going to copy that over to my app and we could probably do this in a slightly better way but I want to make this my own so I want to have some customization anyway I'm going to call this swipeable row dot TSX I'm going to put this in so by default this is not throwing any errors we have already the react native gesture Handler so all of this is cool if we now simply apply this it should I think already work so we need to go to the basket page and on the basket page uh we're gonna wrap this in the render item so when we render this row where's that place okay it's here in the render item I will wrap this whole thing in a swipeable row that we just added uh it's called Gmail swipeable row I feel like I don't want I just want to call this um swipe a little row and not Gmail [Music] why people roll put this around the view here and I feel like the part is messed up and of course you're making an ad and then and okay um without any change we have made this a swipe a little row this is so cool and it works really really nice now there's still a bit we have to customize as I said that's why we brought in the component however um is there already like an on the elite uh no the road doesn't have that yet so we're gonna get into that swipeable row and we actually actually it has buttons left as well we don't really need that so I'm going to remove the private rental left action as that part won't be relevant um the whole thing here so we don't only need the render right action uh this will on press this Dot close for inside we don't really need an animated View and the only thing I want in here is like an ionicon uh name trash outline size 22 color white let's see yeah probably a bit more margin um Style margin right of I don't know something now if I do it that's in the right probably Okay cool so we made our first customizations because this is really easy to customize uh we have to swipe of the row we have an update and we have a close um and then we have the render function and what I want to do here so render left action does not exist anymore uh we have the friction we have a left threshold that's cool enable trackpad two finger gesture render uh right actions and we have the children we also don't really need the styling for left action in that case anymore um the rest is think pretty fine and we also don't really have the action icon anymore we only have this one it's also using uh right to left that's cool I don't have a problem uh with that what I want to do is I want to add a function that when this is all done um it looks like we are not using scale by the way when this is all done it should trigger a function that we pass to it in the props uh and therefore we're gonna change the signage so we have the extends props children unknown and but they're gonna be another prop that we want to add so we're going to say end and there will be an undelete function that I will pass to this property to this component so we're gonna be a callback void here and it should essentially be enough for us I think um and when we close this so This is called uh when we press that button we could also trigger this at a different point if we wanted to we're gonna then call this props on delete so this is my trick here now I'm going back to the basket page which complains because we have actually not added that on delete so let's update it here on delete what do I want to do on the elite well I want to call the function from our state uh from our store use reduced product so we're going ahead with reduced product and reduced product will be current item right yeah I think so and with that in place let's see let's add some some more stuff to the best I'm going with this one let me live and I can also hold you living your best life of times so then we can see this probably better so living your best life is three times in it anyway delete it to changes and everything it just work and we have that swipeable row um when it's I think yeah we should probably implement that at this point it should also delete it uh that would be a little addition but so far I think pretty cool it filters out stuff that is not included anymore and we just have the whole functionality of our state now in place and we can also of course trigger an order which completes our full flow so I think at this point the UI clone of that app is pretty finished as we've implemented all essential functionality all right and that's it for this massive build going to be 4 five hours long I haven't checked yet but if you've made it this far congratulations you should have learned a bunch of skills about react native in general about routing using the Expo router about State Management animations how to build views how to use sectionalist flat list use Google apis we've learned so many things in this tutorial so I hope you enjoyed it if you did so please subscribe to the channel and share this video that would really help me a lot and of course if you want to learn more if you want to take your react native skills to the next level and build up your career as a react native developer go check out galaxies.dev this is my online school focus on react native and helping developers just like you get into react native use the latest packages and build awesome amazing cross-platform apps don't forget to hit the Subscribe and like button and leave a comment if you want to see more of these huge clone applications in the future hope you can replicate everything and I will catch you in the next video so until then Happy coding Simon

Channel: Simon Grimm

Views: 58,391

Keywords: react native tutorial, react native course, galaxies, galaxies.dev, simon grimm, expo router, zustand, reanimated, learn expo router, expo router course, react native parallax, react native bottom sheet

Id: FXnnCrfiNGM

Length: 296min 8sec (17768 seconds)

Published: Tue Sep 05 2023