🔴 Let's build Deliveroo 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io)

[Music] another stream that's crazy it doesn't even warn me now before i go live so that's why it has a little bit of a weird pause but we are live we are back on the channel it is exciting to see everyone in the chat right now absolutely popping off if it's your first time here smash the thumbs up button and subscribe because you're in for one hell of a treat that was it just threw me straight in but we're good we're good let's do this right guys welcome papa fam to one of the biggest react native builds on my channel i am so excited to bring you something big today welcome to the delivery 2.0 react native clone powered by sani it's gonna be a hell of a lot of fun guys this is your demo of today's build enjoy papa fam let's kick it [Music] check it out guys look at this build right now like this is so clean i kid you not we have full delivery functionality so i mean i don't know if you've used delivery wrap i love it i use it all the time i'm ordering food left right and center but you guys can see right here we have a web version we have a react native version this is working for ios and android okay this is gonna work across platform one code base let's go ahead and add some items to our order oh look at that i want a katsu curry i might get some coke and let's go ahead and view the basket boom beautiful ui everything is completely modifiable you can remove things from your order add it to your order we have all our calculations being made let's go ahead and place them on now guys are you ready one night well you can hear the excitement in my voice right when i click this look how clean the animation is about to be right so we haven't implemented the payment stuff we're just gonna basically dummy the payment but check this out i'm gonna go ahead and place the order pow look at that wait for it wait for it oh my god like it is clean as hell and you're gonna learn how to do all of that in today's build that's a fully functional map by the way so everything's there we've got wagga mama pinned on the menu and yeah for those of you saying but is the driver not gonna pick you up we only have three or four hours on this live stream so i've done up to a certain point and then the rest is up to you guys but this is going to be an amazing project to have on your portfolio smash the thumbs up button but it is really honestly i'm super proud of this one and if you guys can see here even on the web it's actually working the same so you don't have like animations because it's a website or for this one anyway and you can go ahead and still use a website like normal view the basket do everything that we expect if this is exciting to you guys smash the thumbs up button let me know in the comments right now who is excited and yes building this app made me very hungry a lot of the time because i'm sitting there staring at you 24 7. but yeah i signed law says web page and app holy from one code base so you're going to be learning about react native today so i'm going to go ahead and list down all of the cool things that we're going to be doing in today's video so that way you guys can go ahead and get excited for what's about to come so i'm going to go ahead and draw it out on the screen right now we have let me see if my brush is working there we go screen brush is the brush i use everyone always ask me that question we're going to be learning react native today okay so react native this is what is powering what you see on the screen right so it's absolutely massive build with react native one code base will compile down to everything that you guys see here then we're going to be learning redux because i hear you guys you're always asking for it you always want to know more about redux so i've incorporated redux in today's video as well we have tailwind css now if you've done any of my builds i know literally over half a million of you have done the uber clone incredible stuff we use tailwind css but i've upgraded things today we're using a different css module and we're actually going to like sort of change around the babble um the babble steps which basically allows us to do the full tailwind css experience on react native so i'm going to show you how to do all of that okay we've got tail and css in the house we've got react navigation so i'm just gonna say react navigation rank native navigation so it's really react native navigation so that's gonna allow us to have all the routing inside of our apps you know when the modules pop up all that kind of cool stuff so right now you can see over here bam that popping up all of this we're going to be building with react native navigation we have got the entire build powered by sanity now this video was made possible by our beautiful friends over at sani the best content platform right now on the planet it's bloody powerful right so i want to go ahead and let you guys know we've actually teamed up with the guys over at sanity to bring you double the free quota plan so when we do go through the build today i want you to go ahead and make sure that you use our special coupon flag when you're setting up your projects that way you get double the free quota now what is sani and how is it helping us all right in today's video you can see we've got all these different restaurants on the screen this is all being pulled in dynamically from sani's back end right whoa we got mailing thank you so much blessing popcorn hello saying thanks for this welcome thank you for tuning in so we can see all the restaurants get pulled in here all the dishes are also stored in here and as you can see if we check out the restaurants right here this is known as a content management system so if i was going to wagamama right now i can go ahead and update all of this the address of the place the star rating which category it falls into and also the dishes that appear on the menu we've also got different menu categories so all these menu categories right now this is how we are getting going ahead and seeing all of the beautiful ui updates on the front of the screen okay so really really powerful stuff right now and then the final one which is actually a nice little icing on the cake notice how we have these three sections offers near you featured and tasty discounts so this is how we go ahead and list out the restaurants in each of those sections right so we're making use of we're making massive use of sani eat cms right now and everything is looking pretty pretty damn good while doing that right so basically if you want to go ahead and learn more about sounding ecms make sure you check out sani.io again as i mentioned massive content platform really cool real-time features me and jay were working together on this while we're doing this check out the website but you know how we like to do it on today's but i'm going to show you how to use it how to implement it you've done it in react you haven't done it on react native before on this channel so today's going to be a new experience for all of you so yeah we have pretty much all this stuff going on right now we've got hero icons to power up all these beautiful icons we have the maps at the end like you saw we do have the animation so i'm going to show you another demonstration of that one more time and then we're going to jump into today's build so i'm going to go ahead view the basket place the order bam that beautiful animation i'm gonna teach you how to do and then we're gonna go ahead and compile this all build it all so that way you guys can get this on your cvs on your resume and you can go ahead and impress somebody and get your next big job okay so let me know if any of you proper fan members in the house today are ogs you've been viewing my videos before you've got a job from the gigs or done whatever you've done from watching these tutorials so it's awesome to have you here and i'm always privileged to be teaching you guys check it out as well sunny sangha that's my side hustle delivery rider um let's go ahead and jump into it so first thing we're going to do is a vibe into this now first i want to say welcome to everyone we have over 300 people across platforms right now which is absolutely incredible if you are watching smash the thumbs up button we've got loads of people getting hyped up right now smart effects it's mind-blowing well done sunny thank you so much for tuning in dude uh there we go right let's go and this is only going to be the client side app yes we're not we only have a certain amount of time on youtube so it's not it's impossible to do all of that and like the the client side the drivers work and stuff so i'm going to show you this today it's up to you if you're going to take it further okay so let's go ahead and jump into today's build right now firstly i just want to mention remember i was talking about that tailwind css package in case you're curious this is what we're going to be using patel and css react navigation is what we're going to be doing but we're going to be starting off our react native project with expo if you've never used expo definitely worth checking out if you are building something like an ios or android app when you're using react native you can do it the bare bones way which was kind of the old school way of doing it or if you need absolute control over everything then you can do it that way what i would recommend start with expo which is basically imagine it like a wrapper around your react native app allows you to use simulators easier allows you to use uh as you compile down to web as well really amazing experience when you're developing an ios app and you're going to find out today just how easy that is so first step i want you to do another one yeah oh i'm a pop star thank you for the donation kashal mondal totally love you your bills are helping not thank you so much guys i appreciate the support let's get to a thousand likes in today's stream in the first hour let's do it i think we can do that easily right so we're going to go ahead and jump into the code right now so as you can see what we've done here is because we're going to be stopping the simulator while we build the app i've actually got screenshots of the entire app so that way we can go ahead and build this out by using these as reference and this is also a good kind of idea to get used to seeing some designs for example in your job or freelancing plan and then we're going to build that out right so i'm gonna show you how we do all of this cool stuff okay so first thing i want you to do is go ahead and do this command npm i expose cli this is gonna allow you to install the scli tools onto your computer so first thing i'm gonna do is open up my terminal and what we're going to do is i'm going to open up a separate terminal and what i like you to do guys is always make sure that you're actually putting your sort of you know your projects in a place which makes sense for me i like to go into my documents i like to put in the builds folder okay so right now i'm inside my builds folder and i'm going to go ahead and run that command that we saw earlier so i've already done this right now what you may have to do is type in sudo s-u-d-o before this in order to make it work right and that will ask for your permission to put your password in and it will install this now this means that this is going to be used like you'll be able to use the extra cli throughout your any project on your computer okay so let's go ahead and start the project what we do is we run mpx create expo app if mpx doesn't work you need to install node on your machine okay we're going to go ahead and do this and we're going to basically change out my app for the name of our app so i'm going to go ahead and say mpx create expo app and i'm going to type in simply here deliver clone okay delivery clone and let's go ahead and hit enter so at this point that's going to spin up our app for us right so this is creating a template or a starter project for us and it's going to go ahead and set up all the dependencies all the kind of things that we need to get off the ground so that way we can start building out what we need to do okay now as i mentioned if this is your first time with react native what do you need to know okay so react native essentially we're basically using react but in a different kind of environment which allows us to compile it down into ios android and web okay so usually when we build a react website with next gs it's usually just for the web or progressive web app in this case when we use react native and expo together we're actually going ahead and creating a code base one code base which compiles down into all three platforms so this is why it's react native as opposed to normal regular react the concepts are still very similar you can pretty much go ahead and use switch between them very easy okay so we've gone ahead and done that we're going to go into the delivery clone right now and what i want to do is type in code dot and this is going to open up my vs code on my screen right now and allow me to get set up with a starter project okay so what i want to do now is i just like to kind of neaten up my environment so that way we're not kind of you know messing around too much over here so i'm going to go ahead and push this onto a separate screen we can actually close this if your code dot command didn't work i highly recommend you go into vs code command shift p and type in install and you will get the install i'm using the beta version which is why it says code insiders but you also say install code command and path and then you can use that command okay so quick introduction into what template we just got ahead and got set up for us right so check this out and guys oh we just passed 300 likes thank you so much keep smashing those likes let's keep getting up thank you so much alex thomas i appreciate you dude thank you for tuning in all right so the way it works is we have app.js which is our starting point now as you can see mp we're using package lock right so i prefer to use yarn but it's okay you can use whatever the hell you want it doesn't matter as long as you just stick to one of them okay so what we're going to do here is what i need to start this app up okay so the way i start up is command j pull up my terminal and what i want you guys to do is go ahead and type in expo start now before i run this i'm going to cut off my old simulator which was running but previously so this is actually going to stop my server from running ctrl c to do that and then i'm going to go ahead and just make this full screen so this is now our reference kind of you know screen and what i'm going to do here is type in expo start on my project okay now what this will do is it will spin up oh thank you kojo for the five pound donation amazing stuff already 320 likes what is happening well we just started the stream and there's already 320 lives thank you so much guys this is awesome all right so now you can see over here we get this qr code and what's really awesome guys is if you download oops if you download expo go onto your phone okay so literally just your regular phone download expo go that qr code that you're seeing on the screen all you have to do is scan it as long as you're on the same wi-fi network and you can code and literally develop on your actual phone or your device so this is amazing if you have windows and you want to build an ios app for example you can use your iphone to go ahead and be your development tool so that is an absolute game changer really really awesome stuff okay now what i want you to pay attention to is this so you can see this comes up with a bunch of things over here now you can go ahead and open this up on in your safari or chrome but what i like to do is use the cli as my sort of tool when i'm coding so if you ever lose this right press question mark and it will show you all the options that you have on your screen so you can see open on ios open on the web and that kind of stuff i'm going to go ahead and press i and this is going to open on ios if you are on a mac you can do this or you can use android if you're on windows but you're going to have to install you have to basically open up xcode on a mac to go ahead and set up the simulator uh just in basically open xcode once agree to whatever it is that you're asking you and then you'll get access to the simulator okay and then that way you'll be able to spin up your own simulator same with windows but you're gonna have to install a java environment otherwise you can go ahead and press w to go ahead and open up on the on the web but for now we're going to go ahead and simply do it on ios so i'm going to go ahead and see open up one hour so i hit the i key and it says opening on iphone so what i want you to do now is go ahead and i'm going to bring my phone over to our code base over here okay now what i want you to do is if you ever get into this situation where it kind of isn't responding or like this kind of you know setup so for example i press ios and nothing's happening it says disconnected from metro press r to refresh and as you can see i have a clear connection now so it's downloading the javascript bundle and you can see what it does is it's building out this bundle so my code base is now compiling into an ios code base and that's how it's going to load up on an iphone okay so the only difference that we really have here is rather than using things like div we're instead using view right that's pretty much it kind of very simple differences here right and that's because that view is going to compile down into a div on the web it's going to compile down to the appropriate container on our iphone and the appropriate container for an android device that's why we do what we do with react native okay so command j we can hide that now you can see we've got our app up and running on the right so this is a great starting point the first thing i want to do is i'm actually going to get rid of the style sheet over here so you can style like this i don't like to i'm going to use tailwind css it's my go-to in a situation like this i'm going to get rid of this right here and now the question might be naturally well how the hell do we actually go ahead and start with react native now it is up there by the way it hasn't disappeared right how the hell do we go ahead and start this with right now so for now i'm just going to leave that in there while i get this up and running and then we can go ahead and test it out so what i want you to do first things first is we're going to set up tailwind css into our app okay so i'm going to go ahead and get everything on the screen now so we're going to be using tailwind css react native this library right here so what i want you to do guys is type in simply type in npm install tailwind css react native okay so if you go to uh installation you can actually go ahead and check everything out and they'll give you some nice and strong installation instructions right so in this case you can see we actually gonna need two things we're gonna need tailwind css itself and that's a developer dependency because we don't want to have that in the production but i'm going to copy these two lines and we're going to go ahead and pop this onto our code base right now i'm just going to move things around because right now i don't have my setup the way i want it and there we go come on jay so while we have our bundler here i'm going to open up a second terminal there this is how i like to do it and i'm going to say um paste it so i'm pasting those two lines into we're installing toe and css and tail and css react native okay really really nice stuff robin says maybe you wanna load the music a bit awesome stuff dude dropped it down just a little bit so hopefully that should allow you to focus a bit more okay so at this point now we're gonna go ahead and that's installed so command j to hide this and i'm going to show you how we do this now typically you know it just kind of works off the back right usually you install this stuff it just kind of magically works instead what we're going to do now is we actually just need to do a little bit of a a kind of extra step here right so what i want to do is firstly i want to go to our um tailwind config file so 101 requires a config file and it's actually gone ahead and it should have come uh set that up set that up for us um let's have a look i think it did last time okay interesting we can do that anyway so i'm going to go ahead and create a file now so create a file at the top tailwind config and what i want to do here is simply copy this in like so okay so i'm just going to go ahead and pop this in like so and paste it in nice we don't need anything else here so that's pretty fine as it is and then we need to add something called a tailwind provider into our app okay so what i'm going to do now is actually go ahead and i did actually do this a slightly different way i did a barbel last time i think um i want to do the bubble way i think because this is kind of a cool way of doing this um instead yeah okay let's try this all right so i'm going to go ahead and firstly go to our code so babble.config.js i'm going to copy this plugin right here so over here and i'm going to pop it in there so tell me css react native bubble okay then what i'm gonna do is you can see after that initial step we don't even need to add anything else okay so now what we can do is we can actually use class names just like we normally would inside of our code right so this is what's really cool about this right so if you've set it up correctly now bubble is basically going to be like the step before it goes ahead and builds the bundle it's going to replace out the css class names all that good stuff so let's test this out and see if it did anything if i type in class name oops last name and what i want you guys to bear in mind here is it you should have the tailwind intellisense css extension so have this extension it's going to make your life easier whenever we're using this right guys we're nearly at 400 likes already this is ridiculous thank you so much this is crazy stuff right so let's go ahead and type in something like text red 500 and let's see if it works right so text red 500 let's actually restart our bundler because we've actually gone ahead and we've changed babel config so you can see it says restart the server to serve the new results so whenever you change something like your babel config you're gonna have to stop your server and restart it again so expo start and you're gonna find guys that naturally when you're coding inside of uh react native it's gonna be something like you're gonna have a lot more kind of you're gonna need a lot more patience put it that way i'm just being honest with you it takes a little bit more patience but it's worth it pascalia it's getting really hot in here sunny's voice makes the cold rain day much better here in sweden much love broski thank you so much i appreciate that all right let's check this out uh do we use bungees i have read about it but we'll talk about that in another video dude all right so i'm going to click r to refresh and it's rebuilding the bundle and let's see if we get some red text so text right now is not working the way that we expected it to um let's just dive into this a little bit more so first i'm going to get rid of this and let's see we're going to do a little bit of debugging right now so let's go ahead and get rid of our style and like so okay so not working right now um slight little mix up but we're going to fix it i like this anyway we're literally starting off with a bit of debugging it's all good i like that all right so we've got i'm just checking through my plugins this is all good babble config let's go ahead and check out our babble config so over here we have api cache true tell when we are native bubble okay and then what we need to do is go ahead and let's just check the installation steps one more time so we've got our extra config thing over here let's go check that maybe i need to wrap it in the provider i think i already did this now oh no okay my bad my bad i missed the biggest step okay so let's go over to app.js and we need to obviously yeah my stupid mistake right we need to wrap the entire app in a provider so this is a higher order component pattern so tailwind provider wrap the entire app in that tailwind provider okay so now once we've done that we should see if we go ahead and um let me go ahead and actually refresh this properly now um so command j r to refresh let's see all right text red um that's interesting why are we not getting this all right tailwind provider is working all good let's actually restart now because i've actually completely changed things up okay will this app have push notifications not this app no because we have quite a lot to actually build to get this off the ground but um in a future video 100 we can do that right i'm just going to go ahead and check right so we've got module exports awesome stuff uh we've got our bubble config looking good and let's just check our dependencies to make sure that everything is set up the way that we expected it to be we've got 101 css and we have tailwind react native awesome stuff okay i actually really like debugging as stressful as it is on on live um because it shows you guys the reality of actually coding right when things don't work all the time things kind of mess up i just don't like when we can't figure it out okay so at this point slight error let's figure out what's going on so set up compilation time we're going to get tomorrow player to the da we're going babble we did this already so let's just go through one more time right we have already done this module exports we've already done this as well screens pages oh my goodness okay my bad right so the reason why this is occurring is because right now we're not targeting any of the correct files okay so my mistake so at this point what we need to do is i need to introduce the concept of screens right which means we're going to introduce react native and navigation and then what it will do is it will search those files so screens pages components and then it will go ahead and actually compile that file into if we have if it finds tail and css code and it will compile it down so that makes perfect sense so now what we're going to do is i'm going to introduce react native navigation so this will actually work out pretty pretty nicely okay at least we know the issue at this point we're going to install react native navigation okay it's actually very simple to do we're going to go over here to our second terminal and we're going to go ahead and bring this on rpgs i like live debugging hey awesome guys let me know where you're watching from right now because we're about to blow past 400 likes already i love seeing you guys tuning in from around the world we've got chile in the house as well let me know where you're watching from right now all right so we've gone ahead and installed that next step is to go ahead and as we're using an expo manage pro project we're gonna go ahead and use a special expo command to make life a little bit easier so we're gonna install all the dependencies that we need morocco in the house what is up installing two sdk compatible versions awesome stuff we have that and then what we need to do is go ahead and because we did the expo project we don't need to do this second one right so we can kind of skip past this and as you can see we follow this pattern of wrapping the entire app in the navigation container so now what i'm going to do is go up to the top import my navigation container whoa look at this south africa nigeria russia india paris egypt italy what south wales what's up nepal uk sabas what's up ghana switzerland zurich in ours oh guys this is incredible australia for the win what is up this is amazing to see all right now i'm gonna do is i'm gonna wrap the entire up what the hell that is crazy dude thank you 400 likes let's go amazing stuff thank you guys for tuning in thank you for the support always appreciate you guys so we've got the navigation container now navigation container is basically going to be what powers up the react native navigation which is gonna allow us to have different screens inside of our app okay so next go over to the second screen we have to introduce something called the native stack okay now once you get this setup done it's actually fairly easy so we're gonna install this into our project and all you need to do is go ahead and import the following so i'm gonna go ahead to the top of my file import something called create native stack navigate and all of this is on the uh tutorial here as well so i like to show you exactly how we kind of pick it up as well so that way you guys can you have to memorize it you can kind of come back do this yourself when you're ready okay so let's go ahead and we got the stack over here and then what you do is essentially you have something called a stack navigator with different screens okay so i'm going to go ahead and pop in our first stack navigator so we're going to go ahead and get rid of all of this get rid of that get rid of this style over here come on j and then we're going to pop it in like so i'm just going to close this out okay and now inside of here this is where we have our screens yeah ignore their errors right now it's just saying that we can't find any screens okay so the first example of a screen is going to be the home page okay so it's going to be the home screen so i'm going to copy this over here right and what we're going to do is right now i need a home screen so the way we like to lay out our folders inside of react native is typically we have a folder at the top level called screens and then inside of here we have our screen components so in this case homescreen.js and i'm using something called react native snippets so in this case i would like everyone to go ahead pause yourselves go ahead and get this right now re es7 react redux react native snippets okay install that extension it's going to help you out react native functional component that we can export there we go now we have a home screen okay now i'm going to go ahead and go back to him here and i'm going to go to the end of the home screen control space bar and i can do the following and as you can see i get the first screen of our app this is awesome it looks pretty good right again says how to debug brought to you by sunny my main thing guys really is whenever you're kind of coding get debugging stay calm right just stay calm because if you get frustrated nothing's gonna happen okay really really awesome stuff guys nearly at 500 likes let's keep pumping the likes i love this right we have the home screen successfully up now let's go let's double check our tailwind tss hopefully it is all good fingers crossed let's do class name text red 500. and hey it works awesome stuff guys look at that we've got 101 css working inside of react native literally with class names okay so everything is correctly set up now we actually have our tailwind css configured we have our react native navigation already set so first deal of business is we're gonna go ahead and create the home screen okay so we're gonna go ahead and actually set up the home screen get all of this looking beautiful and then we can kind of just piece it together as we need to get each step done so the first thing i want you guys to focus on is i'm going to go ahead and actually pull this to my left so that way we can use this as reference so now what i like to do is basically imagine we had a client they've got uh they've given us some designs we're going to go ahead and actually kind of you know go back and forth from the designs to the actual production right we're going to get it working the way that we want first thing i want to do is i don't want this header i want a custom header you see like i want it to look the way i want it i don't want the default reaction and navigation header stuff so the way we do that is we need access to the navigation object so first thing i'm going to do is use a handy little use navigation hook this gives me access to the navigation object now what i can do is do something called a use layout effect now what this does is it means as soon as the screen mounts so as soon as the screen appears on the on the screen do something okay so this is what this little snippet does you provide some dependencies that means it will do it an initial amount and whenever any of the variables inside this array dependency array kind of changes it will re-fire off but in this case what i'm going to do is i'm going to say navigation dot set options okay and what this will do guys is it allows me to go ahead and modify the default kind of you know things like if i want to change the header title here i think i can do the same thing and say like testing hit save and as you can see it changes the navigation options right so one of those things that i can do is i can actually say don't show me the header right so header shown is actually going to be false that's actually what i want okay that's actually what i want for now it's going to allow us to do what we need to do next okay so now we can kind of build things out now obviously you can see it goes up into the danger zone okay danny nader says why are using javascript to not type script we're using javascript today's video i've done typescript from plenty of other videos yes i'm a big fan of typescript i'm going to be doing random hair builds with typescript today we have so much to cover we're doing it with javascript but trust me be rest assured subscribe and i'm going to do tons of this stuff as well um ben says you could also put a header sean as the screen option in stack and i've gotten the header will be gone for every screen yes you can you can also do it here and change it so that it's a default but i want to have like granular sort of control and i also like to show the different options right but yes you can do that way as well okay so at this point what i'm gonna do is i'm gonna use something called the safe area view okay now i want you to be careful whenever we import things inside of react native you get loads of different potential imports right use the react native one right make that a habit right so there's a few the react native one tends to be the correct one okay so hit save and now you can see safe area view so this is actually gonna make sure that it's basically pushing it into the actual viewable area and even down here the safe view is basically cut off at that point and that point so no matter what phone it will make sure that it goes ahead and does it okay almost at 500 likes let's go guys incredible incredible stuff smash the thumbs up button let's keep popping this in okay let's go ahead and do the phone so home screen first thing i want to do is go ahead and start this out so as we like to do i'm going to go ahead and add a comment and basically i'm going to be building this header right now okay so first thing i want to do is have a view oops a view and inside of my view i'm going to go ahead and have the an image so we're going to have this image then we're going to have to deliver now with current location okay so i'm going to have an image tag and image tags are self closing in react native we can import it from a react native and the way we define an image tag is we say something called the source right so it's not src and react native it's source and here we can pass in the uri and what i've done is i've shortened the urls for you guys so it's really easy for you to copy along so there you go that's the source of the image and then i'm going to go ahead and style this up with some tailwind css now if you never use tailwind css do not worry it's fairly straightforward uh go forward to tailwind css.com and basically you should be the first thing you see there you go i'm just go ahead and just firstly just give this a read right they give they do a very good job of showing you what it's capable of all the different kind of examples of class names how it can change drastically change the look and feel of an app whoa this is crazy dev b he dropped 500 mad i'm not sure what currency that is but thank you dude i appreciate you it says lost my job because a covered pregnant wife learned to code thanks to you and some other youtubers now i earn 125 000 a year while working at home thanks sonny jay screenshot that dude that is incredible jay's actually in the other room right now which is crazy but yeah screenshot that dude that is incredible man massive props thank you for the donation and thank you for being a part of the papa fam that is huge man oh my god i'm happy i'm proud of you dude so in this case we're gonna go ahead and do h7 height of seven width of seven and we're gonna go and say the background should be gray of uh let's do a shade of 300 and just hitting save you can see we automatically get our little image pop up right i'm gonna give this a padding of four and i'm gonna say that this should be rounded four as well okay so there you go we've already got a little bit of a kind of ui popping in right so first little thing that we can see on the thing that looks awesome tell me this has really helped me a lot awesome stuff yeah it really really does help right honestly and remember guys if you are enjoying any of this content and you want to go ahead and take it that step further do go ahead and check out proper react dot com forward slash course on our site links in the description this is our full flag you know if you're enjoying what you see now imagine what we have inside our community in course so really really i recommend you go check it out we teach you stuff day in day out and we've got incredible results from it so make sure you check it out if you're interested in taking this further all right let's have a look so we've got the image next now what we're going to do is have another view and something to know is that inside of react native all of the flexbox that everything is flexed by the phone and everything is flex column as opposed to flex as opposed to flex row okay so you have to remember that and that's because on a phone typically it makes sense to do it in that direction as opposed to the other direction right so here we've got a piece of text and i'm just going to say deliver now okay and then i'm gonna have another piece of text and this is gonna say current location okay so we're basically gonna go ahead and try and get this effect right here okay so this view over here which is surrounding everything what i'm going to simply do here is say that this is flex row and now you can see it goes into a row instead and then i'm going to go ahead and say padding on the bottom of three so underneath it we're going to have a bit of padding items should be centrally aligned oops centrally aligned and i'm going to say mx4 so margin 4 on the x-axis and i'm going to give it space between the x-components of two so it pushes them apart okay so looking really nice so far already now for the text you can see the tailwind cs it just makes things come alive right someone say fun should be bold the text should be gray of 400 and now we're going to get into a flow state right xs now you can see automatically looking a lot nicer already and then the text underneath i'm going to say class name font bold and this is going to go ahead and say text extra large right so a bit larger and automatically you can see that it starts to come to life okay now we have some icons okay so you might have seen in some of my builds i usually use something called hero icons okay so hero icons in this case is what i want to use here but we can't just use the regular hero icon so instead what i'm going to use is something called react native hero icons which is as you guessed it it's basically a wrapped version around it okay so what i'm going to do is go over to my browser i'm going to type in react native hero icons and you can see it's the first npm package that pops up for a number of downloads so a bit trustworthy we're going to go ahead and install this react native hero icons and react native svg so let's pull this into our prop right now command g into command j pop this in right here this is our old error that we have on the left so ignore that and then that will go ahead and install the dependencies okay awesome stuff now to use it it's very simple right you can basically go ahead and pull it in just how we would typically do hero icons if you don't know what hero icons are head over to heroics.com type in an icon for example user and you can see we get a solid variant and we get an outline variant and now we've got access to this inside of react native so really really cool stuff okay so at this point what i'm going to do is i'm going to use something called the chevron down icon okay so inside of current location i'm going to type in chevron down icon and what i'm going to do is i'm going to import this into our app so as you can see it doesn't pop in right now but i'm going to actually import four icons at once because we're going to be using these throughout the build right so chevron down one of them react native hero icons forward slash outline if i type in solid as well i'll get the solid variant instead okay so i'm gonna do outline and as you can see in a second we should have it pop on the screen okay so it's actually refreshing right now there you go check it out guys so the way we style this is we have a size and we have a color and you have a few other properties command spacebar will give show you a lot of the oil complete options but as you can see this is how we're going to style it this is the delivery color okay so it's going to be able to sort of help us out when we're styling things up okay so now we've got the current location next to it looks pretty nice i'm actually going to go ahead and do a user icon next to this as well right so outside of this view here i'm going to have a user icon okay and if i go ahead and you can see we've got the user icon the size of this one is going to be 35 and the color i want to keep that color from the delivery icon okay so let's go ahead and pop that in as well and look at that guys automatically already looking a lot better right so what i want to do next is i'm going to go over to our header so let's go ahead and find out where we had the view so where we have the view containing this text i want to push that to use up the majority of the space so what i do is i say flex one what it will do then is it means that this view right here will take up the most of the room so that's why it now takes up all of this room which pushes everything to the sides okay really really nice all right chat today is awesome guys charlie duke thank you so much for the donation he goes thanks sonny for sharing amazing video tutorials i just got a front-end internship you are the best thank you no you are the best for tuning in thank you dude jay screenshot that's every program if somebody gives a shine to new colors thank you so much dude this is really really awesome and i'm glad you guys are enjoying it nearly at 500 likes smash that like button come on let's keep this energy up let's get the music on let's go right so what i'm actually going to do next for the safe area of you is class name background white for everything behind us pt5 okay so now you can see it automatically gives it a little bit of pop and if you probably thought oh wasn't it white before now you know okay it's a little bit different now i do want to go ahead and actually have where we've got the view over here so the header this one needs a little bit of spacing don't you think right it's a little bit kind of cramped that's what it looks like right now so i kind of want to give it some spacing on the left or right i can't remember where i actually gave it that spacing i think it might have been on the image padding four we already did that uh over here we did that fine okay so in that case what i'm actually going to do then is we'll get to that in a second i'm going to mess around with this a little bit more and then we can kind of see where i had that issue i'm trying to search for where i added that in but yeah it's fairly straightforward okay so for the such right we're going to do this bit right here first so this search box right now is next up so i'm going to go ahead and get that down so i've got my view here so underneath this i'm going to type in the search and i know where we do where the spacing came in right we've got the search box i'm going to do view and inside of this i'm going to have another view oops another view and then we're going to have an adjustment icon underneath there right so adjustment icon the color of that is going to be the react native color so it's going to be this color right here and if you don't know what we're building right now we are building this the adjustment icon is that over there so let's go ahead and hit save and as you can see it pops in now what i do need here is i need something called this text input okay so here i'm going to have firstly a search icon on the left and then i'm going to have something called a text input from react native so we're going to have to import that at the top like so and then you can see text input so at this point you can see that it's actually a text input icon next to it now we can't see much because it doesn't have a placeholder so for the placeholder i'm going to go ahead and say something like um we're going to go and do uh restaurants and cuisines right and i want the keyboard type to be default so here i'm going to do keyboard type and here you can actually change the different versions so you can have decimal pad all this kind of stuff i'm going to make a default whoa mr frank what is up frank it's been a while since i've seen you in the chat 9.99 donation thank you so much girls let's go awesome stuff good to see you here man amazing amazing stuff yes we can add padding in the sides but i'm going to show you why i don't do it afterwards because i've got a little uh shortcut coming but yeah it's very simple to add that we could literally go here and just type in like planning xr2 and it will do the same thing so you see that but i've got a little bit of thing that's coming in a second so i'm going to do that so adjustment icon there we go let's make this box look a lot more like an actual search box um let me check this out class name let's go and say flex row put everything into a row and we're gonna go ahead and say space between them should be two oops space x of two i'm gonna say flex one on the uh there you go on the input box and then i'm gonna say background should be gray of 200 and a padding of three there we go okay now a little error or something oh no okay that's pumped it down there right now that's not the one that i wanted to do um there we go okay what the hell did i just do um i've completely broken something i didn't mean to do that let's go ahead and do a refresh i'm going to my app for refreshing there we go what the hell happened there guys that was weird all right so let's go back into it add in our space two blacks one background maybe it was my flex one more okay background gray it's gonna do a background gray of 200 okay so my app's freaking out if we refresh there we go okay i don't know why that happened but yeah as i mentioned patience with react native is a virtue right it's absolutely necessary all right search icon i'm gonna say color is gray and then i'm going to say the size of this icon is 20. okay i've completely broken something every developer i love that it's so true literally so close to the final 500 likes already not final we're just in the beginning right for the outside view i'm going to go ahead and say flex row so we want to have that adjustment icon next to it items it should be central i don't know why it keeps doing that it's like chuck redress item center space x of two panning bottom of two and a margin on the x axis of four all right there we go now we wanna do flex one on this okay there we go looking automatically a lot better right so i really do like the look that we have going on right now it's already looking a lot nicer um yeah okay so at this point i guess my padding's a little bit weird there okay so i'm gonna go ahead and actually do strange that should have actually come off of what we did earlier but that's fine wherever i have my image i'm just going to simply give this one a padding x of two or finding it so four let's do four yeah and the extra four and uh we can do the same thing outside as well right now i could do it to everything but if i do that it's gonna look a bit strange i don't really want to do that right now so i'm gonna do that thank you danny nader for the one dollar donation i appreciate that dude amazing stuff so i'm gonna go over to my search box as well this gives us a padding x of four as well and there you go automatically looking a lot nicer already okay now if i was to type in here you can see we've got a keyboard works really nice uh okay we're just typing k uh let's go ahead and do command j r to refresh our app so again it happens a lot it's because i'm live streaming as well it's a little bit weird but yeah there we go right so we've got the search down looking pretty good at this point now what i want to do is i want to have a scrollable container so this actual entire view here is a scrollable container so remember what we had previously it becomes a scrollable container so what i want to do now is rather than use a regular view i'm going to use a scroll view so let's just say this is the body next that we're doing right so here i'm going to type in scroll view okay i'm going to import it from react native and make sure you don't mess up those right so it's similar to a view but instead it's scrollable now okay and um guys we're six likes away from 500 likes already we're on our way to break a thousand amazing stuff right so at this point i'm gonna go ahead and actually add in something called the category so we're going to create a component for categories oops categories and the categories is going to be for this portion over here where we've got the slider there's alphas pizza thai sushi so forth right and then we're gonna have the featured rows right now the featured rows are essentially just gonna represent these so offers near you so this is a featured row we've got this is the featured row and then we've got the tasty discounts that's a featured row as well right so we're gonna have that featured row one two and three and then we're gonna have the categories and so forth so let's start off with the categories i'm gonna create a component right so what we need to do is create go into our at this level so i like to press package.json i'm going to type in components and inside the components now i'm going to create my first component this component is going to be called the categories right so we're going to go ahead and type in categories.js react native functional exported component now we've got our categories okay you always want to make sure that this is actually a capital c as well by the way guys right so here you want to just do it as a force of habit categories okay so with that down what we're now going to do is i'm going to render that on the screen so we can actually see it when we're developing so in this point i'm going to go ahead and type in categories and you see it pops up with the auto import completion right so hit save we should see that in just a second at the bottom right so categories right now where is it at all right so we've got categories and let's just type in hello and why am i not seeing my categories strange stuff let's have a look let's go back to our restaurant screen um our home screen sorry and now let's actually do something where we've got okay so home screen i'm gonna make this scroll view a oh nice another donation clovis amay just dropped 5000 ug x thank you i think that's ugandan uh loving the bird thank you so much dude i appreciate you massively 500 likes already smashed it thank you so much guys let's get 600 all right so at this point we're going to do background gray and i'm going to do 100 okay so the whole background here should be gray i am curious as to seeing what's going on if i do flex one i just want to see something in flex one where the hell is my thing i think my compiler is a little bit buggy today uh my hot reloading um yeah it's definitely being worried about this okay so we've got some weird stuff happening right now because my actual compiler is not working the way i expected it but what we can do as well to kind of get it if you get this kind of issue it's because i'm live this happens but at some reason it's messing with it but if i do w here and give it a second so i just typed in w in the terminal it's going to go ahead and open it up on the web as well okay so i'm going to use the web to develop most of it and then we can come back to the phone afterwards okay so over here where we've got the categories what actually want to do is i want to change up a little bit i'm going to make it so that we we've got the content container oops let's go ahead and do this i'm going to say content container style and this one i can't use my lovely tail in css so we're going to go ahead and do some stuff over here but yeah if we refresh this locos 1906 is what it will come under you should be able to see here it's now building the bundle for the web let's go ahead and wait for that it's going to go ahead and build it on the web so again just give it a second that's building out once that's done bencar thank you so much five canadian dollar donation great job science is one of the cleanest bills i've seen from you don't worry about right now bugging out it happens to us yeah dude you know my pain right it really does really really does so there you go right why the hell is that text red oh my god okay that is so strange i didn't did i leave text red in there i don't think i did oh my god i did wow okay that's bad okay so at this point that's what i kind of wanted to see um obviously not like that but yeah okay [Music] so text area view okay so my ios simulator is really strange right now but i'm going to actually cut it off and start running it fresh again so expo start and what i like to do at this point guys is honestly i will swipe up from here uh if it works sometimes it doesn't want to work and i do i for ios again you make it look so easy honey honestly it's just it's kind of one of those things as um it just takes a lot of patience especially when i'm live right so this is going to take some time to get past these little pain like teething issues but we'll get there okay so now it's rebuilding the bundle hopefully that fixes these little weird errors we're getting um okay so really strange this is right let's go ahead and just find out again if i kind of hide my scroll view and we save again let's go ahead and do that okay so at this point it's because i've introduced my scroll view that it seems to bug out okay interesting okay so my uh search icon view text input my text input actually wanted to take up more room but the view over here is flex one all right happy hazard thank you so much love your work appreciated why is this happening as well oh my god okay so so many things are waiting out right now but we will get there curse one gsx man yeah proper debugging live usually i don't want to debug this early on but it's all right okay so at this point we have our restaurants and cuisine let's just go ahead and just start breaking it down right so there we go text input is there yeah so my hot reloading just isn't behaving today honestly which is really strange what we're going to have to do is probably develop on the phone or on uh here and then do it accordingly so let's go ahead and do this now and again even this why is this appearing this way i do not know let's have a look okay so a little bit debugging session where i have this right now this is already not this is not flex row so it shouldn't be behaving like that this is flex column i'm not sure why we're getting this oh my goodness oh my god guys there's a text okay that is a silly mistake wow okay we have a text wrapping the whole thing oh no that's awful okay that is absolutely awful no way that's why guys we're trying to wrap it okay all right that was awful it happens to the best of us did no one spot that as well that was awesome that was awful okay we made it past it all right it's all good right i had a text view okay so this was fine the whole time what am i complaining about anyway at least you know you can you can show it on both now which is which is always cool what i'm gonna do is i'll probably have that behind and that way you can see what it looks like on the phone as well right so um okay at this point is that confusing i think there is let's move it out okay we made it we made it it's all good text gotcha i know jamie i was thinking in my house like nothing is behaving the way i expect right now that's why as well my padding x wasn't working i knew it i knew i wasn't going crazy right so panning xr4 we didn't need that i was thinking in my head i was like something's different that's strange right so now i'll scroll views here okay now i feel happy i was getting stressed out i was like oh god ramen says i spotted that but waited thanks dude always always coming in clutch um let me just uh turn this one second guys okay um so let's do category hello so now i'm gonna go ahead and change this up and build this out okay so four categories what we're gonna go ahead and do is i'm actually gonna be creating a scroll view here so this one is actually gonna be called a scroll view and i'm going to go ahead and actually import this json what's up we're going to go ahead and here i'm going to create a category card all right it's going to be a reusable component category card and here i'm going to create another component called category card and i just realized i made an awful mistake again so it's taking me a while to get flow right now but here this should be a capital c guys do not do what i just did there and means we also have to import our import statements at the top that should be categories any component should always have a capital letter there we go okay we got we get past it the reality is you're going to have debugging issues i like to show you that so it's not always perfect and that way we can kind of you know it's always a bit more realistic as to what we're doing right nearly at 600 likes let's keep going guys all right so categories at this point what i want to do is i'm going to have a bunch of categories so like imagine like an array and then i want to go ahead and pull them in and then we're going to go ahead and render it on the screen okay so first things first we've got the scroll view and what this is going to be a horizontal scroll view okay so where is my thing this is going to be a horizontal scrolling so we're building this right now the categories okay so this is going to be a horizontal scroll as opposed to a vertical i don't want to show the horizontal indicator so shows horizontal indicator thank you zim kamara for the one euro donation appreciated and mandeep saying thank you so much okay so you have all this kind of cool stuff happening now and i'm gonna say content container style as well some little bit of style here padding on the horizontal axis of 15 and i'm going to say padding on the top of 10 okay there you go now that actually makes it sort of padding around the actual inner container that's a little bit of a different styling technique won't get too far into it right so at this point what i want to do is i'm just going to kind of force in a couple of these category cards right i'm going to go ahead and just force in a few of them so imagine we had three right now and i'm just going to pass in something called props to each of them so we can customize it so each one is going to have an image url uh and let's just find like a dummy image for one of those things right now so i actually had a very good one before i don't have it with me right now but we can actually solve that in a second so let's just find a dummy one for now so what i'll use for now is let's just use this one and then when we come to replace it with the actual ones i'll show you how we can get them okay so links on propriet.com there we go and i'm going to go ahead and pass this in for each of them okay and then i'm also going to go ahead and add in the title right so in each one i'm just going to say title is a testing okay and what we're going to do now is accept these as props now props basically allow components to be reusable so props come through as a functional argument we can destructure props to get inside of them so we can get the image url and we can get the title that i'm passing through this is why it makes this what makes the components reusable okay malta in the house what's up dude okay so at this point now i can go ahead and say instead of this i'm gonna say title just as an example and let's go ahead and see so now you can see testing testing testing is coming in because of this so if i say testing one testing two testing three bam all right comes through okay awesome stuff so at this point now each of these are going to be a touchable button so in react native when you wanna have a touchable button we call it touchable opacity and what this means oops not that one it's touchable opacity all right react native and what this means guys is essentially means when i touch it the opacity will change so notice if i click this see how the opacity changes as a result of clicking it so that's how we get that nice kind of fill right uh cyrus says i'm interested in the readout spot property has been killing me yeah property sucks we're going to fix it today do not worry my friend all right next thing i want to do is add an image over here as well so remember images are self closing components add a source the uri for that source is going to be the image url okay then we have to style it so that way it has some height and width to kind of go by so i'm going to say class name here is going to be a height of 20 a width of 20 as well and i'm going to make it rounded okay so this point we get a error because the image hasn't been imported so we do not want to do that and as you can see we get these nice kind of you know that's just a dummy template for us to mess around with to get started now for the class name i'm going to say margin right between each of these should be two and i want it to be um relative right so relative and i'll show you why in a second okay so relative i'm going to absolute position it within it right so when you have to make your parent relative otherwise it'll just fly off into that overall screen so here i'm going to say absolute bottom one and i'm going to say left one right now as you can see it's relative to my parent container and it gets thrown in the corner right so here i'll say text white and i want to do font bold okay now for these pictures what i've gone ahead and literally done is i went over to deliveries to website and i kind of like snagged a few images and kind of use them like that um what i'm gonna do just to kind of help us out a little bit is i think i do actually have a dummy one that we can use um do i have it with me no okay that's fine we can just we can go with this for now all right but instead what i can do here is let's just go on to uh i'm gonna quickly find an image on google and just find a like sushi picture so that way we can kind of use that and then i'll show you how eventually we're going to connect it to sanity cms and have it all kind of working alongside like that right so at this point i'm just going to grab any random picture i have so i'm going to use something like this one and i'm going to copy the image address i'm hiding my screen now because i don't wanna i don't know what will come up on the screen so i'm gonna quickly get you guys a link that you can use so it's very easy to copy me as we do this okay so two seconds guys i've got a link in just a second okay oh that's actually an image so that's not gonna work let's do this one okay so copy image address there we go i have an image now i'm copying the url for that image there we go nice and quiet okay so at this point i'm going to use in our categories let's just change this for an image that i have gn7 and now we should see a different image there you go that's a lot easier to work with right now to kind of see what's going on oops sorry guys i forgot to show you all right so i just swapped this out for the different link now so gn7 and you can see now we've got our examples here so eventually that's what's going to be poured in like similar to this right so we're going to we're just setting ourselves up so that way eventually we can plug in to our sanity cms back end and have full control over this right now as you can see guys i can scroll through this container as well right so really really nice stuff and uh and looking good so far right guys almost at 600 likes this is incredible energy today wow we're easily gonna beat a thousand today it's actually crazy okay so at this point we're going to do the features tab right so this one right here and then what i want to do is i'm actually going to connect standard tcms or maybe we can do sound ecms now um i think maybe we do offers near you first and then we'll do some ecms and connect it all up okay and then we can do different screens okay so at this point now what i want to do is go over to my home screen so where am i at right now i am my home screen yes home screen and i want to go ahead and do i want to change the music up a bit this music's um not the best in my oven this one's kind of cool i like this sometimes it's just a bit jazz kind of vibes and we're gonna actually have a quick water break that's why i'm feeling a little bit weird all right it's quick war break yes you can use a flat list instead of a scroll view as well it's actually more performant if you want to do that but today i'm just kind of easing everyone into it okay so what i want to do now is underneath the body right so underneath here where we have the categories being rendered out we have featured rows okay now for featured rows what i want you guys to do is i'm just going to have basically a component which looks something like this i'm going to have a featured row component okay and what i want to do here is going to be a self-close component and the props are going to look something like this they're going to have a title and each one is going to be like for example we're going to have featured right so this one's the first one's going to be featured just similar to how like this featured and then it's gonna have a description and this description can be something like paid placements for our partners because that's what they have on delivery okay and then we're gonna have the featured category right because we actually don't need that one i don't think uh yeah actually no we do need that one let's just add anyway i'm not sure if i actually use that or not the featured category is going to be featured okay so i'm going to be using these afterwards so i'm going to create this featured rogue component and then we're going to go ahead and use it afterwards so featured row.js react native functional export bam and inside of here i am actually going to be passing through those three things so i've got the title that we just wrote in we've got the description oops description and that is some destructuring here and we've got the featured category featured category okay hit save go back to home screen add in our import okay so make sure you import it like so hit save as well and then now we can see his featured roll pops up so and then what you want to do is just pop it out three times for example and that will start helping us out so what i've done to sort of help us out here is i'm just gonna go ahead and save just a little bit of hassle and i've got the featured rose looking something like this so what i'm actually done for you guys is giving you a little bit more of a kind of option is we've got featured tasty discounts on offers near you okay so let's actually make that kind of look a bit pretty now okay so first thing i want to do is and we actually didn't need featured categories i just realized yeah we didn't need that i didn't use that in the end um so i'm going to go into featured row and over here what we're going to do is we're going to have the the id the title and um title and description title description feature creator we don't need and i did need the id as another prop as well okay and that's what i forgot to add in so on the home screen so each one of these will have an id as well okay so right now we're just going to do testing i'm just gonna say one two three this one will be one two three four this one one two three four five separate ids okay and it'll make sense afterwards when we actually pull this from the back end okay so let's go ahead and do the featured row right now and inside of featured row remember guys this is going to be recorded afterwards you guys take your time build this out as much as you need to kind of rewind pause that kind of stuff so i'm just going to move it to space and kind of keep going so for this one we're first going to do the offers near you so this nice little arrow bit at the top so inside this view we're going to have a text which is the title and then i've got the arrow right icon okay so arrow right icon and this is going to be the solid variant actually i think i use a solid variant what do i use here i icon yet outline variant okay and then there you go we've got that looking pretty decent and then for this i'm going to say the text should be class name equals font bold text should be large hit save on that and the arrow icon over here the color i want it to be the delivery color okay so i'm going to go ahead and pop that in like so now for the overall view i'm going to hit class name i'm going to say this view should be margin top of forbes class name through margin top of four flex row items center and justify between and the padding on the x-axis of four so slight differences in the things and automatically looks amazing compared to where it was a little bit of text on the side is going to be the description as you can see it passed popping in i'm going to do class name here and this one's going to be text is going to be extra small okay and then we're going to go ahead and say text should be gray 500 padding x of 4 and that is not what you want to do you want to cut that out there we go there we go automatically looking pretty good so far right really really nice and then we've got this scroll view inside of each featured row okay so this one is going to be a scroll view and we're going to import this scroll view from react native this one is going to be a horizontal scroll view okay so remember what we're building right now is this horizontal scroll view component and that's going to be another restaurant card component okay so for this one i'm going to say content container style is going to be padding on the horizontal axis of 15 okay and then we've got showing the horizontal uh show oops no i'm sorry show horizontal scroll indicator false and class name for this one padding top over you might be wondering but sunny why did you do padding horizontal in this one and then padding here because this is the overall scroll view style this is the inner scroll view style right so it makes sense so that inner 15 padding is what we're doing here right so inside that scroll view we're going to have a bunch of restaurant cards right so restaurant cards so that's where basically the restaurant cards are gonna live okay so we're gonna create another component which is gonna represent a restaurant card so this one's gonna be restaurant card dot js react native functional export component hit the thumbs up button guys nearly at 600 likes this is awesome stuff right cyrus says i love how sonny wakes up and he's like yeah i feel like burning entire app today it actually happened that way a little bit i'm not gonna lie to you it really kind of did um so for this one we're gonna have a bunch of props that get passed in here yes it's a little bit messy but it's it's what we want to do for the restaurant card okay so we've got id image url title rating genre address short description dishes longitude and latitude that's going to be coming from the back end so it will make sense once we get to this point okay so what i want to do here is render out a dummy restaurant card okay restaurant card like so okay now what we're gonna do is we're gonna go ahead and actually pass in these dummy props okay so in this case let's just give some dummy data to this right so it's going to be something like id equals one two three image url equals let's just give that image url that we had before so gn7 the title is gonna be uh nando's for example let's just say yo sushi uh the rating is gonna be a 4.5 the genre is going to be japanese the address is going to be wanted to remain straight short description this is a short test description here doesn't matter and the dishes are going to be an empty array the longitude is going to be like a random number for now because it doesn't matter just yet because we're going to plug it by the time we do it so long to choose something like 20 or zeroes i don't know random okay and then this right here we don't need these as well okay so this is going to allow us to test our design out okay so restaurant card gets rendered out we get these dummy props over here and then i need to style out the restaurant card itself okay so this restaurant card is essentially this component right here okay so we're going to make it a beautiful it's going to be swipeable all that kind of stuff oh i love this song this one is nice okay if you didn't watch the vlog where we me and jay were in jebel jays this is the song that when we flew over the mountain if you're enjoying the vlogs as well let me know right smash thumbs up button i'll keep doing them all right so in this case we've got the view here so what i'm going to do now is actually go ahead and say cast name it's class name oh this view actually is changing it's not going to be a view it's going to be a touchable opacity okay it does this weird little thing there you have to do that okay virtual opacity and now that entire card is going to become clickable nice and what we want to do here is first we're going to have the image so in this case image and remember we're going to swap out these images this one's just for reference so we can kind of work with it for now source here is going to be the uri it's going to be the image url hit save and again i always forget that i always forget to import it right okay now it's not showing because we haven't given it any height and width so we need to get a height of oops last name equals height of let's say it was a 36 uh width of 36 and a rounded uh sm right surrounded small at this point okay we're starting to see something looking pretty decent right now that's not actually the same size i wanted actually 64 is what i was looking for 64. there we go yeah havana yes giancarlo you know havana blue still exactly that all right so looking decent and then we're going to go ahead and say view and inside the view i'm going to have a text string and this is going to say title this text is going to be styled up so it's fontboard on bone and then we're going to go ahead and say the text should be large with the padding on the top of two text large padding top of two bam okay yo sushi looking good so far okay now this outer view is going to have let's just space out to give ourselves a bit of breathing room let's say padding x of three padding bottom of four so i love how you know react native is so you can just style i'm sorry telling css style so fast right really is like a game changer on my eyes all right so we've got the view and inside of here i want a star icon all right so i'm actually gonna import the icons all together right now okay so we're gonna go over to my home screen and i'm gonna just pull in all of my icons uh in one go sorry not home screen restaurant card screen so i'm gonna have two icons uh from one from solid one from outline so star icon and location marker icon okay so inside the view down here i'm actually going to go and say star icon star icon and this one is going to have a color green okay and then we're going to say opacity i've been updating this popper fan playlist if you want access to it the link is in the description to go ahead and sign up to the fam newsletter and that is how we just send you the free uh we send you the free playlist straight afterwards so definitely worth it if you're into the music all right here we're gonna say flex roll so flex row items center and space on the x axis of one space x of one there we go alpha by z i don't understand why sushi for everyone yeah sushi the way man this is it right donate i'll go buy some sushi that's how we're there all right at this point we've got text and insider here i'm gonna go ahead and say um it's to be a rating so i'm going to have rating here rating and i'm going to have a little dot right so it's going to be rating oh actually okay so what i've done here is i've actually gone and said like okay so first thing i'm gonna do the little dot so rating dot genre okay and then what you can do is because you can't use span tag right if you just want the genre to be uh the rating to be green easy way of doing this you just add another text tag incorporate that one inside of it and then you basically go ahead and just make that big green so if i do this text green 500 and then i make the outer text text extra small and then text gray 500 and just like that pam we get the styling looking pretty sick okay really really nice and i once convinced streamer to attach functionalization once you hit it go and delete all of this code oh that's crazy cyrus i imagine that oh god i don't feel like doing that okay um underneath this view i'm gonna have a another view so i'm gonna have another view here and this one is gonna be for the location marker all right so it's gonna be nearby cling street for example so here i have the location marker icon um this one the color is gonna be gray and then the opacity here opacity is gonna be 0.4 size of 22 right size size of 22. all right nice the text here is going to be uh nearby with that little dot i love this little dot if you see me i throw in all my builds all right and then address hit save let's start styling this up so text is extra small oops style text extra small and text is gray of 500 okay and then the overall view is the reason because right now they're stacked up on each other because it's flex uh a column by default we need to make it flex row by default all the views if you haven't already guessed by now are default flex right so you know you don't have to say flex uh space one there you go nice okay awesome stuff looking pretty nice already all right now that touchable opacity we're gonna style that as well so this overall container we're gonna give it a background white it's gonna have a margin right of threes that way we stack them up against each other look nice and then just separate it from the background we're gonna give it a small shadow at the base shadow and as you can see already amazing difference okay now for that featured row to sort of help us out test wise i'm going to add a couple in so as you can see already we're starting to get a nice ui right now obviously we've got some sushi in there so smash the thumbs up button and uh i'll buy everyone sushi i'm joking but you can see right now this is looking pretty good okay and what we want to do now is we want to replace the sushi with actual from a back end right so we want to make it look something like this right so this is where sani is going to get connected in that's why i think it's a good time to add in sani to io so first thing you want to do guys is when you're setting up sanity head over to sunny dot io forward slash sunny okay first thing i want you guys to do npm install dash g sanity client you may need to do sudo and sudo before npm and to go ahead and actually install that because global installs sometimes need more permission all right and then what we're going to do is go into our project and type in the following sounding e coupon now i always get a question why do i add coupon trading to something to one you're supporting me so thank you two they give you a good free quota but where by using the coupon we've got a nice partnership with them they're doubling your free quota for absolutely free so you get the boosted free plan okay so by using this literally does nothing but benefit you okay so double the three quarters you get tons of like you know testable uh limits and quarters so you can really it really is definitely worth it okay all right um i don't know daniel so we can basically yes we will be iterating it through a mapping through this is literally just to get it kind of set up off the ground then i'll eventually be pulling in and i'll be mapping through so this is more just to get the ui up and then now you'll see as i efficiently do it okay so at this point now going over to our code command j i want you to do the following okay i want you to go sony init coupon sunny2 okay now what i want to do is it says coupon validate it looks like you already have a sanity account sweet if you didn't have a signing account it will ask you to log in or you are all you would simply type insanity login and it will allow you to do it project name in this case i want that deliverer clone youtube okay enter and at this point it's going to go ahead and start creating up our project on the sanity back end it's going to ask for a data set in this case use the default data set yes that's fine we can go ahead and hit enter by default it's yes it will create the data set for us i'm going to log into sunny so you can see everything now oh this is a bloody good tune what's this it's called crane paradise okay so project output path i'm going to type in sanity so that way it keeps it very neat inside of my directory so sanity is what i want to call the output path now here is where basically you can start with a clean project no predefined schemas and that stuff but what i like to do is just start with something and then remodel it to whatever i want so that way i don't have to write all the code from scratch so this is the easy way of doing that right stranbri thank you so much i've got a free hoodie oh nice that's awesome dude um i want a free sanity hoodie uh go to i'm gonna type in blog okay and i'm gonna change it up to whatever i need it for that's what i like to do it it's more of a lazy way but i like to all right i'm just being real with you okay 600 likes let's go guys nearly on the way to 1 000 likes amazing stuff somebody asked for the pop fan playlist it is inside the description so go into the description you'll find it okay so now if you see it's actually opened up a new sanity folder and this is another directory inside of here okay so really awesome stuff and that's going to install the silent e dependency so it's actually installing the dependencies in there now so something to know and be careful of is that whenever we install dependencies now we have essentially got two different places where they can be installed inside of this photo or inside of the sanity folder because you see this has got its own package jason and this has its own package jason don't make that mistake okay just saying make sure you're in the right place when you start installing things into the project junk this is dang awesome thank you dude i appreciate you for watching all right there you go creating default project files now once this is done it shouldn't take too much longer what we will get eventually is a ui right it'll be set up for a blog something like this but what i want you to do after that is basically i'm just going to go ahead and quickly pause something um oh this is reminds me of my twitch days when i'm streaming this kind of music okay so what we're going to get some ui like this right this is called the sanity studio and it's basically a cms platform which allows us to go ahead and efficiently you can even roll back different versions this really is powerful as hell right and you can actually have multiple team members at once in real time collaborating just like you see on google doc really really cool stuff the guys doing amazing job over there right we are almost set up now and then what i want to do is i'm going to go ahead and start up our local one so notice how as well this is actually a deployed sanity studio and i want to stress that out not anyone can go there if you try to go here now you would still need to log in with my account to get access to it but that's incredible guys just take that in for a second i've deployed the cms platform live on sanity's url and basically i can log in anywhere in the world and modify the data on the site in a user-friendly way so you don't even have to be a developer you don't have to know anything about it you can just go there and update the information that is really really powerful trust me right so while that's happening what i want to do is i'm going to click login and i'm going to go ahead and log in to my account on sanity to show you the back end not the studio okay so this point you can see delivery clone youtube has been built and this is how it's boosted free plan so i'm gonna click into it this is where you get all of your sort of keys your details all that good stuff okay so at this point we've got members data sets production that's the one we set up when we're getting things off and you see the studio is not deployed project id is basically what we're going to be using to pull in our information okay so great stuff now you can see hey it's done success right so now what we need to do is cd into a sanity's folder so notice how before i was in delivery clone now i'm in cd sanity so now i can run my sanity commands here the first one i want to do is type in sanity start this is going to start up my sanity studio okay so let's go ahead and get that set up and then i can show you what we should be seeing okay so quick little water break while sani studio gets set up but let me know in the comments what your experience is like with sani and smash your thumbs up button if you're excited to learn about it right let's do this i love the comments today everyone's the jokes all right so i'm going to go ahead and go to this local host url let's go into a localhost 3000. and you see connecting to signing in you see how it asked me to sign in so i'm actually going to go ahead and log into my account right now so let's go ahead and sign in right now to the account and i've signed in it's logged me in it's restoring the studio and as i mentioned it's set up with a dummy blog post schema right so if i go ahead and create a new post for example you can see i've got this default schema that it's given me right where we've got body publish that categories main image we're going to rebuild all of this so that way it's basically structured in the way that i want it which is this right so we've got restaurant dishes many categories and featured categories so first things first let's do that so what i want to do is go into command b into sanity and i want to go into my schemas now if we go to schema you will see that this is essentially where everything goes ahead and gets kind of uh concatenated so i'm going to make it a little simple for you to see you can see we get the different types post author category and block content and what we have in this case is separate schema files so in this case post and this is basically the syntax for defining each of those things so what we're going to do now is i'm going to run you through how to go ahead and build out the schemas for today's data structures right so in this case the first thing we're going to do is restaurant let's get a restaurant up and running so right now what we're essentially doing is basically going ahead and let me just move this out the way for a sec we're essentially doing is getting this restaurant basically schema basically saying all the different fields that we have and stuff i'm going to go ahead and do that right now so first thing you want to do is type in restaurant okay this can be restaurant this one is going to be let's actually rename the file so it's no longer post it's going to be restaurant dot js and yes let's update the imports would sort out afterwards and title here is going to be document oh sorry no title sorry tito is going to be restaurant with a capital r document now the fields the individual fields so basically what i've done here is i'll save you a bunch of time right what i want you to do is go all the way down firstly we're not going to be using preview today so get rid of the preview and then what i want you to do is remove everything inside of your array here right so you should have a set starting point like this now what i want you to do is we're going to add in the different ones so firstly we've got the name so name type string titles restaurant name that's what appears on here so you see restaurant name you can even have description underneath so it'll come in with a light gray text validation i'm asking that it's required okay then i'm going to add in a couple more so i'm going to add in like a few more here so i'm just going to pop them in and basically you can feel free to pause the video and have a look short description max 200 characters image is type image so it's going to come with the image picker number for lat and long the address is a string we're going to require that as well i've just shown that you can require some not require others and i'm going to do the same thing for even for the rating right so at this point for rating we've got rating which is a number enter a number between one and five now for the validation i'm saying it's required but the minimum value is a one the max is a five and if you enter outside of it it's going to tell you off and say please enter a value between one and five so really really clean stuff right the next thing we're going to do is actually have the type and the dishes so i'm going to explain what this is right so we've got type and the title type is a string here validation is required but notice how this one is a reference sorry that's wrong this one the type is a reference okay and this is a reference to category so what you can do here is connect things up so where we have a separate menu category i can actually go ahead and reference that inside of here right which is really powerful guys right you can actually reference your category and same for dishes here i'm i've got an array of dishes which i have a separate sort of schema set up there for right so here we've got an array of references two type of dish okay so hopefully that makes sense now to connect this up i go over here again and what i want to do is i just change the post to restaurant okay so restaurant so we're making an import statement and we're going to go ahead and say restaurant now we've done our first sort of refactoring right so again you don't have to do that you can start from fresh wherever you want but that's how i did it right for the category we're actually going to go ahead and keep it as category but i'm going to change the title here to a menu category and this one's going to basically be like the type of food the genre of food that's coming up right so you want to change out these fields for the following fields instead okay so that's the category done the next thing i want to do is create one called dish so let's get rid of block content we don't need it let's go to our author and let's just type in dish okay now here yes click yes now for the dish we're going to go ahead and say the name is going to be dish the title is going to be dish with capital d type is document and then for the fields i want to go ahead and get rid of these including the preview um it's going to have a closing bracket there we go and then i'm basically going to go ahead and pop in the following okay so i'm going to have the following things inside of here so these are just basically the schema field so name short description the price and the image right so in this case this is what would be responsible for building out this right here okay so hopefully this is making sense right now you see crunchy salmon for example and that kind of stuff is all coming through here okay so looking pretty good okay we've got everything down uh we also have the featured tab as well right so featured dot js this is gonna be another field now for this one i'm gonna go ahead and pop in the entire thing quickly explain it right so you've got the name featured document the title in this case is featured menu with categories sorry i've got the fields name short description and restaurants which is a type array which is an array of references to restaurant okay so at this point we need to connect them all up and get it all kind of you know working so at this point we go over here and i'm gonna change this so we don't have block content we let's just get rid of this right let's do it from scratch let's do it properly all right let's get rid of this okay so at this point we're just going to go ahead and start importing in the different types so we've got the category that we needed to pull in we also have the dish that we're going to need to import and we also had the featured all right so what i've done here is i basically go ahead and say okay i've gone ahead and created all these different schemas build it from that okay so now if i go over to my uh localhost one which is the one that we just did notice how it's changed from that blog setup to this setup right where we have restaurants so if i was to create our first ever restaurant i could see like nando's for example short description awesome chicken yeah you can add an image in so you can notice how you can upload an image and so forth and it can pop up so obviously right now i've got tons of random images on my computer let's just chuck in for example uh i mean i have a sushi one so let's go ahead and do sushi here all right so i've thrown in the sushi one let's go ahead and add a bit of a sushi vibe today let's just say yo sushi right yo sushi awesome sushi and then imagine you've got a latitude to 20.4 i don't know that'd be 0.4 i've got loads of these things already set up restaurant address it could be like one two three main street whatever right that's what's gonna appear let's say it was 4.5 stars category right and if you don't have any categories you can create new from here and you can even it's very simple you can go ahead and put an image of the category and so forth so and same with dishes you can do the same thing right you can create a dish add your dishes so what i've done guys is i've actually filled all this information out already so i've gone ahead and created loads of dishes and that stuff and that's how i got to the point where i was out here with my own delivery clone so i'm going to save us the hassle here and now switch over to mine which is already pre-populated with information okay and i'll show you how to connect it and so forth but all you would need to do at this point is add in all of your restaurants and make sure that once you've added it in guys you hit the publish button okay so at this point imagine if i like made a change to my wagon mama right welcome to agama blah blah and at the exclamation mark notice how the publish button becomes green i have to publish that change and then give it like maybe 10 seconds 15 seconds for it to propagate and then it's gonna be live so you see i've got the latitude longitude of actual restaurants here so i've actually gone ahead and saved you a bunch of hassle here right so you guys can feel free to do this on your side and then you can go ahead and do it yourself okay almost at 700 likes let's keep on going guys okay so at this point now we're going to go ahead and connect things up right so that's the schema side of things done so i can close that off i can close that off i can close that off now what i need to do is i need to be able to connect to my sanity back end from the front end right now how the hell do i do that right so what i what i'm gonna do is i'm gonna actually go ahead and install something called the sanity client okay so i'm gonna do command j and where i've got my studio over here what i'm actually gonna do now is obviously we've got a split pan here panel here i'm just gonna create a separate um terminal right so you see i've got my double terminal and i've got my separate one here i remember delivery clone we're inside of not sanity right so at this point i'm going to do npm install and i'm going to say sanity client and i'm also going to go ahead and say sanity image url right i just want to double check something as well right so that's fine yeah so we've got sanity client and sanity image url so i'm going to install these two dependencies like so that's going to allow us to start using the things that we need to go ahead and get this up and running off the ground wow we almost hit 100 in chat revenue already that's crazy guys thank you all right so we've installed these two dependencies now what i need to do is create a file on the phone on the front so if i go to package.json on the top level i'm going to create a new file called sanity.js okay now this is where the magic happens right it's where we basically go ahead and have a sanity setup assigning a connection to the backend from our react native app okay so what i'm going to do is i'm going to say cons client equals sanity client and then i pass in an object okay now here what i can do is i pass in a project id now you can use environment variables in this case i've gone ahead and say that's the the hassle of that i'm just going to go ahead and have the project id which is my project id of the the delivery clone that i've set up pre in advance right if you want to find your project id there's two ways of doing it i'm going to show you both firstly go to your sani go to your package json and you will see that there is a project id of um no sorry signing json your project id is here okay so that's one of your project ids that you can find or if you log into the backend you'll see that the project id is also here okay but as i mentioned before i'm going to be using the one that i pre-configured beforehand to save us a bit of time so i don't have to kind of enter it all in the next thing i want to do is data set production we're going to say use cdn is true that way it kind of optimizes caches things on the edge network and then for the api version just use the one i've used here it's the latest i believe api version for the api okay kota says first time watching stream has really given me motivation to build saying great personality engaging as well oh thank you guys but i didn't mean that uh yeah anyway here's what it is this is a cool channel uh thank you for tuning in just add a little beep and after that mahdi says your tutorials changed my way of looking at programming all right so this point let's go ahead and say const builder so that's the connection to the back end and then what i'm going to do is i'm going to have something called a builder now what this is doing is it's basically going to allow us to actually have an image builder so whenever we've got images that i basically set up and added to sanity i need to pull them down and get the urls from them sometimes right so what i'm going to do here is create a little helper i'm going to say export const export const and this one's going to be basically url4 and what we do is we take in a source and we're just going to return builder.image um from from the source right so this is a helper function that we're going to use later on okay now there's a few things that we do need to do in order to get this off the ground and working okay so i want to show you what we do there basically i've added this little snippet and in the puppet github repo if you want the code you can buy it from there as well that's how you can work for it or buy it that's how you do it right so at this point run this to add exception as you can either go ahead into the sanity folder and add in the exception for course policy or you can do it over here i believe it's in here access api here cause origin so in this case you can white list all the origins right so here you can go ahead and do this following you can say uh localhost 3000 for example or if you had um let's just imagine we had like 1906 is another one right that basically it runs on our localhost for react native if i want to do it from the uh terminal i can do that i can go here i can cd into sanity and i can basically type in the following and this is basically going to whitelist it right so sony 1906 and this is going to go ahead and whitelist it in the back end for us okay so that's another way you can do that as well okay so i've got the two things running now right so in this case should the credentials yes that's fine we're gonna actually allow it in this case um because origin added successfully awesome stuff nice okay so that's a little kind of trick that you can do now if you notice if i was to refresh this we should have 1906 on the cause origin as well so imagine once you deploy this once it becomes live you're gonna have to white list your things as well right credentials not allowed uh we should have made it not i don't know it's fun but now i'm gonna just uh delete this i'll allow it in a second so i'm gonna do sanity uh 3000 and i'm going to allow the credentials to be passed otherwise you've got to put the api key in i'm not going to go over all that today it's going to make it easier for us okay so at this point is that github copy yes awesome stuff right uh career in the house what's up okay so at this point now we've got our sanity connection on the front end but i'm gonna basically make our life a bit easier and show you one more trick and then we're gonna just resume from my sanity uh back end so basically once you've got your sanity imagine like i had the delivery clone to this i added in all my information and i want to deploy this live right it's so easy to do so all you do is sanity deploy once you're inside the sanity folder what this does is it will go ahead and give you a studio host name so in this case i can have been like deliver sunny youtube and this will go ahead and create like delivery sunday youtube.comstudio and it's gonna actually deploy this live so which means i can log in from anywhere in the world and access this cms platform okay now i've gone ahead and done this i'm going to cut this one off but that will go ahead and build it i've already done that for my old project and it now lives at this url here so delivery clone sani studio so this is the point at which you guys should be able to follow up on deploy it remember if you make any changes to your local you're gonna have to redeploy your uh backend okay so that's just something to know okay so with that said and done let's start pulling information from our backends we've got all this information here in the back end how the hell do i go ahead and pull it now so first thing i want to do is go over to my uh home screen let's do that first okay now inside of sanity right we have something called a grok okay so i'm going to actually load this up locally so sanity uh stop give me a second i'm running this one locally because right now we don't have this vision tab so what you're going to have to do is start it up locally so what we previously did basically so silently start here so once and you start i've already ran it on my other sort of screen so in this case i'm loading that up right now and that one shouldn't take too long i'm actually running this already which is wrong um i'm gonna cut this one off and i'm gonna run my old one to show you guys what i'm talking about okay come on jay awesome stuff we're doing really well guys nearly at 700 likes let's keep going okay so at this point um while we wait for that to load basically the way we query information from a sanity cms backend is we use something called grok grock's awesome right it's their own custom syntax but it's really nice where pulling information in a fashion which is similar to graphql you say what you want and you only specify the fields that you want and it will give you back the information so what we can do now is we can go over to our localhost 333 and let's see what we get here right so i've got all my stuff loaded up i'm going to go to the vision tab right now in the vision tab you can test out queries so here's an example where we're basically querying for the type of featured so remember the featured categories had a type right so inside the schema there was a type featured okay so if we go back to that the name was featured so what i'm doing is i'm saying query for everything with the type featured and return back all of the fields and inside of there we've got restaurants and so forth so i'm going to explain this in a second so if i was to query this for example notice how it's giving me back all this stuff right now i'm gonna i'm gonna go ahead and cut this out for a second but if i was just to go ahead and do this right it's gonna return back all of the different options so these are three featured rows right so first look here we have three featured rows that's exactly what's being returned here okay but notice how each one has restaurants now these are references right so if i want to go ahead and basically bring out these references so that way it shows me the full information of that reference what i can now do is i can say okay go into firstly i want to prefer this why does it look so horrible um okay i'm sorry about that guys um but yeah basically what we're gonna do now is i mean yeah that's fine we're gonna live with it right so we say go into the restaurant array so this one right here expand it basically right and here give me everything so again i'm just not being that optimal here but i'm saying give me everything and then there's also a dishes reference in there expand that and give me everything and for the types i just give me the name all right if i run this now no it's what we just did right so it takes a second to execute now it gives me the full restaurant instead of just an empty reference and if i go into the type which was also a reference it gives me only the name if i was to do dot dot it would give me all the information from the type so if i did this now i go into type you see how it gives me all the information right so you can be very sort of you know if you want to be super optimal you can only kind of ask what you want for but this arrow syntax means expand the reference okay so this is our first kind of important query now what i wanted to do here was i'm basically saying you know like if you only want to get the first argument back so in this case the first featured row you can do that and so forth right so there's loads of cool things you can do with this i'm going to show you how we now use it on the front end okay so heading over to the home screen right now let's jump over there so home screen and what we want to do here is instead of these featured rows like this i'm going to start pulling it from the back end okay so first thing we need to do is a piece of state to keep track of this so we're going to say that this piece of state is going to be called featured categories now if any of this doesn't make sense state props all that stuff loads of videos on the channel there's a video popping out on the screen right now if you're watching the replay which is for use state how do you stay inside of react there's another video which is going to pop out in now which is going to be for props inside of react and if you really want to take it a step further join us at proper react.com or check out the free course that we offer react basics 101 all the links are in the description so that's going to help you out there's tons of ways that i can teach you how all of this works right for free categories set featured categories nearly a 700 nights guys let's go you like the pace let me know all right let's go um can't wait for redux yeah boy we got relax coming as well use state i'm gonna import that from uh where is it gone yep and from react so the first initial piece of state we're going to say is an empty array okay so initially the featured tabs are going to be empty right now we're going to use something called a use effect use layout effect is when the ui essentially loads user effect is when the component itself so the functional component loads now this means run on the first initial load and then don't run afterwards so that makes sense right well in this case i just want to as soon as this loads up this component i want to fetch the stuff from the back end okay so essentially what i do now is i type in sanity client right so in this case if i do client it will import it from this i'm going to rename this to sanity client to make it easier for you guys and now i can say signing client dot fetch right now what i would like you to do is whenever you do this stuff do what i do right go ahead and basically test your query on the back end here so in this case this is my query i'm just getting all the featured you know fields get all of them so in this case the return three see paid placements everyone joined juicy discount so forth so forth so forth and then basically expand the reference right so basically test it in here first copy this right so you know it works then what i want you to do is attack from the fetch do a back ticks and basically what we do here is we paste in that query okay once that comes back to us that's going to return some data okay that data is what we're going to set as our featured categories okay so now what we're doing is on the initial page load what's happening is oh we need to actually go ahead and do this use effect react okay that works pretty well okay that looks pretty nice as well right so what i would like what i'd recommend that you can do here is if it got a little bit confusing there and you kind of you know you're a bit like whoa sonny i have no idea how to debug what the hell you just did well what i would recommend that you do now is just as a quick test console log here and say featured categories okay and then what you do is you're probably wondering oh my god i can't debug it if you hold command d here you can actually pull up this and debug but i don't like to debug like that here what i will do instead is i'm going to open up the web version which i have here and i do inspect and now you can see i get my console log on the screen as well or if you really want to see what's on the logs here you can open up your command j and you can see it actually comes up in the logs when it's running right so if i was to clear my logs and i was to refresh or r i always build complete it's going to reload and then you see i also get here but obviously that's a bit annoying to look at this one kind of gives us a nice little view so you can see i'm pulling in our actual back end stuff from sani it includes all the restaurants as well and we can use this now to actually implement the ui on the front okay so good progress so far and i'm gonna get rid of the console log okay are we gonna use redux toolkit yes we are gonna use riot's toolkit quick little bit of water break but otherwise amazing progress 700 likes on its way very soon guys you guys have been incredible so far this is where it gets really good okay it's gonna get juicy now okay so four we've got the feature categories first thing i'm gonna do now is go down to our uh where we were rendering the uh featured rows before and what i'm going to do now instead is i'm going to say okay jsx featured categories yup have categories even spot that right featured categories um i don't think i did no cat agrees here featured categories uh dot and what windows i'm doing optional training so there we go giancarlo that's it smash that button thank you uh we're going to do optional training in case for whatever reason in the beginning it's going to be undefined so that way we don't want to kind of you know ignore it but it's empty eraser it should be fine but still right i'm going to say each time we loop through it there's a category now you can use a flat list here as well right do not get confused you can use a flat list but i'm going to use a just simple sort of comparison to what we're typically used to in react native react in next chess then what i'm going to do is i'm going to basically use a featured row but instead of using this set sort of stuff i'm now gonna also first remember whenever you loop through something always include a key in this case the category here would be category id and then the id here would be category id the title would be category.title uh name sorry category.name and this is coming from the backend now so obviously what i've done here is i've done the work for you but i basically console logs so i could see it then i basically use the appropriate values accordingly so this one's gonna be category dot description oh this one's actually short description short description so if you notice here we have a short description okay now if i hit save bam we should see oh look at that look we've got firstly we can get rid of these we don't need the hard-coded crappy ones anymore now it's actually pulling from the back end and loading it so if i was to refresh just to prove to you this ain't fake now boom offers near you featured tasty discounts there we go so the textbook pulled in but you're probably wondering oh sunny but you're not actually pulling in the next one well i'm going to show you how to do that now so inside the featured rows okay we can now jump into our featured rows and we're going to do the same thing a user effect which is going to do a fetch call on the back end but it's going to make a special query which is only going to get the restaurants for the id of the restaurant row that we're in okay so i'm going to show you how to do that so we say use effect and this one is going to be like so it's going to have this okay and then what we're going to do is we're going to go ahead and say sanity client so in this case firstly we need to import our use effect which we've done i'm going to say the client and then rename it to standing client just to be lazy standing e client i like showing these little tricks dot fetch right and the query that in question here is actually this over here so i'm going to show you how we do this one all right so if we go over to remember what i said always want to kind of test it out so what i'm actually going to do here is copy this id because i'm going to need this and then i'm going to pop this down here for a second and then i'm going to just grab the query that i have for you guys right don't worry you can research grok if you really want to learn it but basically what i'm doing now is imagine i was querying for an id like so okay so if i was querying for an id that looks something like this right so saying search for the featured posts right only where the id is equal to this one get me all the same stuff and get me the first result that comes back so at this point you see it found it and it gave me back that one with the id now obviously we don't want to do a hard coded value so how do we do a dynamic value well firstly the query is good so we can use it um so now what i'm going to do is okay so i'm going to go ahead pop this in like so so bam and then you can see here we've got this dollar sign well the good thing with this dollar sign is we can actually go ahead and after we do the fetch call as the second argument we can pass in params as you can see here so this is an object where we're going to pass in the id and what we're actually doing here is it's technically like this right so the id is corresponding to this id and the id that we're going to use is here but because of the same name we can actually get rid of this and shorthand it so in this case id now what we're doing guys is we're actually going ahead and passing in the uh the id into the query so now whichever row i was in remember we're passing that through on the home screen right the id is a category id so now whatever whichever one we are on it's only it's going to go and fetch that information okay then what we're going to do is prepare a piece of state and we're going to call this one restaurant right and this is going to be a we got to import from you state like so all right check this out so bam and then what we're going to do is we're going to go ahead and set the restaurants when we get the response back so we're going to say then the data will come back and what i want to do is i want to set the restaurant to the data that came back optional training it could be on undefined and restaurants data dot restaurants okay so at this point we have our restaurants in question so i'm going to do a little test and console log the restaurants out and see if it's all good right so this point bam we've got four restaurants that came out for the first one nando's yes awesome stuff the second one we have yo sushi okay so now we've got the data to play with so now we can essentially render it out so before where i was rendering out these static information ones what i'm now going to do is i'm going to go ahead and instead pop in mine okay so i'm going to show you how we do this now it's going to be restaurants restaurants.map for every single restaurant right restaurant be careful not to import that do a direct return and here i'm going to essentially put in you guessed it it's going to be the restaurant card okay but each of these individual things remember first thing we want to do is actually give it a key the key here is going to be restaurant dot on uh underscore id okay now for all of these ones i'm going to save you a little bit of headache i'm going to basically shorten it for you so these ones you want to replace with the following it's gonna be restaurant the id image address name dishes rating short description type name so forth okay hit save now now we can see convert it to a valid url that's fine ignore that for now i'll show you how we can fix that it's because of the image url so i'll show you how we can get around this now so i'm going to get rid of this all these static things and now this is pulling in the only thing we have to fix here is if we go to our restaurant card right where we have the image right remember we're pulling in a sanity url that doesn't just magically give us a sanity url that we can use right remember that helper function that we created earlier from sani so this one right here we're actually going to use that so we export it right so i'm going to go back to my restaurant card and here i'm going to say url for this imports it from sanity i pass in the sani url okay which is an image source and then what we do is we say dot url and that will give us a string value we pass through to our image prop and just like that bam we have our images being pulled through amazing stuff really clean really nice smash the thumbs up button if that was kind of cool all right so this is literally being fed through now from our sanity back end right so these are featured menu categories that you see over here is how you're seeing the information on the front right why not support your local restaurant tonight and i'm going to say just to prove to you that this is real i'm going to say hashtag popfam hashtag popfam publish the changes and just like that in a short second or two we should be able to see those differences in a second right so i'm going to go ahead wait a sec we should see it takes a second sometimes to propagate and there we go why don't we look restaurant tonight hashtag fam boom right awesome stuff so you see how incredible sounding it really is right it works really well allows you to have a really easy customizable platform uh and your non-developers can come in and change this out to make it look right right so almost 700 likes thank you guys so much for the support you guys are going incredible right now next step is to get the categories up and running as well so let's go ahead and get that nice and clean all right so it's going over to the categories this one's a very simple fetch statement so first thing we do is prepare some state so we're gonna have an empty piece of state pour this in then we're gonna have a use effect the use effect is gonna load on the mount of the component we're gonna go ahead and say that it's gonna do it once initially when we load then i'm actually oh and by the way guys just a quick summary in this one id was used here which means that we should actually be passing in the id here as well because it is part of a dependency array just a heads up okay so at this point now i just want to go ahead and do the following so i want to go ahead and say use effect uh client let's pull this in i'm going to rename my client to sanity client oops make sure you spell it right this music is not bad i've actually been updating this as i code so it's going to help you out right uh is this bird about sunny's fa list of favorite dishes hell yeah you know it is it secretly is sanity client dot uh we're gonna say fetch in this case back ticks remember and the query here is actually very easy i'm just going to go ahead and query for all the types where the category is type category right so if i go into my vision over here i go ahead and test this out you can see now i get all the different ones back for like offers pizza all that kind and remember there's an image now notice how that that's the image i was talking about see that that's not an image url so we have to use our sanity helper to convert that into a image url okay so we fetch it when it comes back we're going to get the data we're going to go ahead and pop the data into set categories like so okay now instead of rendering out these endless cards over here what i'm going to do is i'm going to say categories dot map we're gonna go ahead and render the following as a response right we're gonna go ahead pass in the category card and remember the key is always a crucial thing that we must do we're gonna say category.underscore id to give it an id that we can use for the image url we're going to go ahead and say url4 pull in our sanity helper we're going to say category.image.url okay and what we can do here guys is we can actually set the width as well so you can actually do some little attachments so you can actually do mid sort of transformations of the images so we're going to go ahead and just say the image is a width of 200. i'm just going to show you an example of how you can do that right and then we're going to go ahead and say category dot name and so forth that actually means it won't go ahead and get like a bigger image or whatever it'll just get there it'll shorten it at the sanity request side and then it'll give us that value all right so i'm going to go ahead and get rid of these now and we should see our categories pop in bam just like that we see it right if i was to get rid of this it would actually go ahead and fetch it but it it might get unnecessarily big images right when you could just do this instead all right um cpl says hello from georgia prada mxc says this is insane thank you so much turkmenistan what's up guys 700 likes broken through and we have so much cool functionality to still go thank you guys so much this is incredible right this is looking really good right now right so we've got nandos all this kind of good stuff now what i want to do is the next step right so we've successfully created our home screen we've successfully created uh a connection to sound ecm at the back end and now what the next natural step is to go ahead and make it that way when we go ahead and click one of these it actually takes us to the screen where we can see our uh our the restaurant okay so how do we do that right this is actually simpler than you think we're gonna go to app.js and we're going to add in a second screen okay so first thing we're going to do is now but just to make it extremely clear now we are building the restaurant screen okay so this is going to be the restaurant screen so when i click into nando's it will show me that all right so hopefully that makes it clear we're going to create a new stack screen so here i'm going to call this one a restaurant this key is important it's how you navigate between screens and then this one's going to be called the restaurant screen okay so this one i'm going to copy and get ready guys redux is coming very soon as well right we're going to go to our screens over at the back and i'm going to create a restaurantscreen.js okay dojs now react native functional export component there we go react restaurant screen and what we want to do here guys is we're going to go ahead and start building out yeah this screen okay so first things first how do i have it so when i click on one of these it takes me over to the nav restaurant screen well it's actually pretty simple right what i do is first i need to correct this um like so important there you go no error is as good and now when i go into my featured rows i go into my restaurant card that touchable opacity so this one right here when i click it i want to navigate to the appropriate place okay so in this case what i can do if i go over to my restaurant card so restaurant card now what i want to do is i want to basically say um where is it gone uh touchable opacity there we go i'm gonna say the following i'm gonna say on press you should do something right so in this case i'm gonna do some bit of code execution here and what we can actually do here guys is we can go ahead and say i need something called the navigation object right so this one is we use on use navigation hook and from react native navigation and this allows me to basically navigate between pages okay so thank you universe code appreciate you dude so in this case we're gonna say navigation.navigate from one page to the restaurant page okay now notice how the key here is basically the key associated with the stack screen okay 700 likes i know right it's crazy this is awesome right and then what we're going to do here is we're actually going to pass some parameters alongside with that re-routing this is actually going to be the props that we passed in over here so think of it this way right i click this oh firstly it took me over awesome stuff and you got the default header right and notice how you also have the swipe back functionality right so this will actually work it's just not working for me right now i can't seem to click the edge but basically you can actually swipe back between that as well but when i navigate i'm passing this information along with the navigation right so that's what i want to do here and then i'm going to do some clever stuff with redux right but basically when i navigate here i'm essentially going to the next screen so now we can start building out the next screen so i'm going to go back to the restaurant screen and here is where we start getting things pretty interesting right so for the restaurant screen right now i'm going to go ahead and pull those arguments that i basically passed along how do i do that i use something called the root okay so essentially i'm going to say use root right from react navigation so there it's actually inside of this what i can do is i can do some clever destructuring here inside of root you actually have root dot params and then you would have like dot id dot title dot image url all that good stuff so what i can do here is i can destructure this i can get the params out and i can destructure that and i can now pull out all of the uh params that i passed through so this will have all the information that i basically came through on the screen so if i want to test this out just to prove that i'm not lying i can type in title and you can see if i go in here nandos if i go in here kfc if i go in here wagga mama there we go all right awesome stuff smash the thumbs up button if you're enjoying this right now i want to hit a thousand it's going to be awesome if we do right which we will okay current location we're not implementing that uh today by the way that's just like a that's a ui thing okay in this case text title okay awesome stuff so you can see we passed through the props as so yeah next thing i want to do is i want to basically hide the header okay i want to i don't really like that header there so i'm going to go ahead and get the navigation object and i'm going to do the trick that we did earlier which was use layout effect and remember what we can do is when the when the component basically paints on the screen then i want to basically hide the navigation right so in this case very simple trick we did it with the home screen we set the header shown to a false okay and then what we're going to do is now inside of this screen this is actually entire thing's going to be a scroll view okay so the entire thing is going to be a scroll view like so okay so this is actually going to be a scrollable view so notice how we got this nice little beautiful scroll view aspect here right okay um so at this point and there's a reason why i want to do that because i want to have it kind of pop over there like it looks like pretty nice if you ask me when it does that okay so at this point now what i want to do is i'm going to have um let's just kind of get the first bit implemented so that way you can start to see something so i'm gonna have the view up here so view inside of this view i'm gonna have an image so image like so self closing image and this we need to import from react native the source of this image is gonna be the uri and if anyone can guess it i'm gonna do uri and then we're gonna have a handy little helper function which is gonna basically pass it out of the image url import the you help a function from our file okay really really thank you thank you jatin goyal appreciate you dude so in this case now we should see once i add in a height and width something on the header okay so in this case with the four i'm going to say height of 56 and i'm gonna say background should be gray of uh oops oh my god height of 56 background should be gray of 300 and padding of four and just like that oh that looks nice right so this is looking pretty good so far um okay that's the nando's picture and the next thing i need some kind of back button right because i'm creating my own custom header here so i need a back button so first thing i'm gonna do is make this relative because i'm gonna have an absolute position button here so relative inside then i'm going to have a touchable opacity button okay so the button i'm going to create is this one right here it's going to be absolutely positioned relative to the parent so in this case touchable opacity touchable opacity uh import it like so and then here i'm going to have an arrow left icon arrow left icon let's use the solid variant and here i'm going to say the height of this one is going to be 20 so height is going to be 20 width is 20 so i think i just say size is 20 to be honest uh size is 20. and let's just do color is going to be the uh deliveroo color that's the hash of delivery and obviously you can refactor so i have that as a constant all that kind of good stuff but i'm just keeping it simple today boom okay we have it there now that's almost what i want but it's not there and yet i want this to be absolutely positioned okay um absolute position i'm gonna say top 14 left left five and automatically goes up okay nice uh but i want to make it a bit easier to see so padding to background gray of 100 and a rounded four and this should give it a button till okay awesome so now we've got a clickable button when i click it i want to navigate back so how the hell do we do that well we go ahead and we say on press do the following right so here i can actually go ahead and say and because it's just going to be a one-liner we can say navigation.go back which is a function that gets invoked when we press it so now bam look at that yo sushi kfc uh wagon mama hey look at that that is clean right so if you're liking this right now oh man this is cool smash the sound effect button i know i need that i need that little horn um awesome stuff okay so we've got this working pretty nicely now so you can see moving at a very good pace okay so after this view now we're gonna go ahead and add another view in and this is where we're gonna start to build out this ui right here okay so we're gonna remove a relatively pretty quick right now right so it's gonna be pretty nice speed okay so we're gonna have for this view i'm gonna say it's gonna have a class name bg white okay inside of here we're gonna have another view and we're gonna have the first bit of text and this one's gonna be um title let's hit save there we go okay so nando's popped in all right now i'm gonna slowly start this out as we go along so that way we don't get too far ahead of ourselves uh road to 1k likes oh yes we're gonna get there right so we're gonna say padding x of four i believe yeah i'm buying t on the top axis of four bam push it away from it a little bit the text starts to come alive the minute you start adding this in so i'm gonna say text three xl want to be pretty big and i want the font to be bold boom just like that underneath i'm going to have a view inside of this view i'm going to say everything inside of here so class name should be flex row oh this energy's getting up with this music all right so flex roll space x of 2 space x of 2 and then i'm going to say margin y of 1 like that right so now everything inside of here will be spaced a little bit differently should look pretty good okay and then i'm going to have a few views inside of it because we've got this kind of like quirky setup right so first thing i want to do is have a view and this view is going to have a star icon so i'm going to just import all the icons together so it makes our life a bit easier um so i'm going to import them all together like so all right so importing it all in at the same time so we got the star icon now the star icon is going to have the following it's going to have a color green and then it's going to have the opacity is going to be 0.5 the size is going to be 22. all right boom and arrow left icon has already been declared uh where did i do that arrow left i got it uh we don't need that there okay so there we go we got a nice little star green star and then next to it's going to have a piece of text and in fact to save ourselves a bit of time i'm just going to pull that one in directly we did that earlier with the same view it's going to be a text with like similar to how we span something but a rating so uh oops going back over here that gives us the offers and to make it look the way we want it to be it's going to say flex roll items center item center space on the x-axis of one yeah i see that dude i see man guess thank you dude because pop reacts on fire right now this is when you hit that little flow state and you know you're in that flow state right so we're going to copy and paste that again and you can see we've got the next one next to it okay but i'm going to change the next one to be location marker icon the color of that one is going to be gray uh opacity slightly different 0.4 looked a bit different size 22 says same and then we're gonna have nearby address instead for this now so instead of all of this we're gonna have nearby address now you can see it says nearby clink street awesome stuff right so looking very good so far right clean ui thank you the ui in this build is beautiful i know all right so we've got the view outside of all of this now just quick little check for me from my side um where we have margin y of one outside of this view i'm gonna have a piece of text and this is gonna have the short description so short description now this piece of text is gonna have the class name which is gonna have text gray 500 margin top of two padding bottom of four bam and then you can start to see like it's honestly these little ui differences that start to make things come alive right you can really start to see an app start to shape when you start adding in these tiny little differences right like look at that it's just so beautiful right it's crazy like when i was doing this i was like oh man sagai yandere says papariya thank you dude for the support 800 likes inbound keep smashing those likes guys if you're enjoying this content right now okay so underneath here we're gonna have a button so this is gonna be a kind of a clickable have a food allergy button okay so touchable opacity there we go inside of here we're gonna have a question mark circle icon so question mark circle icon this is gonna have color gray so it's gonna be color gray uh in fact i'm just gonna save ourselves a little bit of time there and just pop that in because you've seen me do that a couple of times so boom there we go and after that we're gonna have a bit of text and a chevron right icon next to each other right so it's all next to each other have a food allergy chevron white the color will be the green that we're used to the styling here is more important when it comes to detachable opacity so flex row immediately puts it into a line okay the flex one means that the middle one's gonna set enough space since they use as much space as you want items should be centrally aligned then we're gonna say space x of two so space x of two and then we're going to say panning should be four border on the y axis so you see here now we've got a nice thick border or there should be gray value 300 okay so value 300 bam nice um there you go look at that looks beautiful and it's clickable as well all right so you could obviously have a second screen after that which is if you have a food allergy handle the flow that kind of thing if you really wanted to right now underneath our touch opacity we're gonna have a another view okay now this is where we're basically going to have more of the sort of intelligent stuff happening so in this case firstly we're going to have the text this is going to say the menu oops okay menu and uh this text in itself is going to go ahead and have a class name padding x of four margin i'm sorry padding top of six right on top of six margin bottom of three and font should be bold bold and i'm gonna say text should be extra large bam hit save you can see where we're going with this now okay so the things that you're seeing here are going to be something called dish roll okay so firstly we're going to have to render in the dishes and then we're going to have loads of different dish rolls so this is going to involve me mapping over something okay so what we're gonna do now is i'm gonna go ahead and do a um we actually have all the dishes from the previous thing that we pulled in right so now what we can actually do is we can say dishes dot map so jsx dishes dot map for every single dish i want to do a implicit return right so implicit return boom and some jsx is gonna be shown on the screen now here i'm gonna have a distro component that we haven't yet created and the props are going to be as follow right so i'm going to pass through the dish id name description price and image okay so let's create this distro component right i mean get rid of that so let's create the component disrole.js our retina function exploit component and just like so those things that we passed in are actually going to be passed over here so the distro is actually going to get those props that i just passed in here okay so let's go ahead and pull this in now so we imported our component at the top there we go hit save and now we should see if i go inside of here disregard disrupt so we're going to convert that to eventually look something like this okay so we're moving at a very good pace right now uh we just need to go ahead and make that disrupt look beautiful right so first thing i want to do is start out this draw okay so let's have the first thing is going to be um a touchable opacity button okay so this the entire row is going to be attachable button attachable sorry opacity my bad and that let's just go ahead and fix that touch the opacity and then we're going to have a view inside of it so right now we are literally building this portion right here not the buttons afterwards i'll show you how we do that right so inside of that view guys we're gonna have uh three pieces of text um the first is gonna be the title and the name and description we're going to pop those in like so so name and description come in the next thing is actually currency now because we're using currency i'm actually going to install something called react currency formatter which is actually going to help me in a sort of you know include or help me correctly format that currency so i'm going to go up a level so i'm not installing it into sanity i want to install it into the correct clone npm i install react currency format amazing stuff guys really really doing well right now we're doing incredible for timing as well okay so we've actually got a weird one here what's this uh unable to reserve dependency tree cannot resolve propriocene um interesting okay i don't think i've installed the correct thing then so let me actually go over to uh google quickly react currency formatter let's go ahead and see okay so i did do this before which is fine um let's see mpmi rate currency formula okay interesting i actually did it with yarn i'm not sure if that's gonna break something here um but in whatever the case let me see which one i use so react currency format i used version 1.1.0 so here if i go into my package.json and i add in manually myself let's go ahead you guys it shouldn't have actually make you kind of you shouldn't break your one i want to make sure oh no sorry guys no that's right interesting okay okay um in that case what you can do is okay i initially was using yarn in the beginning so what i'm going to do is i'm going to switch on right so i'll show you how you do it it's very easy you can let's just delete package lock uh in this case don't do it in production do not do this in production right i'm just showing you my way of doing it you're an ad uh react currency formatter and i'm going to carry on with yarn because i'm on a live build right now i don't want to mess everything everything up so this will change it so insanity is still using um i don't know it's using yarn as well okay that's probably why it's weird all right but now you see a yarn lock file gets bro uh built out instead and it should be all good okay okay so once that's done oh that's jokes yeah jay sorry out um once that's done that's so funny but um let's let that do its thing okay so over here now we're gonna eventually use that currency format okay so the currency format are in question is this one right here react currency formatter and the way we use it is pretty simple we basically go ahead and say we put inside of a text box and then we say currency quantity price is what we pass in and the currency you just specify from like usd gbp all that kind of stuff right sometimes your expo will quit look at that it happened to me just now right so in this case if it does quit don't freak out it's okay it happens what i recommend is you just come here just hit uh i or you just restart your bundler that's completely fine it happens in fact wait for this to install because that's actually probably why it's freaked out okay so what i'm gonna do right now is carry on coding and then when we get around to that point when it kind of finishes this dependency installation we can carry on so this is right now the currency that would have popped up on the screen all i need to then do is have the image next to it okay so here i'm just going to blind code i'm going to say view inside of the view i've got an image that image is a self-closing component which comes from react native uh we're going to say that the source in this case is coming from our uri which is a sanity url okay so in this case it's going to be the url4 our little helper we're going to pass in the image and we're going to get the url out of it okay image dot url dot url bam okay and my thing is freaking out there you go okay now for this one i'm going to say the class name is going to be a height of 20 width of 20. i bought background it's gonna be gray of 300 and padding of four okay and then what we're going to do is i'm going to add a little bit of custom styling here i'll show you see what i mean it's actually completely fine it does it all the time all right so yarn seemed to resolve the dependency tree a lot better all right so that's that helped for me right so if you can't if you get the same issue use yarn in this case right i'm not gonna explain fully why but at this point um but there you go okay so just do i it should open up again should be fine now okay let's download the new bundle let's just space this out a little bit give ourselves the most space that we can possibly have this is going to go ahead and build the bundle out and boom there you go all right see all is fair and well we do nando's now i get the price and it works okay awesome stuff so here's style i'm going to go ahead and say that the border should we should each of the pictures shouldn't have a border border widths of one and the border color is going to be like this slightly off gray okay so i've saved this value here okay now we've got this nice little kind of you know pictures coming up and we just need to get that looking like that right so how the hell do we do that okay so it's very easy i like to say easy but it's it's it's pretty it's just practice class name equals background white we're gonna say border padding of four adding a four hit save immediately we start to see a little bit looking nicer when i say border gray so border gray 200 okay and now what we're going to do is we're actually going to have a little bit of a fix on the view so this is first it should be flex rail flex roll we've got turkey in the ass what's up my flex roll awesome and then the view over here so firstly i've messed something up so we should have had a view and then this should have actually been in a separate view so i made a little mistake here so our image here is in the view okay then this view right here should be in interview okay so this should be in the view like that there we go and then this one should be flex one so class name flex one and padding on the right of two uh okay i made a silly mistake here let's fix out uh okay so i've got this view i have there you go that's wrong and this is not what i wanted to do okay i have my view inside of my view i have another view which is this one that's fine and then here i need to have a piece of text okay and then this one is going to be flexural i think i need to surround everything again yeah okay i mean i know i messed up let's add a view and we need to surround all of it inside of that view there we go this one is going to be flex row x-ray that means that the image will go on the right nice and then this one is going to be flex one padding knife two bam fixed all right oops now i should be panning right too there we go okay awesome looking pretty good okay and uh the text largemouth okay cool and for this one we are pretty much golden at that point yeah so this is looking good okay now what i want to do is when i click this right i want to have it pop out with your like quantity modifier okay so let's go ahead and do something along those lines right so first i'm going to have a piece of state which says is pressed right so i'm going to say use states now let's do that you say it's a bit is pressed change your eye here to capital y and firstly we're going to say false okay now based on this we're going to go ahead and say if you press it i need to show something on the bottom of the screen so what we're actually going to do here guys is i'm going to put a fragment around it around the entire app right so it's just like an empty kind of you know container imagine that and next to the touchable capacity i'm gonna have this pop out okay so let's go ahead and do that now so underneath i'm gonna say if is pressed is true only then should i show on the screen a view oops and that view should have another view inside of it and that's going to have a touchable opacity opacity inside of that this is gonna have a minus icon so it's gonna be a minor circle icon okay and let's just do an import now while we're here so let's go up to the top plus icon and the minus icon so you've got the plus icon and minus icon let's go here if i press it nothing's happening right now we need to make it that way when i on press equals um [Music] i'm gonna say set is pressed to the opposite of is pressed okay so what this is doing now is it actually goes ahead and it's gonna say can't find variable items wherever i've done that oh oops i've actually gone ahead and skipped ahead uh so let's kind of get rid of that for now i'll show you what we do there okay so if i press it now boom that pops out okay so now we can kind of dev it make it look like we want and then kind of get past that issue okay the next thing i want is underneath that touchable plastic we have a piece of text and this is just gonna say zero items to begin with okay then we're gonna have another touchable opacity where it's gonna be for the uh plus icon okay so there you go let's start this up make it look a bit nice the view here is going to be bgy bg white almost 800 likes guys smash that thumbs up button thank you so much for tuning in px4 there we go and then the view here we're going to go and say flex roll and the item should be centrally aligned so items on the central axis space between them of two space xl2 everyone's focused today guys let me know if you're coding along today spacex of two panning bottom of three bam nice and then for the touchable opacity um for the actual icons we're actually going to go and say that the color should be the delivery color nice right and the same for this one the color is going to be blue there you go now the only issue we have here guys is we have this weird kind of like situation where that line is at the top right the definition sign is the closest one thank you so much dude appreciate you um but i want to have it so when it when it's pressed i want to hide the border bottom okay so the way you do that is you basically go ahead changes to backticks and then you basically go ahead and add in a little conditioner you say is pressed then you basically want to hide the border background border bottom so it's pressed only then do i add in border so border b um zero okay now if it's pressed you see how it hides the border bottom it just looks like it's part of it right it's awesome that's nice okay so now what we need to do guys is this where we add in redux so this is where redux comes into the mix redux is essentially going to allow us now to go ahead and keep track of a basket and the state okay tell me right now if it's not official no it's not official but it's an awesome library it works really well okay so look at this right now we're going to eventually have it so that way you can go ahead and add items to your basket so this is where we implement redux okay so first thing i want to do is introduce you to the redux js toolkit okay so the redux toolkit in this case is where we're going to be doing everything it's going to be the thing that powers it all up and uh quite honestly it's damn good okay so i'm going to go ahead and pull this up now let me actually bring this on the second screen so redux toolkit.js.org go to the quick start guide you'll reach this page now this is actually very simple to get off the ground we're just simply going to install this with yarn so i'm going to go ahead and copy that do yarn add redux js toolkit and uh react redux the toolkit is amazing guys trust me makes using redux very powerful now why what is redux and why might you want it redux is essentially like a global state management think of it this way right throughout my app rather there's moments where i'm going to want to pass around variables right for example the items in a basket i want to keep this track of this right now it makes sense to have this global store this is essentially what redux does it allows us to have a global state management technique what we can do is split this store up into different sections so in this case we're gonna have like a basket slice we're gonna have a restaurant slice and these are just areas in this global area a global sort of store right so we're going to do that and it's going to be a lot easier than you think to get this off the ground we've installed that then what i want you to do is you need to go ahead and you've got typescript and javascript options create a file called store.js okay so let's go ahead and do b let's go to the outside outer layer so i like to click on package json and close everything off do store.js and inside the store.js i'm literally going to go ahead and pop this in here so this is our initial starting point right this is basically an empty store we have nothing attached inside of it okay heading down to the bottom we need to wrap our entire app in something called a provider okay so heading over to app.js now what we want to do is go ahead and head over here now underneath the navigation container it doesn't need to be it can be over it can be before it doesn't really matter at this point i'm going to import that from react redux and this provider i'm basically going to go ahead and wrap around the entire app okay so you see how it's nesting it all we do need to pass in something called the store okay now notice how the store i exported from the store that we just created okay so there we go no errors this is good okay um sani is actually free and they've got a very generous free tier use the link in the description to make sure you get this free double boosted plan that's going to help you out when you're getting started off with sani okay so at this point we've got the store looking pretty nice uh that says working sorry so now what i want to do is go ahead and set up our redux store so those different slices that i talked about that's the next step in getting this off the ground okay so firstly you can see create a redux state slice so they like to do it in features counter counter size i'm going to do a little bit different we're going to create a folder for those slices called features and this is kind of like the features of this island it could be called slices if you really want right i'm going to make one called basketslice.js and for basket slice i'm going to basically have all the information about our initial about size right so what i would do is i'm going to copy this snippet so that way you guys can follow along with what i'm doing and we're just going to remodel it to how we need it that's an easy way of doing it right so in case we've got counter slice written everywhere here here and here i'm going to rename this to be basket slice right then i'm going to go ahead and rename this slice to be called a basket the initial state of this global area you know like imagine this is a this is a a fragment of that global store right so i'm going to say items is initially an array of uh an empty array okay so imagine initially makes sense right in the side of our global store in the basket area of the slice we've got an empty uh array for items because nothing is in our basket okay so at this point we're passing the initial state done reduces is basically the actions that allow us to modify that global store okay so at this point i'm gonna have one called add to basket and one called remove from basket all right and we're gonna implement these in just a second so each one has a state and the action i'll explain all of this when we build it right and this one is to say state and action like so okay now let's go ahead and get rid of this for a second all right now here the two renamed um actions we have to go ahead and add them here and this basically does something by it it creates something called action creators right so now we can essentially use this outside to dispatch actions so i'm not gonna go through the full redux flow but the way it works is that global store we dispatch an action like add to basket to that global store right we send the message up then what happens is redux stores this thing and says hey i got your message i now know that that means that i have to modify the state in this way right so in this case we just plus in one right but that's basically how it's working then it will reflect on the ui it will update okay so right now what we're going to do is i'm going to basically go ahead and say when you get the add to basket request alongside we can basically pass information along with that request right so what i'm actually going to do here is i'm going to say that the state will become keep whatever's in the current basket so this is uh some javascript happening now keep whatever in the basket but also just add on whatever the payload is so the payload is basically what comes along with the desi action all right so when i add to a basket i can do something like this i can say add to basket and i can basically pass in uh one of like an item right so a basket item and then that will get ahead go ahead and get appended to the current basket state this means keep whatever was in the basket add on to the end okay so remove from basket we'll do afterwards that's pretty good for now okay then what i'm going to do is i'm going to create something called a selector this will allow me to access that global store pull the items from the basket out okay so export const select select basket items okay and this one basically what selectors are used for is they allow us to go ahead and access the state the global stay so state dot what slice are we in we're in the basket slice we're gonna get the items out of the basket slice okay so this is a handy thing we export it so that way we can use it outside so that's the initial basket size setup done then what we're gonna do is connect it to our global store so that way redux knows about it so what we do here guys is we go ahead and we do the following okay so we go ahead and do the following um okay awesome stuff i'm not sure what just happened there i don't know if i actually added in something um okay um so let's go ahead and do this now so at this point we've got basket basket reducer and so forth um oh sorry at this point we go to our store and then what i want to do is where i've got reducer here this is basically where we combine all of the different slices together to make one kind of big thing right one one big store so what i'm going to do is i'm going to say but the basket slice is going to have the basket reducer attached to it and that's basically just a nice word for the the slice right so here what i do is i say import basket reducer from features basket size now what i've done here is i've connected that basket slice to the overall global store okay so now essentially what's happened is we can actually go ahead and uh use our redux store all right and keep track of things pull it from wherever we want so this avoids the problem of prop drilling all that kind of stuff so now when i add and minus i can go ahead and add the appropriate ad to ask actions and so forth when i click that button so let's go to dish row and let's go ahead and say that when i press that button so let's go over to our dishrow one second i like this song okay so i'm gonna now go ahead and say create a function called handle press and this is basically gonna fire off every time i press uh the plus button okay so um actually no here i'll say const add to add item to basket [Music] okay and this is going to be an arrow function and all this is going to do guys is it's basically going to go ahead and dispatch the ad item add to basket action as mentioned earlier and add something to our global store okay so at this point now what we need is we need that dispatch gun or however we send that action so we call this the dispatch right so you use this use dispatch helper function gives us this ability to fire off actions so now what i can do is i can say dispatch and i can basically import my add to basket action and remember the payload that was talking about that can be the id name description price image so this basically this is what i want to keep track of in the basket right that's basically the item that i'm adding to the basket so at this point now what i can do guys is i can go and say when i hit the plus button i want to fire off the ad item to mask it okay pretty cool so now i added an item to a basket i don't know a basket oops oh actually what i want to do here is i want to make it on the touchable opacity so that way we get the nice kind of plus plus right now this zero i want to make this something like this where it says items dot length right so oops items in my basket dot length items dot dot length okay now we're gonna get an error here because we don't have any items what is items right so the way we get items is we use that special selector now we say use selector we import that from react redox and then we say select basket items so that's helpful function that i made earlier will allow us to now go ahead and get the items so now notice how i've got items in the basket but we've got a bit of an issue here because it's adding all of the items together right so we're gonna have to do a little bit of a clever thing here that i'll show you how we do that right but right now we are adding stuff to the basket it's just not rendering in the correct way but if i was to console log the items now we should see if i go over here to our web eye web app sorry um okay that's oh i need to rebuild that one anyway forget that right so if i go here now we should see inside of our basket i've got basically a bunch of things inside this if i add something you see i've got literally that's that's my basket content that's an array of basket items okay so you see an array it's got crunchy almonds it's got chicken wings it's got loads of stuff in there okay so now what i can do is i need to create a special helper selector function which basically only gets that row right so obviously this is good we've got a global store right here but i want to kind of only be able to select that one with the id of for that additional row so it shows me that exact value okay so what i can do is add this is damn nice awesome dude um let's go to our restaurant our basket size sorry basket slice um there we go and what i'm going to do now is i'm basically going to create a little filter function okay so what i'm going to say is export const select basket items with id and here what i do is i say state and i do an id and i pass an additional value in and all i'm going to do is some nice es6 work right i'm going to say go to basket items and what i want you to do is i want to filter right so i'm basically going to go through every single item and filter out the ones which match the id that i gave it and this will return an array only with the id that i specified right so i need the items with the id that will come back so now what i can do guys it's really cool i can change from select basket items to select basket items with id and i can basically pass in the state and the id so if i did this now i just want to check something quickly let's go ahead and pop this in here sorry and what we should do is we should say the state it's a callback function we do the following like that state id nice all right so nando's if i do this now perry nuts and now now notice how it only shows me the quantity for prairie nuts only shows me the chicken wings only shows me the family plough hey it works right amazing amazing stuff sure it is our sunny makes only complex bills which we get in love thank you dude thank you so much i thank you code enlightener you guys have i appreciate everyone almost at 800 likes just smash the thumbs up button if you haven't already let's get there let's keep going i want to get to a thousand likes today all right so this is amazing right so we've done that now now i want to do the minus right so how do we do a minus on this kind of thing right so i'm going to show you a little trick and this is going to come like a lot of the time when you're doing this kind of thing so remove from basket let's go ahead and do this now so if i go ahead and do something like this so um i'm going to go to select basket items sorry basket slice okay so remove iron from basket so what we can do here it's a handy little trick that you can do right now i recommend you you've probably seen me do it in other apps other builds that kind of thing um but here what we can do is we can say const index and what i'm going to do is i'm going to say state dot items dot find index okay and what this is doing is it's going to go ahead and find if the item that i'm trying to remove is is in there right i'm basically saying go ahead and check is the id that we gave equivalent to the one is the id that is the id that you're basically looping through is it is there one that matches the action payload id that the thing that i provided and then what we do is we create a copy of the basket okay so i'm creating a copy of the basket and i'm basically gonna modify that print that basket okay so i'm gonna say if there was an index that got returned so basically if there's anything above um zero right otherwise you'll get minus one a minus one means that it didn't find an index right so it wasn't in the basket then what we do is we say new basket dot splice the index all right so basically what this is doing is it's saying it'll go we create a copy of the basket because we never should manipulate the direct copy of the direct object itself we find the point and we basically cut it out cut that item out right don't worry about it just get rid of it all right otherwise let's just send a little warning in there in the sort of terminal saying you can't remove that because it's not in your basket okay then what i do is i replace the existing basket with that new basket that's been modified okay so just remove basket logic it's pretty cool it works a lot it does it all the time we do it all the time as well so remove items from baskets this one just takes a id and then we can do it that way all right so now i'm going to create a function which allows us to do this right so if i go to dish row i'm going to go ahead and say const remove item from oops my item from basket equals and then we're gonna go and say dispatch remove item from basket put it in action and what i'm gonna do is i'm gonna pass in the id as an object okay now i do want to do some defensive programming here i want to say if the there are no items right items.length is greater than zero if sorry if that's not true then you should just return you shouldn't allow them to like remove something which doesn't exist okay and then what i want to do is i want to attach this button to the minus functionality so on press remove iron from basket okay it's cool let's try it out plus plus plus minus minus minus and when it's zero it doesn't let me do it because of the defensive catch we've got here awesome stuff look at that minus it's removing it from the basket it's adding it for the basket awesome stuff just amazing stuff almost at 800 likes let's go all right so really killing it right now oh that's just so clean now i love how it works um so that looks good okay now what i want you guys to do is i'm gonna do a little tiny tiny little uh difference on the the color here so i'm basically gonna change to say if the color um so the color here is always green right but what if i did the following i said okay the color if the items so if there's items in the basket it should be the green otherwise it should be grayed out so now look at that very nice ui all right so bam and you can probably disable it as well so you can't even disable it so i'm pretty sure you can go and say disabled if items dot links if there's no items on that and now it won't even let me click it so you see how so let me click it if it's not otherwise it disables the buttons i'm clicking it right now and nothing happens look at that boom awesome awesome stuff you can disable the minus button but as in i was just showing you can do a defensive programming approach or you can disable the button but either way it's a good way to know right right so this is looking pretty damn sweet right so the next thing i want to do is the basket so i want to have this little nice basket pop up okay now this basket pop-up is going to have the total so we're going to use that selector we have previously and then we're going to have a basket total as well okay so let's go ahead and knock that one out now all right so firstly i'm going to create a component which is going to represent this it's going to be the basket icon.js and this is react native functional exploit component and what i want to do here guys is firstly i need access to the basket so because of our beautiful redux we can very easily grab that we can go ahead and say use selector super easy to do this we can say select the basket items and just like that have access to all the items in the basket you see why it's so damn handy all right i'm going to need to get the navigation as well because we're going to be navigating with this as well so i'm going to use navigation like so and i need one more final thing right you see how here we have the total i'm actually going to go ahead and create a accumulated value so let's go ahead and go to our basket slice right now basket slice over here and what i'm going to do is i'm going to go ahead and create a um select basket total yeah so what i'm going to do now is i'm going to create a helper function so another selector and this one is going to use something called a reduce function so now again another lovely uh sort of uh es6 function in javascript what does it take to state we're going to do a direct return and i'm going to go ahead and say go through the basket go through the items and reduce this complicated array down to a single number right so the way a reduce works is you have a callback function so in this case you have some kind of work over here and then you have an initial value the initial value in this case is going to be zero every time you loop through you have this accumulator called total and then you have each individual item what we're gonna do is every time it loops through all we're gonna say is total is plus or equal to the item.price and what this does it takes a complicated no no it takes any array goes through it basically makes it into a single number whereby all the prices are basically being accumulated into this total variable so that's the value that gets returned so now we can actually just do this so we can go ahead and say get the total um so in this case cons total or basket total equals use selector select basket total and just like that i have the total of the basket all right amazing stuff really clean really nice all right now what i do want to do is i want to show this on the screen so that way as i develop it you guys actually see what the hell we're doing so restaurant screen i'm going to show that on the screen right now so if we go over to the restaurant screen what i'm going to do is where we've got the entire thing in a scroll view right i'm actually going to have a sort of a fragment around the entire thing because you're not allowed to have adjacent elements next to each other so at this point i'm going to have over here i'm just going to have the basket icon randomly chucked in right makes sense as well because we're only going to see it on this screen so now you can see it's up there it's kind of breaking the whole ui right so i'm going to fix this so now for the basket icon the rendering logic should be a k star it's firstly going to be an absolute button so apps oops class name it's going to be an absolute button position and it's always going to be on the bottom 10 up so 10. i'm going to say the width is going to be 4 and z index is 50 so it's always going to be at the front of the view right so you can see it's actually there now you see how it's there right there right now inside of there i'm going to have a touchable opacity okay and this one is gonna have inside of it um we're gonna have a piece of text and this is basically gonna have the items.length so items.length okay and you can see zeros there awesome and then we're going to have the text which says view basket so right now we are coding this view basket button okay view basket and then we're going to have a text which will have the currency so we're going to use our currency formatter tool and this is gonna have basically the um oops basically gonna have the uh basket total in there okay so now you should see zero view basket three pound twenty four and then there's a number in white you see that zero there's there it's just horrible right so i'm going to basically start this out make it look nice and then we can kind of see it so first things first background i'm going to do a dynamic color of the delivery color so you notice how we got just in time compilation with this version of tailwind css which is awesome right then i'm going to say mx5 margin on the x axis of 5 bam and then we've got padding 4 rounded the corners large flex row so make it like a row and then we're going to say items in the center space between them all with a value of one bam right just like that starts to look pretty good the first one i say text is going to be white all right the font is going to be extra bold so font here is going to be extra bold oops extra bold and then we're going to say the text should be large i want it to be a background color of a slight off green right so it's kind of a cool little effect that we just did background slightly off green padding y of one padding x of two hit save boom you get a nice little number right this is really awesome now okay so muhammad says what are you using to switch between the the files command p command p and then if you do command p it goes to your last file um otherwise you can just type in like let's just say basket slice for example so command p is how i do that very handy good question right now here i'm gonna say flex one to this one because i want this to take on the majority of the room i want it to be text white i want this to be font extra bold i want it to be text large and i want text to be center okay and uh yeah that's pretty damn straight look at that and what's so cool about this guys is because it's all connected to redux store it will literally just work so look if i add something into the basket or okay two items in the basket seven pound fifty let's add a fifty pound platter there we go 108 pound plow there you go bam now when i click it i want to navigate over to the um and notice how we've got this issue that's the only thing i want to kind of tell you about so at this point we were blocking the last one so what we need to do is go over to our restaurant screen and we need to add a little bit of padding here for the dish rolls right so restaurant screen where we've got the um where we've got our button our basket icon be in place where we render out the scrollable so where is it uh here where we render out the dish rows all i'm going to do is simply add in a bunch of padding at the bottom so 36 that way you can always kind of scroll past the last item so that padding allows us to then scroll past it and kind of you know always have access to our ui right so next thing is when i do view basket i want to pop up on the screen the basket screen so now we're moving over to the basket screen guys so doing awesome so far really really great stuff good pace so far and uh yeah i think we're on track to smash this okay so let's keep going 800 likes what i didn't even realize jay didn't tell me 800 likes dude crazy stuff okay so now what we're gonna do is um [Music] all right so now we're going to go ahead and this is crazy all right so product quantity yes we have got product quantity there all right so now if i click it um i'm going to show you how we actually do a very nice thing as well um margin is outside padding is inside the component right so that's the easy way of thinking about that uh someone just asked a quick question so app.js now i'm first i'm going to do is add another screen okay so we're gonna move pretty fast now because we've got pretty much quite a few things to do so i'm gonna add in a basket screen so we're gonna copy this add in a basket screen so here basket and then we're gonna call this one the basket screen so basket screen okay hit save and what i'm actually going to do here is add in additional options so where we've got normal screens where we're typically using here what i can do is i can say the presentation of this screen is actually going to be see you've got loads of options here modo is the one that we're gonna use that's where it pops up from the ground and i'm also gonna hide the header header shown just to show you yes uh i think it was ben carter i mentioned earlier but you can go ahead and hide it here as well the head is shown and right now basket screen is not a screen so i'm going to go into here and create basket screen so basketscreen.js react native functional exploit component bam save back over here on app.js we're going to go ahead and pop it in like so hit save now we should see that it's all good okay now when i click that basket icon i can go ahead and say touchable opacity on press okay and i can go ahead and now do navigation so what i can do here is i can say when you press it navigate to the basket screen and you see that this is where it's good like we got little coupled code so i can write anything i want it's not going to break another area of the app right so it's pretty this is good a good way of coding right you want to basically have a lot of functionality freedom like that okay so at this point now if i do view basket boom look at that guys you get a modal pop-up looking clean right so you get all this good stuff and then bam now we're gonna build this screen okay so get ready we're going to build out the beautiful screen that you just saw so basket screen what we're going to do is we're going to need first if we are going to need the navigation because we're going to have a bit of navigating around here afterwards so let's go to our basket screen and then let's go ahead so const navigation equals use navigation there we go and then now what i'm gonna do is i'm gonna say const um [Music] okay so first thing i actually forgot to mention was when we go on to the restaurant screen what i want to do is actually want to capture all the details about the restaurants that way later on i can use it so what i'm actually going to do is create a second slice called a restaurant slice dojs okay and this slice what you could do is you can even go ahead and copy our existing slice paste it over and then rebrand it rename it as we want so what i'm going to do is i'm going to show you what i basically want the initial state here is not going to be items it's going to be a restaurant with all the fields as no this is going to be a restaurant wherever we've got basket slice i'm going to rename it to restaurant slice restaurant slice restaurant slice okay and then for reducers we're going to go ahead and have just a very very simple one called set a restaurant right whereby if we go ahead and pass in the payload i just want to replace it with that so here yeah set restaurant now we set this to the action creator we get rid of this one easy ass get rid of these two selectors we don't need them and instead of this one guys i'm actually going to go ahead and have a select restaurant which actually does similar thing but it just pulls out the restaurant from this piece of slice okay awesome stuff hit save now i need to connect this to the store so over here right now we're gonna have the restaurant slice and here we have a restaurant uh reducer uh ignore that's right restaurant reducer reducer and then here i'm gonna go ahead and change this to a restaurant restaurant reduce our restaurant size there we go awesome stuff no errors good okay so now i've got a restaurant slice where i can basically go ahead and set the restaurant in the global store really nice stuff so what i'm going to do then is on my restaurant screen when i get navigated there i'm actually going to go ahead and do a little dispatch which is just going to go ahead and help me keep track of which restaurant that you're actually in okay so at this point i can say use effect and uh that's when the component mounts what i want to do is dispatch and this is actually a dependency here so you can say dispatch i need my dispatch object so dispatch object is used at dispatch and then here what i can do is i can say set the restaurant to the payload which is going to be all of this here so basically i'm capturing it okay there you go i'm capturing the restaurant now i've got the restaurant in my global store okay so i can actually go ahead and do that right so really really cool now at this point we can go back to our basket screen and start building out the basket screen okay so basket screen let's see what we got here so first thing i want to do is go ahead and we've got the navigation i want to then get the restaurant that we're in so restaurant because remember we're in a different screen so rather than prop drilling and all that headache just add it to the global store and then job done we can pull it whenever we need it from any screen okay select a restaurant oops select restaurant i like this song why adding dispatch and depends here um because it actually does pop up believe it or not in a lot of situations right i've had it where it pops up asking me to complain i personally don't typically do it but i've had errors where it would say you haven't got dispatch which is a technically a variable independent array but i i kind of agree with you i just thought i might get called out on it all right so in this case const items equals use selector select basket items let's go ahead and import this okay and then what i need is the uh dispatch function dispatch equals use dispatch guys the retention today is incredible thank you so much guys keep smashing the thumbs up button if you're enjoying this content i really do appreciate you guys now what i want to do is notice how i've got grouped objects right so in this case i don't want to have objects where it's basically just like it's going to show preparing nuts like 20 times on one screen i should say 20 times appropriate nuts all right i know i know and then we're going to go ahead and say so at this point what i need to do is i need to create some kind of a handy screen a handy function which is going to group all of the items together right so what i'm going to do is going to go ahead and do the phones i'm going to say i'm going to create something called a use memoir a memo right use memo as like an optimization you don't have to use it you can use a usefup but it's basically just going to if the value of items did not change it won't recompute the value put it that way that's kind of how it's working right so i'm gonna have a piece of state which is gonna basically turn our items into a grouped item list right so grouped items are basically going to be a list of items whereby it's grouped and we can go ahead and list it on the page as we need to okay so in this case oh and also by the way before i forget basket icon should say if uh items don't end to zero then return no because we shouldn't be showing a basket if there is nothing in there there we shouldn't be showing that button if not okay so at this point now use memo we're gonna say const grouped items and this one i want you to basically you can pause it basically have a look at as to how you think it works but i'll explain it quickly um but basically we're doing a reduce function so remember reduce takes something relatively complicated down to something very simple and what we're doing here guys is we're going to go ahead and say the following right so i'm going to copy a snippet in here and i'm going to explain what it does what this is doing is it's essentially saying go ahead and um go ahead and loop through your your items in your basket and basically we're creating an uh we're creating an array now we're creating an object sorry whereby the key if the key exists then go ahead and push the item into that key so imagine the end result was we'll go from a list of items in an array fashion to all the individual keys and then inside of them so imagine you had the peri-prairie nuts right the key for the periphery nuts and then you would have an array inside of it of all the different periphery nuts in the order so imagine you had 20 pair of very nuts you would have like the key and then you have 20 things inside that inside that object right and then the next one would be like mac like a half a chicken and nando's that would be the id for half a chicken then you'll have like six half chickens inside that array and that will allow us to do the group logic okay so that's essentially what this does here okay then i'm going to say set grouped items and we're basically going to set it okay so now that i've done that we can actually go ahead and use it right so i'm going to explain this in a second now so if i go ahead and say console.log grouped items in basket you should be able to actually see now so imagine if i go to my nando's i add a bunch of things to that basket results what is results uh this is because i have not done the following results oh sorry um my mistake i actually made a silly scenario there uh results and item i've got today's results item okay so we've got things in the basket and let's just see now so for example here you go yeah so it's there might be a little bit tricky to see but here you've got an object the key for prairie prairie nuts right and then you've got an array of three of them so there's three property nuts in that key and then the next key there's an array of one three chicken wings does that make sense right so now we can actually group things together accordingly right so that's basically what we're doing here um you can use use effect yeah you might be right i'm gonna say it's been i wrote this up pretty quick use memo as if you have a variable assigned to it i believe i can't remember what exact use case but use memo use effect all right in this case is to use fetch just to keep it safe and then yes you can there is a correct way of using used memo i'm not going to remember how to do it now it's been a while i'll be honest with you but yeah that's uh that's my true uh explanation of that okay and yes i don't remember this stuff all the time off the top of my head so there are odd times where yes we'll mix up okay um okay leave the web bundling that's fine okay so at this point now that error is just for the web uh it doesn't matter all right so at this point we've got this patch we've got the grouped items they group correctly um let's go ahead and do the phone so i want to have a safe area of view so firstly safe area view and like so okay and then what we're gonna do now is i've got a view inside of there and then i've got another view inside of there okay and inside there i've got another view so basically i'm building this ui right so firstly we're building this top part portion okay so the middle portion is what i'm building right now so which is going to be in the separate view that we have here so inside this view i've got two pieces of text the basket and the restaurant title okay so a basket restaurant title comes in first the next thing that i have is outside of this view i have a touchable opacity with the x button okay so touchable opacity with the x button and in fact i'm just going to chuck it in because he's might as well yeah so touch ball navigation go back the exact icon i need to import my icon so let's go ahead and do that right now um let's pop this in over here so boom x circle icon and attachable opacity we need to bring in as well okay so i'm a yo sushi i've got some stuff and basket there you go and this goes back so there you go all right so right now i've got em to my basket nando's cool so at this point i'm gonna do safe area view last name flex one bg white save okay the view here is going to be flex one oops last name equals flex one bg gray 100 and this view is gonna have the next bit of styling involved so this one's gonna say padding of five border on the bottom oops border on the bottom and the border in this case should be the green from delivery so border there we go bg white and then i'm gonna say shadow should be extra small boom okay nice um yeah thank you guys yeah you're right uh grouped items you don't really need state of views yes you are correct guys you are correct yeah it was just a late night coding session yesterday i did i did quite a bit of stuff and i just didn't check it properly but yeah the used memo if you want to do it correctly you could do conscript items equals use memo i introduced to be honest with you here i don't think it would make such a difference in what we're doing because either way you'll be recalculating every time you change your basket outcome but it'll be more case of if you have some really complicated stuff but yeah thank you guys for sharing your opinion i'm honestly happy to say i'm not always right guys i'm always right but i try my best to teach you the best i can all right so there you go do this view basket okay cool so in this case we've got this here touchable opacity and then outside of this is where i'm gonna have um a view and i'm gonna have the image that's what the community is about though right that's what i love so much that i look oh and jamie davis jumping in helping each other out that's why we build something like the popper farm it's not about being the best developer it's about having the ultimate community that can help you get over anything that you're trying to build okay here we're gonna have a nice little picture i'm gonna pop in here and uh i need to import my image oops whoa that was crazy i didn't know i could do that oh wow synthesizing okay cool okay github co-pilot does if i do option enter i didn't know that okay one um last name equals uh high of seven width of seven there's never one great yeah thank you jamie it was awesome jay was best community house on a that's it dude seven bg gray uh bg gray three hundred i'm having a four rounded four and uh that should be that's oh my god i always make this mistake i did it last time when i was building it oh there you go that bar yeah oh nearly at 900 likes let's go guys this goes so crazy all right view basket there we go um delivering 50 minutes that one's the next one say text i'm actually going to just go check this in the text and we've got this all right they've got that and then the view here is gonna be cast name and it's gonna be flex row items in the center space x of four heading x4 panning y of three and background white and then margin wire five bam look at that oh just the way it kind of comes together is is actually unreal sometimes like it's so so nice um thank you to us thank you so much dude yeah it gives you a bunch of different questions what he thinks yeah that's cool jamie i didn't know that yeah oh that's pretty cool oh nice look hey pop fan next thing i want to do is actually have the uh the items listed out okay so it's gonna be a scroll view so here we say scroll view everything uh we're gonna import that from rent native and then here i'm gonna have okay so we have remember that the structure we had there was actually sort of a little objects with the keys with arrays inside of them so what i need to do is i say object.keys passing the grouped items in the basket and then we map through everything okay so object or entry sorry i want to have the values as well right so grouped items in basket and this will give me if i map through it actually gives me an array back with the key and items and then what we can do is we can go ahead and implicitly return the following right now this one what i would recommend you do is make sure you put a there you go and uh here we're going to return a view um a view oops a view there we go uh the view has a key the key is this going to be this key and it's going to have text inside which is going to go ahead and say text which you can say items.length let's have a cross so let's go in this so three times one times there we go that's good let's go ahead and add a bunch of things and so that family pla chicken breast to the dust like see yeah three of these nice and then i'm gonna have the image of the actual um food alongside the item and now notice what i've done here item zero item zero because it doesn't matter if i remember that key is gonna have like 20 of the same things inside of it for example like three prairie nuts so i know there's one in there because it's popping up on my screen all i need is the details of one of them hence i get the first one so item zero okay so that's why i'm doing it like that just in case you're wondering and then the price i'm gonna do the same thing and i'm also gonna have a remove button which i'll do in a second as well okay so we're gonna have the text then i've got the remove button currency i need to import oops um let's import that at the top reason i'm moving a little bit fast is because i know you can pause it afterwards and stuff so it makes sense to kind of skip over some things like in the sense of being fast about it i guess there you go um we've got the currency there as well and then touchable opacity at the end touchable opacity um we're gonna import that phone now we've already got that imported and then it's gonna be a texturing here but we're gonna dispatch a remove from basket okay so basically i'm going to pop this in explain it so bam so it's text we're dispatching a remove from mask action so notice how if i press this remove from basket isn't fired up because i haven't imported it there you go now it should work if i was to remove it now the chicken wing disappeared if i remove one family plus see how it says two family platter one family power and again it disappears so it really really works right nicely as well okay um nice so this is working pretty well now we just need to style it so it actually looks pretty damn good because right now it's awful all right so the key here for this one is we're gonna do class name and then we're gonna go and say flex roll items in the center bam hit save look how immediately it's going to come together all right space between the x components of three bg white and padding on the y axis of two and on the x-axis of five bam just like that amazing right now a little trick that i love to do all the time is when you've got children being mapped through like so you can actually do something called divide outside with tailwind so divide y actually as a divider between all the children components and you could say divide gray and just like this bam you get a nice little ui right and that's actually a scrollable container there so it doesn't matter how long it gets it's going to be scrolling awesome stuff now let's add a few things in there and actually you know what the item length should actually be a little bit different as well this one i want to make it the correct color so let's go ahead and do that right now so class name equals there we go and let's just add in tons of stuff now so family plus chicken butterfly all right so we've got loads of stuff here look at that oh beautiful all right nice little layout okay now the flex one means that that takes up the majority of the room as well so it's really really nice right so awesome stuff we've got the remove which works so chicken butterfly remove it bam out the way done this is looking awesome right 900 likes on the way thanks so much guys hit the thumbs up if you haven't already all right now outside the scroll view we're gonna have the subtotal and all that good stuff right so this is gonna be absolutely positioned at the bottom of the screen and we're gonna move it around okay so this point now actually it's not absolutely positioned it's just pushed down because the scroll view is gonna be taking up the room okay so now i wanna do is i wanna have the view so let's just go ahead and say view and here i'm going to have the order toast let's just do text oh no sorry i missed it part right so order view view okay so first step is i'm going to go ahead and have the okay so i'm just going to pop in the view i want a bit blank all right subtle subtotal there we go so what i'm trying to do now guys is this one here okay so the subtitle all right it's a subtotal first and then we've got the text then we've got currency so um now i've done a reduce here but actually we can use our special handy little thing so if i pop this here but instead now i want to do total so we've got the basket total that we can get so we can say const total or basket total equals use selector select basket total and this will give me the appropriate number so for now if we go over here to quantity bam we should get the basket total so 235 pound if i remove a 50 pound thing there you go it's correct it's working okay so looking pretty good already and then i want to make the text gray here so for these so class names both of these are going to be gray class name text gray 400 400. nairobi kenya now it's what's up awesome okay this is looking good and then class name equals flex row save okay and justify space between boom push it apart nice this overall parent container should have a panning of five and it should be bg white so bg white margin top of five and space on the y axis between our children components of four which makes sense in a sec once i start putting extra things in okay so this view now i'm gonna go ahead and copy this uh and we're gonna have the delivery fee so delivery except the delivery fee is gonna be a set 599 because this is a demo right so now you've got delivery fee i'm gonna have the same thing again for the order toe um oh yeah so this one is going to be the basket total class 599 and this is going to be the ordeal now for this one we're just going to have it as black and it's going to be uh extra bold so this one's going to be a font extra bold we don't need anything here and now just like that oh look how nice it's starting to look like clean guys clean and at the end we're gonna have a button which has place order now yes we're not doing payment stuff because as i mentioned this is a one live stream we're not going to be up to everything in this one live stream right the reason why there's teams that are big exist right but right now we're going to go ahead and actually have the touch of opacity underneath which says place order and then we're literally at the pace ordering screen so touch the opacity and then i'm going to go ahead and have text which says place order inside place order hit save and now let's make this look beautiful so it looks like this one okay so for this button i'm going to say class name rounded lg surrounded lg uh background is going to be the color that i had previously so the delivery color and then we're gonna have padding of four bam hit save looks good and now we're gonna go ahead and say a screen uh text center text center text white text extra large font board just like that wow look at that all right so looks amazing looks cool all right if we go ahead and add some chicken butterfly view basket massive stuff and if it does go over i just want to show you what happens right so this is the good thing about it so if i go ahead and add like a ton of these in a ton of these in so literally one off the menu view basket so you see how it's literally gonna you'll be able to scroll past it as well so you get quite a nice view in that sense right where you can basically carry on scrolling through and so forth all right so it's got a very good ui now place order it should then pop up the next screen so the place order should then pop up this was waiting for the restaurant to accept your order and this is going to be a lovely kind of you know animated screen so i'm going to show you now animations and the placing order screen okay so we're doing very well for timing very good so far let's keep going guys smash thumbs up button if you're excited and subscribe if you haven't already because we're about to do something pretty damn awesome now i promise you that it's gonna get you hyped all right so this next one i'm gonna go ahead and copy the screen uh layout so let's do this this one we're gonna call the preparing order screen so what we're gonna do is we're gonna mock it so that way it takes like four seconds that's that screen pops up for four seconds says waiting for the restaurant to accept jordan then it will take you to the delivery screen okay so again this is all for ui purposes uh at that point you could then replace your your timeout four second timeout with actually fulfillment that kind of stuff but that becomes a full full app right and then you can't do that in four hours it doesn't matter how good you are right preparing order screen is going to be the key for this one we need to create this file now on the screen so let's go ahead and do uh preparing order screen.js react native functional exploit component and now we have the preparing water screen so at this point i do want to change the actual uh modal type here so i want to make this one oh i love this song my options if my own playlist gets me hyped up and i've heard this song so many times this one's going to be called a full screen model because i don't want to actually show anything besides that one mode alright and this one's going to be header shown of course okay awesome stuff and let's go ahead and pull that in nice now what i want to do is i'm going to go to nando's i'm going to go to my basket i'm going to go ahead and place the order so on the basket screen so basket screen i'm gonna go ahead and do the following all right almost there good stuff guys good stuff we're gonna go ahead and place the order so on press we're gonna go ahead and do basket screen nice idea what's up dude uh we're going to say navigation here navigation.navigate to the preparing order screen yes you should be really doing this as a constant assignment if i was doing it in production i would probably do a constant environment wearing a demo and that's just not too bad if i click place order now bam full screen module pops up great start because that's what i want here okay so now what i can do is on the preparing order screen i can now go ahead and get this kind of set up the way that i want right so first things first let's create a safe area view let's import the safe area view from react native and that way we can see it inside there i also want to make sure that the background is the correct color so in this case i'm going to do background um and flex won it so if i do a background this if i don't do flex one by the way watch what happens it does that now if i do flex one it will take up the full screen which is different all right justify center items center immediately centers everything for us okay the next thing i'm going to do guys is use something called react native animatable okay so now we're going to go ahead and do react native animatable this is for animations inside of area now yes you can use the default native expo kind of animations i'm doing it in a way that's kind of cool easy fun to do um so don't yeah chris has too much it works npm is still react native animate animatable save um we don't need that little dollar sign there we go oh actually no oops don't do that i'm using yarn so it's going to be on add there we go cool all right at that point i need to make this look like this okay so the way it works is uh what i've actually done here is i've got the actual picture as a image file right so you can feel free to go find a gif online i've actually downloaded one online and i'm actually using it locally now the reason why i've done it as a download so what i'm going to do is i'm going to go to my assets i'm going to paste in the picture i have so you can go on to google get any gif get the url download the reason why i've done this because when it pops up so fast i don't want it to kind of statically just randomly like pop in like in after five seconds or like if you got slow internet you'll never see it so i want to bundle it with the entire app so that's why i actually download it and use it okay so at this point now in order to use this in the animatable fashion what we're gonna do is import the animations library and then we're going to go ahead and use the animatable image class right so in this case we're going to go ahead and say the following so i'm going to say animatable image source require and you basically go to your directory where the image is at and this animation sliding up is pretty cool that you see they actually slid in up very like nicely there so if i went ahead and refreshed so r um okay sometimes you have to do a forced refresh three times let it load let's go ahead and go to nando's add some nuts go here place the order and you see how it slid up with it oh it's so clean all right hi in 96 the width jeff carrick is amazing thank you so much bao hawkinson good to see you back at jay and sonny thank you so much dude appreciate the support smash thumbs up if you're enjoying it all right so animated images up and then we're going to go ahead and do the text um so now i want to go ahead and have some animated text as well come in right so in this point i'm going to animate some text in so we should be able to see this one slide in so you see waiting for restaurant to accept your order that will slide in together right when it kind of does this thing iteration can't if i put two there it will kind of ping twice and then it will stop animating right and the final one is a progress bar so this progress bar is from a different library react native progress right i do really recommend this library jay showed me it's actually very good all right rank native progress so this one is basically a pretty cool library so we're going to go ahead and do yarn add reactionary progress so here yarn add magnetic progress and while that's installing i'm going to go ahead and just carry on with it so boom pop this in like so magnetic progress and this one i'm going to use a circle variant so if you go into that page you can see all the different variants they mess around with it show you examples i'm just going to show you the one i'm using and bam look at that guys like i'm serious i look how beautiful that screen is right like really there's something else like it looks clean so now if i was to go ahead and do a refresh refresh let's go ahead sani is like a superpower i hope the guys are wrist i mean you see that because that is true it's like a superpower it's awesome all right we've got some items in the basket place the order pow just like that right information to accept your order all right so now what i'm going to do is do a nice little use effect and i'm going to navigate afterwards right so constant navigation and this is going to say use navigation and what i'm going to do is prepare myself here so i'm going to actually create a timeout function so use effect and this timeout function is basically gonna wait four seconds and then it's gonna move me to a different screen so we're basically mocking the accepting order part okay so after five seconds navigate to a home screen right so essentially now what i'm going to do is essentially that's pretty much what i want to do yeah so set timeout it's a block of code and after four seconds should it it should do something so in this case it's going to navigate to the delivery screen but we don't have a delivery screen so it'll come up with an error right now so after four seconds it should pop up a little error and there you go navigate so it's trying to navigate me but we don't have that screen available so after this now what i can do is i can create another screen and let's go to our app.js let's go ahead and create our final screen so i'm going to copy this it's going to call this one delivery delivery and this one is going to be for the delivery screen now which is this screen right here okay so i'm going to go ahead and say delivery screen let's call this one the delivery screen we're almost at the end guys keep with me it's going to be a full screen model head of shown first nice okay and if it ever lags out like that just refresh so go into your terminal hit r a couple of times it will refresh uh delivery screen that's why okay we need to create the screen deliveryscreen.js react native functional exploit component bam go to app.js and pull it in like so hit save and refresh couple times see i'm a bit too fast for it oh god damn it all right we killed it our expo died and we went a bit too fast for it so at this point let's go ahead and the expo start it happens sometimes i'm not gonna lie to you like i said you gotta be pretty patient with this but yeah let's wait for that to load up quick little water break amazing stuff guys really smashing it so far and guys wow honestly the retention incredible incredible i knew this was going to be a fun one for you i'm going to hit eye on the keyboard opening on ios now we should be able to punch ourselves back in jude martin what's up dude official papa fire members in the house all right let's wait for this to load up boom just like that let me know do you want me to do more react native i'm more than happy to it's well fun i love this stuff um so yeah i will be doing that okay let's uh wait until this pops off um good stuff good stuff right so wait until this loads in my hands are getting well sweaty well from the base okay cool if somebody says start from the bed well maybe i'll do a tutorial on it a series right perry nuts chicken wings uh view basket place order and now after four seconds we should go to your next screen yes look at that nice all right delivery screen looking good guys looking good let's create the next one we're gonna have navigation here because we're gonna have a back button so we are now building this screen the delivery screen right um we need the restaurant so we're gonna go ahead and pull that in as well so i'm gonna go ahead and use the use selector slat restaurant um yes i will love to do more back end stuff as well it's just kind of like a balance between teaching you guys awesome ui you front end and then having back end portions to it as well we are getting more complicated in some of these builds i'm not gonna lie i'm building super fast and it takes time to kind of get to the end so it really is getting more complicated um but we're getting there guys it's always about challenging ourselves all right i'm gonna add a background color here to not background white i'm gonna actually add in the same thing i did similar last time so bam next one on the color there you go right now i'm not doing a safe area of you here yet i want to add i'm going to show you another thing you can do you can actually add little chunks where you only want that bit to be in the safe area of you which is pretty cool because you might have it just like in this case it's going to work out pretty quietly so we've got view inside of our view we've got a piece of text which says order help and then you can see what we're building here is going to have an x icon as well so i'm just going to pull in all the icons together um so let's just pull it in like so and uh up here i'm actually going to go ahead and say attachable opacity and if you press this button it's just going to go home okay so touch the opacity navigate home okay touch the password then pull in there you go see what i mean it does this little janky refresh thing where you just got to pull in the refresh okay so nando's add something to your order give you your basket place your order and now we should see in a second there you go right and if i press this it should navigate home awesome stuff right so obviously i'm not clearing state and stuff it's more again that's the demo stuff you can feel free to do it it's very easy once we do what we've got you now all right so let's carry on styling this make it look really good guys so safer review on this one i want to give it a z index of 50 for reasons for later the view here i'm going to make sure it's flex row i'm going to do space between so justify between uh items in the center with a p of five nice awesome stuff i need the text to be font light font light and i'm going to do text white and text large fun fact i took pre-workout before this live stream just thought i'd randomly tell you that it's something i started doing that before live streams i just take a pre-workout scoop it's good for the gym wine is good for coding so not bad it actually pumps me up a little bit so we've got view view okay then we've got view here i don't do it when i'm coding naturally that's normally i'm just saying all right and then we're gonna have two pieces of text right so text times two oh oh my emmett didn't work x times two do what no oh okay okay anyway i know what i'm trying to do here all right we're gonna have two pieces of text in there right um looks great sunny thank you quantify i appreciate you dude so in this case there we go looks nice i'm gonna pass in so this one is style it up let's say class name equals bg white uh mx5 2 rounded md on the sides padding a 6 a z index of 50 and a shadow md pow look at that boys zen index because i've got layering here right so i've got layering with the map that will go behind it eventually as well all right now for this looks pretty good so far we're not out the work yet though so we've got image tag this image tag imported from react native uh self-closed image component this one's gonna be a bi-card riding his bike and it's gonna have a height and width of 20 so let's pop those in now so there you go all right i'm width of 20 and for the layout here we're going to need to wrap the entire contents here so these two things inside of a view okay and this one i'm going to go ahead and say flex row and it's going to be justify between okay and now you can see we're getting a very nice ui and look and feel to it okay now outside of that view guys i'm going to add a progress bar uh which is an indeterminate progress bar so it's going to be like a nice ui touch that's basically going to allow the user to know that it's going to be loading all right so in this case bam look at that oh what size day color is good just beautiful right little finishing touches on this thing okay we've got that looking pretty nice and then we're gonna have your order at the restaurant is being prepared okay so here i'm gonna have a piece of text uh in fact i'll just show you straight off the bat we've already got the restaurant being pulled in from redux but your restaurant your order at nando's is being prepared because remember we would have gone through that flow updated the redux store then we know what's happening on right um amazing stuff guys almost at 900 likes let's go smash that damn bum come on let's go it gets me hyped we doing well guys this is amazing um literally almost 100 in chat revenues oh that's crazy thank you so much guys um say fair review now outside the safer review here i'm gonna have a map view okay so this is where we're gonna bring react native maps into question right so i'm going to show you really a match right now rank name map component if you head over to dark store expo dot dev you will see toronto in the house what's up dude want to so expo install react native maps so you have a look see bungee want to do the expo installation of this one it helps you out a little bit more um and it basically simplifies the installation so that way ios dependencies android the only thing to know here guys is the minute you put this map in it's gonna work for ios and android but not for the web the this part won't work for the web so i would recommend if you want to take it seriously after this what you can do is you can say if the platform is uh on the web you can use a different map like mapbox or you can do platform-specific coding i don't want to do it for this one because it's kind of like a long thing to implement but yes that's what i would just highly recommend so make sure you do check when you do this because you can see here web is not supported for that okay just something worth mentioning okay um next thing we want to do guys is 900 likes let's go oh my god crazy so much energy in the house today amazing guys oh yes all right so let's go ahead and keep going strong i'm not view sorry we need a map view here now so i'm going to go ahead and implement uh pull in the map view and i'm going to pull in something called marker which we're going to need in a sec as well okay so we've got the map view in play now what i want you to do is remember the restaurant and the the restaurant and everything had a latitude and longitude yeah so we're actually going to be using that right now with what we're going to do so map view i'm going to go ahead and pull this in it's it has children inside of it that's why i've got a closing component but we're going to go ahead and just pull things in so firstly the coordinates what are they um the initial region is basically something that we we pass in as values to essentially zoom us into the first place that we're at so the latitude and longitude of the restaurant that along and then this delta is basically the zoom scale so i figured this out for you so you don't need to worry about it but that's like the zoom scale if you get confused yeah then we've got a class name i'm just to say flex 1 and i'm going to put it at the back so zero and i'm going to set it with a map type okay and this is what's going on there um there we go there we go okay there we go nice look all right so immediately now i'm at the point where that restaurant would have been on the latitude longitude um i can show you this by going to for example wagga mama so if we go to wagamama obviously i'm not clearing my basket and stuff but i'll let you guys do that so in this case let's just remove some stuff here so i added mojada mommy um chicken ramen remove the prairie nuts right place obviously you can do all that logic yourself i'm not going to go crazy with that best-selling thing thank you vanyadhi um loving the content thank you raymond look at this look so it actually took me to the wagamama restaurant right so this is wagga mama and your order of wagon is being prepared so now what i want to do is just add a marker there as well right so why not while we're here we might as well do it so let's add a marker self closing component and basically this has got a bunch of things on it right so i'm going to pop them in and show you what they do coordinates the latitude and longitude is basically where to drop the marker title is a restaurant title so if i click it now wagga mama welcome to bagamama you serve agents identify origin and the pink color is this amazing stuff think about it now if you did the uber clone you would know if you add in google matrix api and you did all that kind of stuff you can actually have directions now from your driver which you can use gps for to this in real time you could do that right so i didn't go that far in this build but yeah you guys could definitely do that which is incredible right uh so yeah and the next thing is this bottom portion right so it looks good right now which is why i put the safe area view outside of the map view so that way we don't cut ourselves off with the map i wanted the map to go over the next thing i want to do though is add another safe area view at the bottom right so safe area if you bet you didn't know you could do this save area of you and we're at the final hurdle now guys we're literally just adding in this at the bottom and then we are like that's it we're done here today amazing build right so image self closing component source let's go ahead and add the source for this one it's going to be yours where i add me as your driver right so let's go and pop the image in i'm going to make it rounded with sunny my face oh no it's not well that could be a driver face whatever you want the class name here is going to be bg white i'm going to make it a flex roll i'm going to make it items lined essentially space between them five space space and smacks um height of 28 bam look at that and look the maps get pushed up nice and neatly this is one of the best brand names it's smashed like another save for later again save it for later guys awesome exactly all right then we've got some uh this is looking good so far and then outside of this we're gonna have a view with text inside of it oops test text um and then inside of him with a sonny sanger another bit of text and your rider and then here class name is going to be text large show text large and if you're not following me on instagram right now make sure you do all my handles are at the bottom right now literally where i'm sitting on the screen right now underneath that all my socials make sure you pull out your phone and screen literally you can do a video saying i'm watching you right now i love it because i get to see you guys afterwards who's watching even in the replays right so the text and then this one here so boom i'm gonna have um text gray so this one will be text gray 400 and then this one's going to test large this view i want to have as a flex one i want to take out majority of space and then after this i'm going to have text which says call and this call is going to be colored with the delivery colors so text uh gray [Music] and text large and a margin right of five well awesome comments zohar says thanks so much thank you for your help i really appreciate your project having me it's an internship nice jay again back in the game after a while thank you zohar jay screenshot that dude sick thank you so much for sharing that amazing stuff man and fun boat and just like that i think we're done on the build wow wow wow i think we're literally done guys for this for the bird that was itchy like oh all right sick okay let's go ahead and give this a try right now so at this point semicolon by text lg did i semicolon by text oh it's fixed that yeah nice all right so let's go ahead and give it a try i'm gonna restart my app boom uh right now this is failing because of the web i think i'm running on the web yeah it's because of the web let's see and i've also got a console log somewhere where is that console.log console.log get rid of that where's that all right let's do this guys so let's do it let's do an app demo right i don't think they're interesting this would be the first yeah honestly it's pretty pretty damn good for the first right so what i'm gonna do now is pull up everything in a way that makes perfect sense so let's go ahead and give you guys a demo of this today's build right so in terms of the content first things first we have our sani ecms platform right so let me go and change the song a bit okay so i need something a bit more hyped let's do havana okay nice hey so check this out right now so we've got restaurants on here on santa cms we've got dishes we've got the menu category for all of the things that you see at the top of the men you've got featured menu categories which has all the different restaurants inside of it as well right so all of this powered by standard ecms we then run sanity deploy we can push this up access it from anywhere in the world we connected this to the front end the react native app okay then what we see is we pull in through the front end all of the stuff so office near you you can see all the restaurants and you can see tamar hashtag papa fam says literally being pulled through at this point okay now look at this if we go ahead and head into i always like to show wagga mama because i'm a big fan of wagon making me hungry right so get edamame let's go ahead and do some chicken ramen let's do some coca-cola and we've got a party so we're gonna have a katsu right so loads of stuff right now if i'll you know i realize i don't want the chicken ramen katsu will do i get rid of it all right at this point i can sit them like okay pretty good place the order bam place the order your payment details could be on record whatever you decide you can even incorporate the payment details there and then you've got your estimate arrival screen this is incredible for a concept right all you would need to do at this point incorporate payment i obviously it's too much for one video right it's way too much for one build in one video but all you need is incorporate payment make that push into a database have a driver app somewhere i have a restaurant app somewhere where you can accept payment and then basically talia enter when it says wait for the restaurant to accept the order that's when you push through then you can have a driver app which has a gps located on it accepts the orders goes ahead gets allocated to this order that person will then get real time tracked and it will show on this i kid you not it can be that simple when i say simple it's still gonna be a bit work but it's definitely possible guys and you guys can see right now how the benefit of combining redux to manage the state management tell me css in the way that we did it today using barbel transpilation incredibly intuitive incredibly fast allowing us to code up a beautiful app way faster than any kind of a style sheet like the way we ran through designs today incredible only made possible with that tone and css that allow us to kind of do it at that level all right giancarlo says best and most massive retina build ever honestly if you guys like this please do me a favor share the video tell your friends about it get more people to know about it because all i'm doing is for to help developers out there get better more comfortable react native all right sure i'm going to get comments saying hey he's not fully functional yes it's three four hour build guys it's really we have to make this like as big as possible but the main thing i wanted to demonstrate to you is the way that we can implement sound ecms with react native the harmony that it brings the crazy platform that we did and also one code base guys one code base for ios for android for web that is incredible in the time frame we just did this in amazing stuff animations all that good stuff you can view your basket all this good stuff obviously you can go ahead and you know like even just the way that this is so sleek and it's working place your order animations in there incredible incredible incredible stuff guys thank you so much if you enjoyed this we learned in today's video redux react native tailwind navigation animations maps sanity content platform in and out we did loads on sanity today so make sure again if you are using sanity in today's video which you are going to be using then go ahead and use a sanido i o forward slash sunny to make sure you get the double quarter plan so just make sure you initialize your project with the coupon sunny 2022 don't miss out because it's double your three quarters they're amazing to us over at the fan they help us out really really really cool cool stuff guys on top of that hero icons were thrown in and we absolutely smashed it with this build so on that note guys i think it's only right we do this the papa fam way we end this with the anthem and uh yeah guys if you enjoyed it as i mentioned before smash the thumbs up button subscribe and uh i've got a special guest for you as well so check out he's so shy so hey what's up jay jay's in the background he's been here the whole time he's literally been watching us because uh but it's awesome to see and uh yeah so this is actually a team we've got everything going on around there and yeah this is what we've built today guys absolutely incredible app so say hi to jim chat everyone and uh kelvin aristi thank you excellent bro clovis says thanks i thank you dude for tuning in giancarlo says yo jay thank you that was amazing thank you so much guys for tuning in this is your boy papa react as always more bills come in typescript react native all that good stuff i'm happy to keep pushing what you guys want in this channel so let me know dms instagram comments whatever it is help push this content out i will keep on making it love and appreciate every single one of you guys and as always guys it's your pop boy paparazz i will see you in the next video peace [Music] [Applause] [Music] you

Channel: Sonny Sangha

Views: 416,395

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: taPz40VmyzQ

Length: 226min 19sec (13579 seconds)

Published: Thu Jul 07 2022