🔴 Let's build UPS 2.0 with REACT NATIVE! (TypeScript, Firebase, GraphQL, StepZen & Tailwind CSS)

[Music] welcome back to the channel it's your boy sunny aka papa react and i'm excited to bring you some absolute fire today today i've done something actually totally different to what you guys are used to on the channel but i promise you this you're going to learn so much and it's going to be such a fun experience for every single one of you so let me know in the comments right now if you're excited let me know where you're watching from and let me know if you're an og popup member or if you're brand new watching replay wherever you are watching from right now let me know get the energy up this is the ups delivery tracking app 2.0 powered by step zen and it is one hell of a powerful goal guys so say hello to today's build with react native typescript all that good stuff and a bunch of new tech that we've never done on the channel before say hello to the build guys ups 2.0 bam there we go guys here we have it this is our app that we're looking at so we're going to be able to do a bunch of filtering bunch of searching we're gonna be able to click into a card of deliveries where we can see all of our customers we've got maps we've got everything working as we expect it nice beautiful scrollable list we've got nested navigation in react native navigation now so we can check by customers or buy orders let's go ahead and click into an order you can see we have that same reused component on the front end being reused here now this build i want to stress to you guys you can go ahead and search as well this build is more of a scenario based build so i'm going to go ahead and explain what today is all about and why i've done it a little bit different today so what i've always done in the in traditional builds is we've gone ahead and given you the pretty much the answer from the get go you guys have coded along with me and we've gone ahead and built something pretty awesome but i always get the same question sunny what do i do in this scenario with a freelancing client sunny what do i do if they've already got a database and they've asked me to build an app so i basically did exactly just that i listened to you guys and what we've done today is we've given you a back end so we're going to go ahead and show you let's imagine you have a freelancing client and your client came to you with a let's just imagine a massive json blob right a json string and this is their back end or it could be whatever backing you want i'm going to show you how you can leverage the power of step zen to go ahead create a graphql interface build an awesome interface between that back end and between our app and then present it on an app like you see right here so it's going to be one hell of an experience it's going to be a ton of new things and what you're not seeing here is that this build is using one hell of a lot of typescript so we're using so much typescript in this build probably the most i've ever done in any react native build so if you want to learn typescript this is the correct video for you there's loads of links in the description what i want you to pay attention to the first link is when we you just when we actually begin to use steps and in this video use the first link it goes ahead it helps and supports the papa farm and it's the one that's going to give you the bonus extra goodies that they've given us but i'm going to jump into that in just a short second so today's video what are we building we're going to be using something called a react native if you haven't used it before it's how you build beautiful apps just like this so you're going to be building an ios and an android app you're going to be using typescript to go ahead and build a robust application so you're not going to have as many bugs not as many sort of issues some people are saying what is ups it's a delivery tracking app okay so it's more of a delivery app so we're going to be building sort of let's just call it the delivery tracking app okay we're using tailwind css to build a beautiful ui we're going to be using rack native elements to go ahead and style out that ui we're actually using the real-time firebase database today as well so if you're interested in learning some firebase today is your lucky day we're going to build your first ever custom hook on this channel if you haven't already been in some of my other previous builds where we did that so that's going to be fun for you guys i'm going to show you how to add maps into react native apps and you're going to learn how to use nested navigators now if you're probably wondering what the hell does he mean when he keeps saying that right here you can see we've got tab navigation but we've also got modal navigation so models can pop up and we've got page navigation believe it or not you doing that with typescript not as simple as you might think so we're going to be covering all of that in today's video so smash the thumbs up button if you like what you're seeing if you want to get if you're getting excited about this and we're going to go ahead and dive right into today's breakdown of what we're going to be up to give me one second guys right so first thing i want to do is i want to introduce our sponsor for today's video that's made this entire thing possible step zen now i only show the apps and companies that i actually support and the ones i actually love roy and the team over there are incredible what they've done there is actually awesome right so what they've essentially done is you can compose a graphql from any backend it doesn't matter if it's a firebase database it doesn't matter if it's a sql database you saw me do it with the super base demo with we did it with the reddit clone so it doesn't matter where you're using your backend from you can make a awesome graphql api it's very simple to use i'm going to show you today how we can use a rest api backend in the form of the firebase real-time database to go ahead and create an awesome graphql api it's going to have type definitions it's going to be written the correct way it's awesome okay they're used by companies such as hp the big dogs so these guys are trustworthy trust me i've been working with them they're good guys okay and they revamped their dashboard so we've got a whole new dashboard which i'm going to show you in today's video now if you're excited for this let me know where you're watching from so i actually didn't read here we go we've got kenya sweden germany uk us france berlin france drc congo what's up ukraine minnesota usa this is cool hi this is international guys welcome to the channel if you haven't already subscribe i know that some of you are watching you don't subscribe subscribe because i'm gonna drop non-stop free content if you haven't noticed the frequency is going up guys we're working very hard to get more content out and if you want to join our community head over to papa react dot com forward slash course link is in the description to join full stack hero if you want to join the papa fam in its full flavor okay with that said and done we're going to go ahead and start this build first thing i want you guys to go ahead and do is let me know if you're coding along with me right now because uh we're actually going to be doing this pretty fast but i want to know if you guys are going to code along or if you're going to be kind of doing your own thing but we're going to be using expo expo is an awesome platform to go ahead and use and it's actually going to allow us to create an ios android app and a web app actually but we're not going to focus on the web app today we're going to focus on the ios and android app first thing i want you to do i want you to go ahead go to expo.dev and then i want you to click on get started so i'm going to turn the music down a little bit let's get focused okay so i've actually logged in i've already created an account here so i'm instead i'm going to go to the docs and we're going to go ahead and jump into it now what i like to do i'm going to pretend that you're just brand new to this channel you have never seen a video of mine before and i'm going to run you through everything okay so absolute beginner friendly tutorial here so first thing i want you to do is actually go ahead and install something into your terminal now what is this that we're installing this is called the expo cli and this is going to allow us to actually go ahead and set up our application that we're going to you see on the right hand side now because this is actually running already i'm gonna have to cut this one so we can actually start developing on another one so what i'm actually gonna go ahead and do is i'm actually gonna go ahead and i've already prepped this beforehand i've created a bunch of different screenshots that we can go ahead and use in our assistance to go ahead and use as a reference so now you can see the different screens we now have reference screenshots and we can use these screenshots as we're developing our app so this is honestly a really good case study if you're learning to become a software developer and you want to see what it's like because in a lot of cases when you get a gig a design is going to give you a bunch of screens and you're going to go ahead and have to build it out so i hope this is as close to a freelancing gig as possible and uh yeah it's gonna be a lot of fun the second link in the description by the way is the sample data that you're gonna need for this build so i've given that to you it's a public github repo second link in the description all you have to do to go ahead and get that is actually go ahead and clone that repo so git clone that url and you'll be able to get the code uh the json code for getting started so what we want to do is go ahead and mpmi g expo cli now this is going to install it globally which means it's not going to be attached to a project it's going to be available for you to use on your entire computer so you can open up a terminal i'm going to go ahead and make this super big for you guys and what you can do is you can go ahead and say mpmi g expo cli i've already done this so i'm not going to do it but in this case you might have to go ahead and sometimes add in sudo as it's a admin command and sometimes you need extra permissions right so it's going to prompt you to ask your password and then you can go ahead and do it just like that now i can see so many people tuning in from around the world we've got nebraska in the house all these kind of places i love this i'm going to be streaming a lot more so let me know the timings if it's good that kind of stuff we're going to keep this stuff moving quite a lot now okay so i've already done that command so you don't have to you you have to do that sorry and if you if that doesn't work and it says npm is not recognized you're probably going to have to download node okay you have to download node sorry right so you're going to need to do that now the next one you want to do is mpx create export app my app now i'm actually not going to use this one actually in particular instead i'm going to be using one with typescript i'm just going to find it for you guys as i actually lost it but there's a really nice sort of starter template that we can use to go ahead and create our app with the typescript template so this is the one i actually want you to use so starting from scratch using a typescript template okay so this is official from their docs and what this is going to allow us to do is actually go ahead and create the app with the typescript of configuration already set up for us so really really easy stuff i see you guys saying awesome timing sunny thank you so much guys smash the like button you guys are really really incredible today the energy is actually insane over 200 300 people watching different platforms right now thank you so much i need a water break give me one second guys and let me know if you want the music louder or anything like that okay this is exciting i think everyone's like tuning in everyone's getting getting down i know the crowd now i know how everyone's thinking based on the way the comments are coming in and that kind of stuff right what we're going to do now i'm going to bring the music up a little bit mpx create export app so i'm going to copy this command right here now the main bit you really have to focus about is the t the template okay so i want you to basically copy this open up your template or terminal sorry and i want you to go into a folder that you like to code in now i like to go ahead and do documents builds so you can put it wherever the hell you want i'm going to chuck it here bam and then it's going to ask me what the app name should be so we're going to give it a second whenever i'm live the demo gods are against me but here you go what yeah what is your app called we're going to call this up the ups clone youtube steps in okay i'm gonna call it that okay you can call it whatever you want it does not matter that's your app name there you go it's gonna locate project files it's gonna go ahead and set up our dependencies all that good stuff now mine you can see is using npm so that's what we're gonna stick with in today's build all right somebody says sunny it's a programming alien thank you dude uh it's just practice that's all it is okay and someone says mouthful yeah it was a bad name but that's coding for you okay so let's go ahead and if you guys can't comment by the way you just need to subscribe i've made a subscriber only chat so you just gotta hit the subscribe button and then you can go ahead and throw a comment in and any good stuff like that thank you guys smash that like button almost at 200 likes this is awesome right so while this is happening i'm gonna go ahead and show you the benefits of using that link in the description so if you go ahead and hit that first link in the description to sign up to step zen and get ready for later when we're gonna need steps in you're gonna be able to get a free tier with over 300 000 monthly requests i think that's the limit 300 000 monthly requests i mean that's damn generous right so if you go ahead and hit that first link in the description your boys got you sorted we've got a deal with them and they've sorted us out so you guys are going to get treated nicely if you go ahead and do that um thank you cj i appreciate that it's very sweet all right so in this case our project is ready hey we're going to go into our app right now and we're going to go into it like so i've got a few here you can see wow okay there you go i'm inside and what i'm gonna do is do code dot and code dot allows me to open up a vs code with that folder directory set up in my workspace so what i'm gonna do is open this up and i'm going to make this a bit bigger for you guys so that way you can see how i am doing okay so let's go ahead and do that now we've got a lot to build today believe it or not right there's actually a lot that goes on into building this app it may not look it but there's a lot that goes on to that so brace yourselves get your coffee ready if you remember if you fall behind do not worry so somebody just asked can a noob follow up yes all i want you guys to do is honestly follow along with me have fun okay have fun don't worry if it's overwhelming if it's too complicated this is what we're here for this is what the papa farm's about it's a community of developers forget the whole notion of you have to be an absolute pro at every single thing i hate that going around on youtube right now we're all learning so don't worry just have fun today okay let's jump into this so somebody said should we use javascript or a typescript so typescript allows you to reduce number of bugs so yes i would recommend using typescript it's just got a level of learning to it so app.tsx this is what we're going to use to start up our app so i'm going to go ahead and actually cancel this app right now so i'm going to close everything i had running previously and i'm going to go ahead and show you what we are about right now and if i didn't show you already we have a step zen graphql explorer where we can basically go ahead and interact and pull data from our firebase and it returns a nice graphql return statement so this is what we're going to basically be building in just a second okay so i'm going to introduce you to everything don't stress right so at this point what i want you to do is go into your terminal command j to open up your terminal and i want you to go ahead and type in expo start okay and what this is going to do is it's going to go ahead and start up expo which is basically going to allow us to have our app running on either ios or android and the great thing about expo is you can actually scan the qr code that pops up on your phone download the appropriate app which is expo go the client on your phone and you can actually develop on your phone as long as you're connected to your local network so it's absolute game changer like that so you don't always need to have an ios or mac device to code in ios anymore all right so we're going to go ahead and click expose start awesome stuff jay is also awesome jay is awesome there we go you can use the local ci uh by using mpx export start as well rohan says hey sonny what is up dude so in this case you could scan that if you're on my network and then it would work okay so in this case you can see open ios simulator open web and so forth so i'm going to actually close the simulator for a second and show you this from scratch so what i want you to do here is hit the i but i know i key on the keyboard so i'm hitting i and it says opening on ios right so now what we'll see is we will see the simulator pop up on the screen in just a second and this will go ahead and open up in the form of an iphone 12 pro max whatever one you have on the screen whoa what's up andrew smith pop a fan member in the house good to see you dude look at this ahmed says i want to say thank you i got more skills from you guys thank you so much dude amazing right so let's go ahead and see if the phone opened up where is my phone let's see i let's open up again it's just being slow it's shy today guys where the hell is my phone all right let's see i'm going to open up the simulator and if it doesn't open up you can always go to your device and just force it to open as well in this case you go to open simulator iphone 12 there you go right iphone 12 pro max and it will just load up a phone now you can go ahead and actually add different phones you can actually go ahead and add simulators if you go to preferences do all that kind of fun stuff and it'll work i'm going to go ahead and let this give this a second um while it's doing this thing in the meantime what we're going to do is go ahead and dive into the beginning of this build so what i want you to first do is prepare the back end of today's build so we're gonna actually use firebase today so firebase is an awesome um set of tools provided by the guys over at um google and i've used this in ton of our old builds right so in this case you just want to sign in with a google account hit go to console and i want you to set up your app in firebase so this is essentially going to be uh the backend which is going to hold that sample json that i've given you jay if you can possibly send me on a slack on the side that will help me out because i actually don't have access to that link right now i'm going to go ahead and create a new project and i'm going to go ahead and name my project so i'm going to call this one let's just call it the ups clone step then okay and i'm going to go ahead and click continue i'm going to disable google analytics thank you jay click create project and this is going to go ahead and set up our project for us i'm sorry guys i didn't actually show you that so i went ahead and done that on the screen i just typed in create project i added a name and i clicked create app oh raj free singh welcome to the papa specialty thank you guys if you want to support the channel simply hit the little join button or the thanks or if you're watching the video afterwards we appreciate every single bit of it thank you so much and it helps you because i can actually see you guys when you're popping up uh andre says we're gonna have some redux in this family not in this build dude but we have it inside the papa farm so join us at paparia.com to go ahead and check it out continue now this is gonna open up our screen and as you can see here guys this is our starting point for the back end so what i want you to do is they've actually neatened it up a lot since we've been here right i'm actually going to make this a little bit bigger for you guys i don't know why it was smaller than it should have been that's strange and what i'm going to do is i'm going to cut my simulator and try and run that again i want you to know one thing you have to be patient with react native i'm just telling you right now any react native dev will tell you the same react native is a patient tech visa tech right it's not as nice as next year in my opinion it takes a bit of time but we're going to get there okay so at this point we're going to go to the build and inside of here you've got firestore and real time now i'm typically a huge fan of firestore but today's video we're going to be using the real time database and i'm going to show you exactly why so the second link in the description has access to the github repo so if you click that second link in the description you will come to this page now you don't even need to clone this you all you need to do is go ahead thank you savvy program that's amazing all you need to do is go ahead and click data.json and this is your test data to begin in today's video so all i need you to do is literally copy this okay so you can go here you can actually copy the contents and it will go ahead and copy to your clipboard okay um my phone isn't actually loading this is interesting i'm going to force my simulator to quit and we're not going to panic it's all good in the hood right let's go and leave that i'm going to go ahead and force it to open again it's fine just patience guys don't stress all right so this points we're at this point we're going to copy the raw contents like so now i want you to head over back there we go hey hey so if that happens i would recommend you just force quit and then you hit i so i'm just going to let that show up this will just basically render up the dummy app on our phone okay now heading back over here we're going to click on create database right so whoa watch what you think that's awesome dude click create database and you want to click a location now it's up to you honestly just choose whatever is kind of near you at this point i'm just going to leave it as the united states click next we're going to start in test mode which allows a temporary writing i'm not going to go into security rules today but if you want to know more about security walls check out the fire firebase's channel on youtube they're awesome they do really good videos and click enable okay so this is going to allow us to go ahead and do this yes you can use this on windows as well guys this is a universal app right you can do on windows if you're using windows you're probably going to be using android unless you have an iphone and you can scan that qr code and use your phone to develop on guys we have so many people tuning in right now we have over 300 viewers across different platforms thank you smash the thumbs up button let's get this video out to as many people just by hitting that like button helps push this video so far so please do that it goes a very long way okay now what i want you to do is we copied all of this information like so i want you to go here and what we're going to do is we're going to go into value and i want you to actually paste it and hit enter okay and as you can see you get all of the additional thing uh additional information added to our database now what this essentially is is a json tree right so the real-time database is like a massive json tree now the whole reason why i've given you this again if for anyone who's missed it we are essentially giving you a scenario today where you've got a freelancing client who already has a database it's a json massive tree inside a real-time database and your mission is to go ahead and pull information from that in a relational type of way so in a way that makes sense and you need to go ahead and build a tracking app and present it on a react native app so i'm showing you just how to do that in today's video and i'm going to show you how steps then makes that incredibly easy to go ahead and create a graphql interface that we can use right let's go ahead and do this right this is killing it wow the likes just spiked up you guys are killing it thank you right so at this point you should have the following information if you did have a problem with that you can go ahead and hit here and import json that will do the same trick if you just save the file and upload it it's easy to do okay awesome stuff thank you so much andre smith jay will tell you in a second okay so with this done now what we're going to do is head back over to step zen so step zen as i mentioned before first link in the description is what you're going to need to click on to go ahead and get started now what i want you to do is go ahead and actually see what we have here right so in order to get started you can actually use step zen with a bunch of different backends now today we're going to be using the rest endpoint api right but you have got databases you have got graphql endpoints if you are interested in learning about how to use it with a sql database like super base then check out the reddit build on it's going to be hovering over the screen right now if you are watching this on replay but without further ado we're going to carry on with what we're doing with the rest end points okay let's carry on michael gerges what is up og is in the house let's click on dashboard now what i want you to do when you do this is all you need to do is actually just click log in and the login will take you to your starting point now this is the new dashboard okay so it's free to log in uh set up an account sorry all right and then here you're actually going to see all the different endpoints that are going to get deployed so you can see i use these guys quite a lot and they actually have this awesome metrics now that you can see what i then want you to do is go ahead and go over to your account so here you can see you've got my key i'm not showing the entire key so it's fine and you've got your login details now if we head over to the docs you can see you've got a bunch of documentation over here if you do get stuck we've got examples we've got loads of things that will help us get to where we need to get to but in the first point what i want you to do is once you've logged in you will see this getting started screen and if you don't simply head to step zen dot com forward slash getting started to go ahead and get set up now first thing you're gonna have to do install the global tour steps in just like we did for expo go ahead and do this you'll probably need to do sudo as well in a lot of cases so in this case go ahead and install septem i have already done this the next thing i want you to do is log in to your steps and account so you will get a command here which is relevant for you you can go ahead and log in to your account then it's going to ask for your admin key password and if you don't log into your account any api that you actually go ahead and release is going to be a public endpoint so it's going to be accessible to everyone so i just recommend you use this approach and you actually pop in your admin key when you're prompted like so and then you're going to have your own private api endpoint at least so that way people don't go crazy over yours if you accidentally leak it or share it okay so as you can see here's a bunch of different examples down here but i'm going to make it super easy for you just to follow along with me okay so once you've done this we can go ahead and proceed to the next step okay see what i did there step right so at this point we're going to go ahead and we've already just set up our firebase backend we have our app running and we have our step zen app pretty much set up okay so now what we're going to do is prepare our app to go ahead and start getting built now as i mentioned this app does use tailwind css so telling css is essentially a way of creating responsive beautiful pages right but we're actually going to i'm going to show you how to use it in today's video with react native so in today's video i'm going to show you how to go ahead and use it and we're actually going to be using a special tailwind css library now i did use a different one in the past but i like to go ahead and mix and match so you guys can see it's not just one way if it's all okay so i'm going to go ahead and use something called tailwind react native and this is the one right here that we're going to use so i'm going to show you as i've done it as i log into it as i kind of sorry as i find it and as i kind of install it now here is the first command we have to add it to our project so i want to go over to our project and notice what i've what i'm about to do here i have my expo running here right so expo start i will need to go ahead and then pop in the side so here you can see i've got another terminal and what i like to do is just pop that to the side right so this is kind of running it's a bit squished up but i can see if there's any red going on and i can look into it right next thing i'm going to do is install tailwind react native into our application so i'm going to set up our tailwind right now so this is going to install into the dependencies for tailwind so that way i don't have to do all of this long styles stuff right i'm going to show you how to kind of neaten this up so we've gone ahead and installed that successfully now i want you to go ahead and do is head back over to their documentation and what we're going to use is this mpx setup tailwind react native and this will go ahead and actually help us set up what we need to inside of our application so let's check this out right now mpx setup towing react native in that same folder while that's doing that quick little water break make sure you're having water breaks while you're coding don't code for a massive period of time without doing that it's not worth it right this is awesome we've got loads of papa fam members in the house this is amazing billy says what do i think about angular well i'm not a huge fan to be honest with you i prefer react for a reason right so in this case you can see step one react run tailwind rat native in development mode so essentially what we need to do now is run our app in one window in the second terminal we need to run the tailwind compiler and then we need to basically implement the steps to allow tailwind to work inside of our app so i'm going to do it in a kind of reverse order i'm gonna go ahead and do step two first which is add in the tailwind provider so i'm gonna go ahead and copy these two lines right here go to the root of our application which is right here and paste it in right so very simple thing first thing that we're doing and then i'm gonna go ahead and actually wrap our entire app inside of this tailwind provider like so so i'm popping in my app around the tailwind provider okay there we go and then you can see we've got a little bit of an issue now the reason why this is happening is the type definitions haven't actually been added yet so what i want you to do here is just add a temporarily add a typescript ignore which is only for this and i know there's going to be some typescript guys that are going to kill me for that but it's fine tailwind provider they haven't updated the type definitions if you're watching this video just do it please so that way i don't have to do stuff like that and get hate all right so in this case uh there you go or somebody else can contribute to it right but there you go that's the only time we're doing typescript ignore is for that rapper all right so at this point um jay time time out that dude masters web three is to be annoying all right um guys don't spam the same thing again again please all right um let's go ahead and do this so i'm wrapping out the app with tailwind provider and um one second okay yeah timeout guys admins please do your job right so at this point we've got tailwind provider and um we're gonna go ahead and now we can use tailwind inside of our application but before we do that we're going to do this so npm run dev tailwind so i'm first seeing now in this window i'm going to go ahead and run npm run dev tailwind and we should see our tailwind script run now if you're wondering how the hell did that work right well really what's happened behind the scenes there you see we've got a bunch of tailwind configuration files um it's actually gone ahead and added a package.json script which has got a bunch of different scripts concurrently working together to go ahead and compile the tailwind css that we're about to write okay so in this case you can see it works like so so there you go we've got it rebuilding i'm going to open up a third terminal now okay so you can see how this app works we've got expo running we've got the tailwind compiler running and then we've got our third one which is probably going to have steps then running okay right so at this point guys we're almost about to hit 300 likes destroy that like button if you haven't already thank you for watching these videos i love and appreciate all of you all right so the final thing is how do we actually use it so to use it inside of a component all you need to do is do step four here so you basically go ahead and and we can actually do it inside of here in fact what i'm actually going to do now is show you how we can have a screen here so i'm actually going to go ahead and see if we can use it anyway no we're not going to be able to all right i'm going to go ahead and create a screens photo so we're going to create our first screen which represents the home page okay so in this case i'm going to create a folder called screens okay and then i'm gonna go ahead and call this first screen the customers screen okay and don't worry about the name we're gonna go ahead and use it later so it makes sense but this is gonna be the customer screen.tsx and we're using because we're using typescript with jsx so it's going to be called the customer screen and what i'm going to do here is i'm going to go ahead and use a handy extension you've seen me do it a few times but if you haven't seen it type in es7 and what you will see is this one right here es7 react redox react native snippets i want you to go ahead and use that right now now loads of people are saying why don't you use this library why don't you use that library guys use whatever library you want please it does not matter there's tons of ways in coding to do the same thing so it really doesn't matter at this point so i'm going to use a snippet here rfc sorry rn for react native functional exported component there you go and there's even one with typescript implemented in it right so you can actually do that one as well uh in this case we've got a customer screen so in this case this is just going to say customer screen i'm going to hit save go back to my app.tsx and i'm going to go back here and instead of this now i'm going to go ahead and show you a preview of the app while it's open and i'm going to replace this with my app so in this case i'm going to go back here and i'm going to type in my customers screen there you go and it's a self-closed component right there you go and hit save and now what we should be able to see in the right in the top corner it says a customer screen okay that's because there's no padding there's no safe zone i'll explain that in just a second now we're going to go into customer screen and i want to prove to but we just need to test that it's actually working the way we wanted it right so i'm going to go over here and what i now need to do is pop in our little useful tailwind command so it was right here actually where it had it it was used tailwind and we're going to go ahead and pop it in and we're going to go ahead and do control spacebar import it from our tailwind react native library now what we can do is firstly in order to get it actually visible we're going to change our view and the only way that it works is guys is where you have divs in web development you have views in react native the reason why you have this is because it's going to be a one component which is going to compile down to ios on apple phones apple devices and android is going to compile down to the appropriate element so that way you've got one component which works across devices so that why that's why we do that by the way okay um let's go ahead and do this so we're going to change this to a safe area view and i want i want you to change this and what this does is it it basically avoids the notch so that way you can see that right there right now in this case i like to rather than call it tailwind i call it tw for shorthand i'm in the style command which is basically where we would replace class names in web development we're going to type in tw and we can go ahead and test if this works so here i'm writing a tailwind css utility class now you're probably wondering sunny sunny sunny it didn't go red why didn't it go red well that actually makes sense and i'm going to show you why so when whenever we use tailwind we have to tell tailwind which folder or which files do you need to look out for so head over to tailwind.config.js and what we're going to need to do is basically add in the following so i need to basically tell tailwind that you need to go ahead and check out for the following files so i'm going to go ahead and search for all the files inside of a directory so any name and it can be any file name uh and i'm going to go ahead and translate the typescript files right so the tsx files and then we hit save and now what we should see if we go ahead and we refresh there we go so as you can see there's a little delay because our little compiler in the middle here is actually rebuilding as we save things so it's watching over and rebuilding and now if i change it to text blue hit save you will see that this will eventually turn blue as well so bam we have tailwind css working if you enjoyed that bang on timing 300 likes awesome stuff guys this retention is incredible today over 300 people watching across platforms thank you for tuning in subscribe if you're enjoying the content i'm gonna keep this stuff coming so let's keep on going right right so let's keep going guys i can see so many people chatting in the chat in the in the thing guys focus on the build all right let's go all right so at this point we have the customer screen so i'm going to go ahead and just leave that right there we're going to build that later we've set up tailwind css successfully okay so at this point we can choose where we want to go ahead and build so i think let's do a little bit of ui and then we can go ahead and move around okay so the first thing that you can notice is whenever we have an application we're going to have separate separate screens now whenever you have separate screens in an app you need something called a navigator right so you need something like native navigation to go ahead and allow something like this for example where you have customers and orders now i'm going to use a screen brush here to go ahead and draw on the screen so as you can see that everyone always asks me that question what do you use to draw on the screen it's actually called screen brush so in this case um i should be popping up right now so here you go now i can draw on the screen and yeah we can do this so you can see down here we have some so if you can't see that down there i'm looking right so this navigator right here is basically called a tab navigator and then when i click onto one of these it will either take me to a screen or a tab navigator so i've actually all modules sorry pops up i'm going to show you how to do both right so when we click on one of these i want a model to pop up when we click on one of these i want it to go to the next page and we're going to customize it we're going to do so much cool stuff around this and i'm going to show you just how we're going to do that okay so first step to get any navigation working is we need to go ahead and head over to react native navigation right so react native navigation there we go bam hit save and now you can go and not save sorry code in too long right so this is what we're going to basically be using so we're going to go ahead and hit read the docs i'm going to show you as i would do it in the beginning if i was a newcomer right so you can go down here you'll see npm installations right so first thing you need to do is actually install react native navigation so let's go ahead and do that first so we're going to open this up and as you can see we've still got a free terminal on the right hand side so i'm actually going to go ahead and use that free terminal in order to do what i need to do so npm install react native navigation yes you can actually separate or create a new separate screen it's up to you how you want to work here all right alex what's up dude abhijit john oh say i think i pronounced that right giro i see you og right awesome stuff so you can see we added that into our application then what we're going to now do is head back over and you can see the next step is installing dependencies into an expo managed project now what does that mean as opposed to a bear react native project now when we're using expo the benefit of using expo is that it makes dependency management actually a lot easier and they've actually sort of handled this for a lot of us in different areas so that maps for example rather than going into separate ios folders installing dependencies separate android folders installing separate dependencies expo is very easy you just run one command and then they've handled that behind the scenes and trust me saves you a hell of a lot of pain i've worked with ryanair before only get to that point if you have to or you get to a production state where you have to eject and you have to do it manually but in this case we are in expo managed environment so i'm going to click copy and we're going to go ahead and use our expo install command so let's go ahead and do that right now so expo install so you can see i've done that here mpx export install i'm going to bring the music up a little bit as well guys this is amazing retention today honestly well done for tuning in and staying with me this is incredible thank you guys we're literally hanging over 350 viewers across platforms and we're about to smash 400 likes okay let's go so you can see here we've installed that successfully come on jay to hide it oops have a long screen and now you can see we've already done that step so you can proceed to go down skip that bit and now the next part wrapping your app in a navigation container so a lot of our patterns you can see are called higher order components and this is where our app essentially keeps getting wrapped and wrapped and wrapped in different things so in this case if we open up our app.tsx you can see we're wrapping our app in a tailwind provider well naturally next we're gonna have a navigation container so we're gonna go ahead and do that right now and you can delete the things that we're not using so anything grayed out feel free to go ahead and clean up your code and get rid of it right so hit save like that navigation container i'm gonna go down here pop it in like so okay now as you can see i popped it i pushed in my customer screen inside of there right so that's not the way it's not finished yet i'm just doing it step by step so that's the first thing i want you to do the second thing i want you to do is go to the next screen okay and i'm showing you this way but not because i don't know it i've done this already right i'm showing you because i want to show you in case i don't want you to have to rely on me i want to show you how you can start to learn yourself and go ahead and learn new tech there's no point me just showing you every single step manually without showing you the websites because then you're not learning yourself how are you going to learn new bits of tech if i'm not there then so i like to show you the actual realistic me going onto our website and finding out how to use it all right so in this case you can see we've got the next part which is where we add the native navigation stacks okay so in this case we can do it a few ways so we need to go ahead and install this is the first step right so i'm going to go ahead and do that so i'm going to go into my dependencies i'm going to install the react native rack navigation native stack oh this is a throwback this is awesome all right it's a throwback smash those likes guys this is crazy i love this honestly so many people are tuning in right now wow all right the energy is getting me hyped and i did take pre-rock out today yes i know like some of you og's are asking like oh this is pretty cool um okay so done let's go back and let's head over here so we've gotta create a native next create a native stack navigator right so what we can essentially do the natural next step would be this create a stack navigator however this is only if you want to use a single screen right or only one stack navigator so if you've seen any of my other builds like tinder for example or any of those i did this approach and this is basically easy if you just want several screens where you can click into it and it has that little back on the header and then you can go back and forth between pages but what if you want to go ahead and mix pages and have modals popping up and all this other stuff well in that case we're going to introduce something called a root navigator so we're going to change the pattern slightly and i'm going to show you how we do this right and we are going to be layering up with typescript so again it's going to be a little bit tricky but don't worry just take your time and enjoy the process okay so we are going to be doing this creating a stack but i'm going to show you how we're going to do it instead right so i want i want you to go ahead and create a folder and call this folder navigator right so you can call it wherever you want i'm going to call it navigator i'm going to create a file inside of here i'm going to call this our root navigator and this is like the parent navigator that's going to handle all the navigation inside of our application okay so root navigator magical class okay and i'm going to do react native functional export right so there you go we've got the root navigator the next thing i want to do is i want to go ahead and actually start pulling some stuff into this from what we had before so the first thing i want you to do is i want you to go ahead and pop in the following line here create native stack navigator right so we're going to go ahead and pop this in at the top above our root navigator and as you can see it highlights so ctrl spacebar and import it right so nice little trick there you can go ahead and do that all right so some people are saying do i need to do yarn or can i use npm so the way to quickly check guys is if you've got package lock use npm if you've got a yarn lock file use yarn right if you want to switch that's fine use npm and it'll create a package lock but then delete the yarn lock so you have to switch you can't be using if you have a package lock in a yarn look you're in a bad place delete one of them and then use the appropriate all right don't use both it's going to end up bad all right um thank you so much because from 3k subs and linkedin clone to 160 of 65 thousands public farms come along with cheers to us let's go that's what i'm talking about guys celebrating as a family that's the way we're doing it right crazy stuff so this is the first thing you want to do stack right so i'm going to rename this to call it the root stack and what i'm going to now do is instead of this i'm going to say root stack dot navigator right so our parent here is going to be rootstack.navigator and then what we need to do is basically add in our separate screens right now in the example here you can see they straightaway start adding in screens now we're not going to do that we're going to do something called a group and we're going to have separate types of groups for separate scenarios okay so the first thing we're going to do is we're going to handle this trickier part we're going to handle the tabs so i'm going to show you how we can implement tabs okay so inside of our root navigate which is like our parent navigator i'm gonna have something called a root stack so root stack oops root stack dot and i'm gonna go ahead and say um a group okay now inside of this i'm gonna go ahead and create something called a tab navigator so i'm going to create a new file called tab navigator and this is going to be responsible for all the screens that you see that are going to be tabbed and so forth okay so in this case i'm going to go ahead and do the same thing react native functional export component so we've got our tab navigated over here and we're going to go back over here now inside of here what i want you to do is type in root stack dot screen okay and here we're going to give it a name so every single screen in your app needs a name so in this case i'm going to give this one the name of main you can call it whatever you want honestly i'm going to call it main and then i'm going to give it a component okay and in this case the tab navigator is the component i want to give it to and i need to import the tab navigator like so okay and then what we're going to do is hit save and then inside the tab navigator we're going to eventually build this one out now we are using typescript which means i want our app to be type checking i want it to basically not allow me to make mistakes if i for example wrote something like main abc or something like that yeah i i don't want it to allow me to do that so now what we're going to do is we're going to start implementing our first ever type definitions now typescript is a superset of javascript all it essentially means is that we are telling javascript that if you use a variable or if you use something like that check the type hence type checking right it's strongly typed language basically is an extension and basically what we're doing here is we're going to say that this needs to be of this type don't let me do it any other way if i do it another way it's going to go ahead and break right it doesn't let me get past it so that reduces the number of bugs inside of our app so bear with me this is getting fun right so what we're going to do is say export can we use it outside type and we're going to create a type definition for the root stacks we're going to say root stack param list and this is all in the documentation i'm just going to explain it in the way that i prefer right first one i'm going to write is main and you see here we have undefined okay so firstly i wrote main because i have a screen or a group here right so the tab navigator we're going to give it a name here of main right so the key for there is main but it has no props so we're not going to pass any value in but for the modal that you see that pops up for example over here in this case i will have some props i'm going to have things like the user id so i know which order to show i'm going to have the name so i know if it's lucas or if it's someone else if it's bob and then for the order screen i'm going to have the order id and so forth to go ahead and pass data through it so we are going to have more inside of this afterwards and in fact let's just go ahead and prepare ourselves now eventually we're going to have a modal and this model is going to have a user id which is going to be a string and it's going to have a name which is going to be a string also and then we're also going to have a final screen which is going to be called the order screen and this is going to take a order and it's going to have a type of order okay and this order does not exist yet hence why we're getting this error so for now i'm going to put any but we are going to replace this right do not have any left in your code it's a bad practice right but in this case we are going to go ahead and do this quick little water break before we carry on you guys have been incredible so far smash the thumbs up button we're about to hit 400 likes we're doing really really well today this is amazing thank you so much guys for the positivity this is really really cool at the moment okay all right let's go so we're going to keep that as any for now and i'm going to show you how to create the type definitions and we're going to do that when we go ahead and pull in our data from our firebase database using step zen okay so there's going to be a whole segment on steps and coming up very shortly okay so we've done our first screen so let's go into our tab navigator now and create our tab navigator so that way we can have our two screens one responsible for the customer screen one responsible for the order screen so as you can see our app is going to allow us to show all the customers and you can click the customer and see any of the deliveries and then we're going to have the order screen which is going to show all of the orders instead of the customers and you can see the customer on an order and you can click it and it's going to pull this up and by the way that's going to be the same component there and there so you're going to know how to do that by the end of this as well so lots of cool stuff to learn today right so first thing i want you to do is inside the tab navigator we're going to go ahead and create something called a bottom tab navigator okay so what this is is essentially that bottom tab navigator that you're seeing over here that has customers and orders on it but i'm going to show you how we create that so first thing you want to do is type in const tab equals create bottom tab navigator now what i want you to do here is ctrl spacebar and uh usually it will pop up but if it doesn't pop up it's fine you can manually import it like so okay and this is because i haven't installed this that's why right so in this case if it says you haven't installed it copy this and we're going to install it right in fact what i'm actually going to do is i'm just going to be safe i'm going to pop in the bottom tabs and i'm going to actually install it here before i carry on so where is my tabs tabs tabs tab navigation here we go so you can see inside the documentation it would have told us to do it i just forgot to do it right so we're gonna install it into our app so you can see i've installed it using our separate terminal down here is this a good pace for you guys i think it is because our retention is awesome right almost at 400 likes smash the thumbs up button if you're enjoying this right now hit save you will now see that this will disappear in just a second um it will i promise let's go back to tab navigator um did it install bottom tabs bomb tabs npm install yeah okay interesting let's go ahead and get rid of it let's pop it back in okay it will go away in a second strange um right navigation bottom tabs npm i real navigation bottom tabs okay yeah it will go that's fine um interesting okay so at this point we're going to go ahead and build this out so i'm going to go and do the following so i'm going to say tab so is this going to help me out okay so it's not helping me out here so this is just vs code being slow it's fine it's somebody says try to reload your window um i do want to do that but then it's going to basically cause my other screens to to go and i've got everything laid out in a nice way right now so i don't want to have to do that but that's fine it will basically come on and it'll work right so at this point inside of you i want you to type in tab dot navigator right and in this case you'll have loads of things popping up and helping you out with this i haven't got it so i'm just going to do it blind blindly and it'll work uh you installed it in the wrong directory no i have not this is the correct directory okay so in this point we've got it there so what we're now going to do is we're going to go ahead and add in a tab screen okay and this tab screen is going to be for the customer screen so remember that customer screen we created earlier we're going to import that and we're going to call this one the customers and i'm going to copy and paste and i'm going to make it an order screen as well so we're going to have two different screens so this is plural order screen and this one is going to call orders somebody said remove the at sign um i don't think i need to do that guys it really doesn't matter um yeah it doesn't matter you see it's the same thing okay uh okay that's fine so at this point um what we're now going to do is somebody said remove this that's not it guys see all right so this way don't worry it's fine we can carry on okay so at this point what i need you to do is we're going to go into our app and we're going to basically go ahead and create these this order screen as well so add in the order screen inside of our screens folder so we're going to say orders screen dot tsx our react native functional exploit component jay says i love the community that is what i'm talking about let's say this is the orders screen orders screen now guys honestly this has happened before it just happens when i'm live sometimes it's all good okay so at this point we're gonna go ahead and import it like so bam hit save and we're going to go and see what's up so tab navigator we have imported and this is all good and we have everything looking pretty nice so far and i want to see i might this is this attached right now customer screen one two three hit save is there okay so what i'm actually going to do is we did a bunch of different changes so i'm going to restart my expo so at this point control c to basically cut my expo you can see i stopped the server expo start i'm gonna do a hard start on this okay and give it a second cyril says this guy is really computer contributing back to community that's really nice the kind of condition before you thank you dude i really do want to create developers in the world so this is why we do what we do and then we offer zero to full stack here if you just want to join a community where we do it all the time and that supports the growth and allows us to do what we do so thank you that's how zero to full stack hero is born and maintained so i appreciate every single one of you here i to go ahead and open on ios and as you can see disconnected from metro so whenever this happens i just tend to swipe up like that get rid of it and then you can see it will open up again you just gotta be a little bit patient as i mentioned okay arianna says your ability to teach in real time is amazing thank you dude i really appreciate that feedback all right let's continue on all right we're smashing it right now nearly a 400 likes let's go guys oh my god jay this is cool man yeah we got a lot of people right now all right so amazing stuff guys let's wait until that goes ahead and builds out and we should be good to see what we have okay so we've got the customer screen everything's exactly as i wanted it okay that's fine um it's strange though because this isn't actually implemented the way i want it right now maybe it's because let's go back to our tsx oh my goodness okay all right i see why all right my bad so go back to your app.tsx i went so far ahead i forgot right and instead of the customer screen we're gonna add our root navigator root navigator there we go all right and we're gonna delete the styles we don't need that anymore so what i want you to do is whenever you're building any kind of app i want you to make sure that your app.tsx is always a high-level view of your app right it shouldn't be this very kind of you know um low-level kind of setup it should be a high-level view of your app right you shouldn't have your presentational logic at your top level absolutely not guys 400 likes incredible stuff we have over 350 viewers across different platforms i can't believe it their attention right now is insane thank you guys let's go let's just kill this one so root navigator hopping into this and now you can see we've got a lot more happening right we've got the customers header and then we've got this main as well now the first thing is the reason why you're seeing two headers is because we have nested navigators inside of this app so in order to fix that the first thing i need you to do is go into we're actually going to get rid of the main afterwards so we can do that afterwards that's fine go into the tab navigator okay inside of your tab navigator i'm going to show you a neat little trick now the first thing is remember i had i had type checking before so we need to do that as well here right so i'm going to actually go ahead and create type definitions right now we're going to say export type tab stack param list and these are going to be our typing definition so in this case we've got customers and that's gonna have nothing passed through it we're gonna have orders with undefined as well so i hit save and i'm gonna pass this as a template over here or generic template whatever they call it okay now you can see if i try to do customers abc this will actually freak out it's just because my bloody this ain't loading for some reason right but for you guys it will freak out it will make sure that you do not make this mistake okay so at this point that's pretty good all right so we've got customers and everything there i wonder if i can reset restart to update reason now don't do that right that's fine um here we go so customers and there we go so in this case that's exactly how you want to do it and it will basically prevent you from entering in the wrong information the next thing i want you to do is actually go ahead and we're going to pull the navigation object and the reason being is because i'm going to basically tell this tab navigator i don't want you to show a header okay so i tried to close it don't worry guys it's fine i'm going to say constant navigation equals use and navigation and here what i'm going to do is i'm going to use something called use layout effect which basically is similar to a user effect and if you do not know what a use effect is please go ahead and benefit from my react basics 101 the link is somewhere in the description it's on skillshare for absolutely free right now or the full course is at proper react.com forward slash course but yeah if you're on a free sort of basically basics rundown of react including the user layout the user effect then you can go and check it out right so now i want you to go ahead and type in navigation set options and inside there add an object with header shown first hit save and now you can see it gets rid of the header so as you can see that's how we go ahead and get rid of the header you can also do it at the root navigator level but as i mentioned i like keeping it neat okay so we've got it looking pretty neat right now now as you can see we're getting there somewhere right we've got orders and we've got customers now notice how when i click the tab navigation it goes ahead and changes at the screen very good step okay our code pr says i learned the use effect from you thank you dude that's amazing to hear awesome awesome stuff nearly at 500 likes let's go oh man okay so first step now that i want you to do is go ahead and we're going to customize this screen right here so we're going to get the basis for this screen i'm also going to do the icons over here and then we're going to move over to step zen import some data in and start moving with that okay so the first thing i want you to do is go ahead and do the following so we're actually going to handle the icons first at the bottom right i'm going to show you how you would do that inside of a react native navigation so we're actually going to be using something called react um react native elements okay so i'm going to show you how we can install it so react native elements all right so this is a pretty cool um kind of cross-platform ui toolkit for react native all right so in this case you can go ahead click get started and you can go ahead and get this installed so expo cli you can go ahead and do the following so export there we've already done this we need to go ahead and add it to an existing app so in this case we need to do this is yarn add but we're going to do mpm ad instead of this right so we're going to do this we're going to run this first one so i want you to copy everything except the yarn ad because we're going to do npm install and what i want you to do now guys is basically shift that over there shift that over there let's go ahead and install it so i'm saying oh oops so before all of that i'm going to say npm i okay that's going to install those dependencies into our project and after that i'm going to do mpmi dev and the rest of it and basically that means these are the developer dependencies that aren't going to get packaged into our production build so mpmi dev means it's only going to be in the development portion of when we're actually using it but when we actually deploy it it doesn't need to include those things like for example typescript is a developer dependency because you don't need that in production okay this is going crazy good let's go so at this point we are now gonna go ahead and uh use it so we can do config overrides i don't think i bothered to do that last time and it worked but you can do that um i'm not gonna go crazy and do everything um i don't think we even need to do all of this right now i think i'm just gonna use it this is for using on the web um oh my god sorry guys i completely skipped out a bunch of stuff oh no okay don't do that that's if you want to do it on the create react app okay my bad my bad i completely messed that one up go to npm at the top right this is what i was thinking i was like i'm sure that it shows me all right so instead okay let that install don't worry about it all right if you want the actual code it's on the gallblad repo you can uninstall it i'm not going to waste time doing that in this build let that happen okay okay the npm install there we go i was thinking about myself i'm sure it had it and then we're going to go ahead and a stable bleeding edge we've done that already uh npm install react native themed we've already done that as well cool and the peer dependencies here we go react native vector icons so let's go ahead and do that and we don't need to do anything else after that oh a safe area context you can already do i think it actually already does that inside of expo so i don't think we have to do that yeah i don't think we actually have to do that okay so at this point we're pretty good right so we can actually start using this stuff so i'm going to go ahead and import an icon i'm going to show you how we can use it so here you go we've got an icon from react native elements and what we can actually go ahead and do is we can go down to icon and here you can see we've got examples of how to use it now what i want you to do is hit the react native vector icons button and here you can actually see if we go down to our where is it browse all buttons okay here you'll get a nice kind of browsing section i always keep this open on the side and then you can basically type in a box for example and it'll show you all these different libraries and then you can go ahead and actually use the icons like you need to so in this case we're going to go ahead and actually use this as let me show you how to use this okay so that's how you would find them but actually how we're going to use it is the following way so inside of our tab navigator guys what i want you to do is we're going to use something called screen options and here i want you to go ahead and put up curly brackets now inside these curly brackets we're going to go ahead and get something called the root right so i'm going to go ahead and put parentheses and i'm going to have an arrow function with a return right so in this case a parentheses and this is going to have an object inside of it okay so take it one step at a time now inside of here we get something we're going to destructure it and we're going to say we're going to get the root out of this object here right and in this case we're freaking out because it okay so this is where i need to maybe restart okay so what i'm going to do now is ups clone youtube steps and give me one second guys i'm actually gonna do us a solid and see if i can actually restart this up okay because that's actually kind of annoying i need it to work the way i need it to work so documents build i'm just going back into this right now cd into this code and let's just kind of get this up and running again so sometimes you know it tends to bug out a little bit it's okay we can forgive it but there you go a little restart and we should be good to go we go back into our app and we should have the correct dependencies getting loaded out okay so it should not be complaining now um okay all right let's see this all right what machine is using bruh so many tabs i'm using a uh m1 max all right so at this point you can see now it's not complaining okay so here when i destructure i can actually see i get root and navigation so now it's it recognizes that so i wasn't lying to you okay now here inside this bracket we can add different kind of customization aspects so the first thing i want to do is i want to have different colors based on the the bottom tab right so as you can see down here we've disconnected so i don't want to disconnect so we're going to reset our environment up so the first one i'm going to do expo start the second one we're going to have that um towing um compiler command if you do forget it package.json is this one here dev tailwind and then we can go back here we can say npm run dev tailwind and now you can see i've got back to the setup on the first screen i can hit i to open on ios and there you go we're back so nothing to get freaked out about if you kind of fall behind don't worry about it look we're back right so this point that's everything running if you want to restart your app hit r and you can see uh r once you're on this terminal and it will actually go ahead and build it out like so okay so we're back on our we're back on track right so at this point i want to go ahead and customize a few things so you see these two colors over here right now it's gray if it's inactive and it's that color if it's not i'm going to change it to the color that we eventually want it to so here you can see i've added two different colors in one is called tab bar active color and you can see now it's gone to a cyan and if you don't believe me i'm going to change it to red and you'll see now it's a red right so red and gray so in this case i've changed it to a theme color that we want so this is the one that you eventually see over here so now we've got our colors down what about the icons okay so for the icons i'm going to go ahead and customize a different property here i'm going to go ahead and say the tab bar icon and as you can see uh github copy that's helping me out here i'm going to do a parentheses a return statement and curly brackets right inside of these parentheses is an arrow function and the callbacks here are basically going to be focused which means if it's clicked you've got color and you've got size now i'm not going to actually use these two but i'll leave them there for reference now you've got focus right now for this one here you can see also typescript is actually protecting us here it's making sure look at that wow that's crazy right so here i want to say if root name okay is equal to and as you can see typescript knows already what the roots are based on our tab stack parameter list right so you guys can see how typescript actually protects us in a really nice way okay so in this case i'm going to say if the screen is customers then i'm going to return a specific icon so that way you can you can actually see the final outcome outcome right and if it's focused i'm going to change the color and so forth right so let's go ahead and do that right now so i'm going to return the icon and if it's focused i'm going to say it's the our theme color otherwise it's going to be a gray okay and then i'm going to say else there we go i'm going to put another icon right and actually you know what i'm not going to do just else generically i'm going to say else if the root name is equal to orders and you see how it knows now that we're in elves so it knows that we've already used customers and now we just got the orders left right here i'm going to say return oops return parentheses i'm popping this and this is the box and it's of a certain typewriter so i've actually gone ahead and checked this beforehand for you guys if i hit save on that now what we should see once it finishes refreshing is we should see our nice little icons hit up on the screen hey there we go now you can see that's perfect right the only thing that's off is that the orders is not getting colored correctly but we will fix that inside of the orders screen okay so we'll do that when we get to the order screen but that's a pretty good starting point for now okay so now we can go ahead and carry on building out our screen so heading over to the customer screen right now and uh yeah you can see this is quite a lot going on so we're actually moving pretty well so well done for sticking with me all right and guys we're almost at 500 likes almost a half a thousand likes thank you so much if you're enjoying this smash the thumbs up button keep on going guys absolutely incredible incredible stuff right so the um all right so give me one second guys all right so let's go ahead and do this so now what i want you to do is i want to go ahead and uh build out some of the customer screen okay so heading over to the customer screen now i'm gonna go ahead and first surround our entire customer screen in something called a scroll view and think of it like a scrollable div right so rather than having like overflow and that kind of stuff a scroll view allows us just to have something which you can scroll so now you can see that's actually scrollable whereas in orders that's not scrollable i'm clicking it and i'm moving it nothing's happening whereas in this one it's allowing me to scroll okay so firstly good step next up i'm going to go ahead and hide the header for the customer screen so what i'm going to now do is go ahead and say const navigation so const navigation equals use navigation pull that in like so and remember we're using typescript so i'm actually going to have to go ahead and pass in what we need over here to go ahead and give it the correct type definition so now this is a little bit more complicated because we're inside of a root navigator which is inside of a tab navigator is nested inside of a root navigator so you've got nested stacks here so what i'm going to show you now is how to create something called a composite navigation prop which is basically a way of a fancy way of saying combine up the navigation stuff um so that way you have all the types that you're going to need okay so i'm going to show you how chica does have to do it right here we say export type and i'm going to call it the customer screen uh navigation prop okay and this basically means that it's going to stop me from making any kind of mistake and we're going to use something called the composite composite navigation prop oops composite navigation prop and we're going to import it from a react native this is going to take a generic inside of it and as you can see now what i'm going to do is i'm slowly going to import things as we need it so firstly i'm going to use a bottom tab navigator prop right navigation prop and that is going to have its own generic and that generic is the one that we had for tab stack parameters so this is the one that we created over here okay and then i'm gonna go ahead and in here we have to tell it which screen we were in as a second argument so this is the customer screen okay then we're gonna go ahead do comma and basically you see it's called composite because we're combining a bunch right then we're gonna have native stack navigation prop all right it's navigation prop so this one here and this is gonna have the if you haven't guessed already the root stack so basically what i've done here is i've essentially gone ahead and combined them so in this case where i had the rootstock parameters i need to go ahead and pop that in here root stat parameters and this is being weird why where's rootstep list oh we're not even pulling in what the hell okay i'm gonna go ahead and import that like so bam there we go okay now we have a really kind of nice way of combining it together it looks a bit ugly but you can go ahead and kind of you know if you really want to you can refactor it out and it's going to help you out so we're going to take that navigation prop and we're going to put it in there right and eventually you could create separate type definition files to kind of keep your code neat again we're limited for time so i'm going to do all of that in one video right so now we've basically got this and it's looking pretty good now what i'm going to do is the user layout effect which is essentially a use effect but it's when the ui mounts okay as well as any dependency here so when the ui maps we're going to say navigation.set options and instead of this i'm going to say header shown first header shown all right first like so bam and as you can see it goes away so really nice already it's gone and that looks pretty good now the reason why i'm keeping that is because i want my picture to actually go up inside that view so what i'm actually going to use here is rather than a tech boring text string i'm going to go and say i want an image right and this image is going to be from the react native library not from the uh the theme library so you can do it from a few different places i'm actually just going to take the one from actually i think we did use it no we did use that one um so if i type in image i did use the themed import right this one here right and then what we do is this will take a source right so the source in this case has a object inside of it and it's the uri is going to be i've shortened this url for you guys so you guys can feel free to use it i've helped you out a little bit there you go bam hit save and let's see our app right you can't see anything yet because we haven't got any style to it so now what i'm going to do is the second argument is called the container style so container style is going to have our tailwind and we're going to add some styling here the width is going to be 4 and the height is going to be a value of 64. and as you can see now we should in a second possibly yay there we go nice good stuff right and if you really want to you can actually have an activity indicator show if it's loading so you can see here we've got placeholder um content and you can actually put something like a activity loader if you really want to or something like load or whatever i'm just going to keep that there so you guys can feel free to do it assassin's loading right now so if i was to refresh our app by hitting r you can see and the reason why i say unsupported class is just because it took time to compile okay but now if you can catch it there's like an activity indicator right at the top but i mean you you might want it you might not the point is you can change up for whatever the hell you want right but i'm going to leave it there for now so we've got our image up that looks pretty good okay i mean it looks okay and then we're going to go ahead and for the scroll view i'm going to go ahead and give it a background color which matches the color of that image right so in this case i'm not using um our tailwind because i've got a custom color so i'm going to be combining the two where it's necessary and yeah again you can mix and match as you wish as you see fit it really doesn't matter again there's million ways to do the same thing here so hit save and now you can see we've got a nice background color matching the top already our app is looking pretty good okay so really really nice uh chris i really like your comment man he goes i owe a large part of success to sonny when i got a job as reactive been doing wordpress and php forever it's time for a change jay please capture that that is awesome thank you so much chris anyone else has success from this channel thank you for sharing your stories please do it means the world it goes up on the testimonial war at proper react.com for testimonials because that is our wall of fame and we love and appreciate the success from you guys ashby says you live there you go okay let's go guys let's get the music back up as well i'm gonna kind of get this vibe going all right let me change the music up i've got my whole playlist here all right let's see bam okay it's cool get some focused vibe all right so we've got image here and then we're going to go ahead and have um a little bit of ui so i'm going to have to search by customer as well and then we can implement that afterwards but the whole point is right i just wanted you to have something before we can go ahead and keep on adding in the backend stuff right so that way you've got something to look at right so you've got the input there you go we're going to import this from let's use the themed right so there we go we got an input and you can see it's an underlined element and it's actually there i believe it or not it just doesn't it's hard to see command k brings up the keyboard on your simulator all right the base guy thank you dude i appreciate you um thank you faizan i appreciate you guys uh mobik says jay is the robin to the batman hey jay is awesome he's cooler than that robin give him something come on um we're gonna go ahead and add a placeholder and uh we're gonna go ahead and say search by customer hit save and as you can see it says search by customer and then we're going to have a value and i'm going to hook this up to a piece of state inside of react again react basics 101 free in the description j will drop a link now and you can go ahead and feel free to benefit from that um picture says i got a job at walmart as a reactive developer just because of you that's awesome dude thank you jay screenshot that and the official sky that is amazing everyone's getting jobs this is so cool all right we're gonna go ahead and grab some uh some stuff here we're going to get an input set the input i'm going to say equals use state use state there we go bam okay and you can actually cast the state here so if you want to kind of make sure it's only a string you can make sure it's on your string and you can give it a value of like so right and then that way it won't allow me to do that you see if i do a number it freaks out it says whoa you ain't allowed to do that someone's coming from the dominican republic awesome stuff simon says sonny we love you as you bring new content to us when to learn new techniques keep on simon from kenya thank you simon i appreciate you i think you joined the papa fam today didn't you uh thank you for joining dude it's awesome to have you inside the family so we're going to set the value to that piece of state here and what's really nice inside of react native do you have this unchanged text as opposed to the input field in html we have on change i think is or on keypress or not of course but you know what i'm talking about on change then you have an event handler and so forth here you actually get the text as you type in and it's an arrow function and you can basically just set the input text and what you can do as a shorthand to this is you can actually just go ahead and do this all in one line so i'm going to hit save now but you can change this all into set input and it does it for you there you go that does it and it still works you can prove that because you can still type so there you go now we've got that stored in input we can use it later on nice cool i'm going to change the container style here to have some tailwind styling inside of it i'm going to have the background set to white i'm going to have padding on the top of five padding on the bottom oops padding on the bottom of zero and padding on the x-axis of 10 okay looking good in just a second wait for it pow there you go right so slowly getting there looking really really nice whoa chris chris chris chris thank you dude 20 donation much love sonny i appreciate you man that that means everything thank you so much dude i'm gonna get some sushi later uh thank you dude i really like that and also we're nearly at half a thousand likes thank you guys again i can't stop saying enough really really amazing stuff right so we have this looking pretty good so far let's actually pause at this point and start working on the back end i think so um oh i have a i have the pop-up coming in on this one second guys i'm gonna actually pull my audio in through my headphones right now coming through in the weird way there we go now it should be all dialed in cool stuff all right damn we love sushi i do love sushi guys i haven't actually had it in a while all right so at this point um tangents uh we're gonna go ahead and actually set up step then okay so to get started with step zen guys what i want you to go ahead and do is firstly i just want to show you how you can do this right you can actually set everything up here all this kind of good stuff um you can actually go ahead and mess around with any of this really to go ahead and get started but we're going to go ahead and just basically set up fresh inside of our code and i'll show you how we're going to do it so close everything so that way you've got a fresh slate inside a package jason click it so that way you're at the top level and i want you to go ahead and oh sorry i'm not going to do that just yet yeah we're gonna go close this up pull this over here and i want you to go ahead and create a new why can't i split my terminal okay i'm gonna create a new one so i've got the split terminals over here i've got another terminal here i'm going to type in step zen because we did that uh set up earlier i'm gonna say step then init okay and this will go ahead and set up step zen inside of my environment right i'm sure it steps into it's been a while there we go would you like your endpoint to be called so at this point i really don't mind what my endpoint is called so i'm going to just leave it with api vocal leopard right so that's mine uh create a steps in workplace there we go so let's see what we've got here i've got now got screens let me refresh where's my steps in ls step then where is that oh step zen config okay i'll tell you what guys actually cut that i'm going to show you how we can do it better actually what i want you to do is i'm actually going to get rid of that and instead i'm going to create a folder called step zen and there's a reason for this i want to keep it nice and neat right it's always handy to have your code looking a lot more near right so at this point i'm going to go cd step then and inside of here now i'm going to say steps and init okay and this is going to go ahead and we're going to be called dusty gopher right now all right so now inside a step then i have my config file okay that's a bit nicer that's cleaner okay so the first thing i really want to do here is i want to get my first kind of endpoint now how does any of this work right like how do you get steps in to create me this graphql api that you keep talking about it's actually way easier because of the awesome work that they've done over there so we're going to use the rest api documentation and as you can see here you can actually go ahead and even use authentication headers as well but we made it kind of easy to stay today we've actually got a pretty simple one we basically we're going to run a command called steps and import we're going to use a call command okay now i'm going to show you how this works first and then i'm going to show you how step zen utilizes it to actually build out these endpoints that we're after so first thing we're going to do is head over to our firebase now what i want you to pay attention to is if i click into customers you can see this top part right here these are actually urls guys so this entire thing is a url right here so you can see where we've got this uh four slash customers so if i click into customers right now here at the top we actually have a really kind of handy unique url okay so i'm going to show you how this works right now so first thing i want to do is i want to copy that reference url now as you can see if i went to that url it's going to pull my customers that we need okay so i'm actually logged into the wrong account let's go back here there we go and what i'm actually looking for here is my let's go ahead and grab this i need to there's a way there's a very nice way of doing this um right now this how do i do this again let's copy it there we go bam hit save okay i'll show you a different way all right so at this point what i want you to do is go in here and i want you to type in curl and paste that and you should see customers okay so i'm getting the wrong url here um i did a different command now and i can't remember which one i did uh let me find it quickly and then i'll come back in just a second so the one that i'm after right now is actually do you guys https the demo was okay that's it yeah i found it right so what you want to do is you want to paste it in dot json there you go and now as you can see i get my json come back okay now one thing i want to point out here guys is as you can see my json document comes back like so okay so as you can see each of these are a different id so if i was to actually go ahead and do something like this forward slash id dot json you can actually see that it passed it goes and gets that exact document so as you can see this is actually a nice co kind of api that we can actually go ahead and access our documents from okay and if we went over here i don't know if it'll work at that level that won't look at that level right but we've got orders forward slash orders dot json as well and you can go ahead and pull in the orders and so forth so you can see all i have here is a massive jason tree right and i want to basically make this way more easier to navigate and work with and we're at half a thousand likes i had to pause and say wow thank you that's crazy dude thank you so much guys so at this point what we're going to do is use that curl request to generate a graphql response all right so first thing i want you to do is type in carl thank you uma muhammad nakari incredible donation uh ngn i think it's nigerian it's 1 000. thank you so much guys thanks danny for the amazing video i appreciate it dude thank you so much here i want you to go ahead and type in json as well and you should see you get a response back so co requests are essentially the way that we do what i did on the browser inside our terminal so we can use that information and basically connect it with sepsen right so i'm going to show you how we do that so where the hell is my um step zan doc oh there we go thank you guys that's the lovely donation here we go so we're going to type in steps and import and then we'll write that request and i will show you a few additional flags we can add on to it as well to make life easier okay so the first one i care about is get orders so this endpoint is going to be for the orders that we are going to be using so i'm going to go ahead and use the following i'm going to say step then import co and then i'm going to paste in the following i'm going to oh no not definitely not that let's go back to our firebase and andre smith what thank you dude 10 euro donation thank you so you guys hope this motivation to keep going you are awesome and thanks so much for all you do for us thank you so much andre smith this is crazy i actually cannot believe the the generosity from you guys thank you that means the entire world all right i really really appreciate that dude here we have the customers i'm going to go into orders this is going to be my first one and uh i'm going to go ahead and do the following okay so i'm going to copy the reference url i'm going to go over to my terminal i'm going to paste it i'm going to do dot json and here i'm going to add in a few additional things so i'm going to add in dash dash query type okay query type and for this value i'm going to give it a type and in this case i'm going to call the type order with a capital o and then i'm going to have dash dash uh name right now one second i've got query no sorry yeah uh time and then i'm going to go ahead and say uh one second i've completely lost my focus i'm going to say order there you go space i'm going to say dash dash query name and for this query name i'm going to actually call this one get orders okay then i'm going to go ahead and say dash dash name and for this one i'm just going to have the same thing i had before but it's going to be lowercase o and that's basically going to it's going to set up in a way that it's going to make sense for our folder structure right so if i hit enter now watch the magic that's about to happen all powered by step zen all right so check this out hit enter and watch this guys it's going to go ahead and import so as you can see what just happened here is actually incredibly powerful so do not blink because this is really cool well i'll show you okay so we go into steps and folder and notice how its order based on the name i gave we then go inside we get an index.graphql file and notice how we have inside of here our type our query right and as you can see here we've got our orders now here we've got our json response and the reason being it came back as json response is because we had some invalid identifiers but sometimes it can come back and it can actually calculate the exact types for us which is really impressive right but essentially what we've done here is we've got the endpoint and this has returned a bunch of uh json data so i'm going to show you how we can go ahead and take this and basically build out a really nice kind of response that we can go ahead and use so i'm going to get rid of that inside of here i'm actually going to go ahead and create a type and this type is going to be of type order now the type itself the order notice how this is a graphql definition not a typescript definition okay so first thing i want you to do is actually install the graphql extension because you're going to need that to get syntax highlighting so i want you to go ahead and install i think one of them i think by default here you go i've got this one install whatever one you want it's fine um let's go so we're going up to the top and then i'm going to go ahead and add in the following data types so i'm going to add in a chunk of data types now these are all going to be what we pull in uh as values so if i actually go to this url you will see that we get a bunch of these address city longitude latitude tracking id and so forth now what i'm also going to do is eventually have something here called tracking items okay what the hell is happening guys i have to say thank you again whops games 10 euro donate dude thank you so much he goes it sunny is awesome i love your courses thanks to your videos i'm next super fast retailing css and nexus guys you guys are you guys are blowing my mind thank you so much that's incredibly like thank you dude that's huge oh man i thank you so much wow here we're gonna have a the tracking items right but know it's something i'm gonna show you this is where the power of step zen comes in that is what we have to play with right i can't see my tracking apps but what do i have i actually have my tracking id and inside the data structure inside the items in a different section of my tree i've actually got some tracking information so if we go back here you can see tracking items has got a tracking id so if i was to open up one of these for example you see that tracking id if i go back you can actually see that that belongs to one of these and then that's got a bunch of items inside of it so how the hell am i going to connect that up like how would you even begin to do that right well i'm going to show you how it's really cool what they do there right well firstly what we're going to do is we're going to go ahead and make a separate request so that way i can go ahead and create the appropriate connection to that back end so i'm going to go ahead and actually do a similar thing that i did before but now what i'm going to do is create something called so let me go ahead and actually prepare myself for this one i need to create get tracking item by id okay so this one here so i'm gonna go ahead and do the following um i'm gonna say i'm gonna go over here back to our previous command and i'm gonna say tracking oops tracking items forward slash and then there's a trick here that you have to do right so if we go over to tracking items just take one of your um your examples here so in this case if i was to copy and paste this you see how we've got an example id copy that okay go back go over here and you just want to paste that id all right and the reason why i'm doing this by the way is just to get an example of the first entry and then i'll change it up and i'll have it however i need it right so the query type here is now going to be different it's going to be for tracking items right and we're going to probably miss change this up around a bit so tracking items i'm probably going to call some tracking items list the query name is going to be called get tracking items by id by from buy id okay by id and the name here is going to be tracking items in lower case okay and a camel casing so hit enter now it's going to create an import and as you can see we have a beautiful new tracking items declaration and look at that guys so primary example of what it did there it figured it out for us and wrote the definitions like what the hell that is so powerful guys that's really actually pretty cool right it actually went ahead based on the things that came back it went ahead and created those items for us in the database i'm going to create this i'm going to basically rename this to make your items because i prefer items it sounds better and here instead i'm actually going to go ahead and keep that as tracking items this is fine right so as you can see it looks pretty good now i'm going to customize it a bit this is basically a hard-coded value so what i'm going to do is a nice little trick here i'm going to add a parentheses and i'm going to say id of type id and it's a required field and then i'm going to go into here and i'm going to write dollar sign id so what i've essentially done there is i've made it dynamic now so you pass in the id and it will go ahead and create it so very very powerful stuff here so now we've got an endpoint which allows us to get the tracking items so this is connected to that car request keep hold of that thought let's head back to our order now what's really powerful about this is remember how i told you that we previously had data for example inside of orders and it just had this so that's all we had i didn't have access to the items though right well what we can do is we can cleverly connect it using stepsen's powerful materializer function right so this is a really nice thing about step zen and it makes you creating graphql endpoints really really nice so what we're going to do here is i'm going to write tracking items and what we're going to do is basically this is going to be of type tracking items okay now inside of here i'm going to go and nope track an item sorry and then i'm going to indent and i'm going to say at materializer so you can check out the docs if you want to know what exactly this does but essentially what we're doing here is we're passing in a name of a function so in this case the name of the function is what we just created over here so i'm actually going to pop this up on the screen this is hyper focus mode guys really really stick with me here right so i'm going to go into the name pop this in right like so right i want this to go ahead and be in double quotes as well comma no it's not actually comma we can just type in argument now this is where the magic happens we pass in an array of information okay this takes an object with key value pairs right the first one is going to be the name and the name here is the is the name of the field for the parameter that we're passing in so in this case i'm actually going to be passing in a value which is going to replace the parameter for id and then the field that i want to connect it to inside of my own um where is it gone tracking id so in this case we've got tracking id here i'm gonna connect it to that field so think about what i'm doing here right and i'm gonna try and illustrate this as much as i can right here so what we've essentially done is i've created a connection so where we only previously got this information in our order what i've now done is i've created a new item or a new variable called tracking items and what is done is it's used the tracking id that we originally have it's using the special function that we created over here okay and it's basically passing this id to that function getting the response back and basically it's k we know it's this it belongs to this one because it's using its tracking id and it will append that as a response so it's basically built another variable on top of what we originally have now notice how some of these have annoying uppercase lowercase so just be careful with that just don't fall trick that all right so look at this okay so this is pretty pretty powerful stuff guys so i'm gonna hit save now and we're gonna see if we did this correct okay so i'm gonna go ahead and show you how we do this right now so i'm gonna type in step then start right moment of truth hit enter let's see what happens all right so it's going to go ahead and start up our local environment so now it says did you okay we made a little error here so i made it looks like i made an error inside of my tracking items oh here we are that's why okay so i actually made the arrow in my tracking items and that's because i actually need to create a new type over here so what i've actually not done correctly is uh i forgot to do something so okay that's fine so what really is happening here is we've got the tracking items by id and this is actually going to be a tracking items type okay so this one is actually going to be tracking items so we're going to change this to tracking items okay and then i'm going to go ahead and materialize the customer as well here so eventually we'll have the customer so i'm going to create another one afterwards and we're eventually going to connect the customer in the same way we just did um but for now i'm going to try and start this up and show you that we can do it so materialize of course the string requirement okay that's fine uh string is required and we have our string over here let's continue on so i think i made a slight hiccup somewhere let's go back to my um my stuff over here and we have my okay so let's debug we're in debugging mode right now so first steps first tracking items we've got our item which is item id name price quantity nice tracking items itself actually has our customer id and our items array cool and then we have our tracking items being returned from our get tracking items by id cool that's all nice then we've got our order now inside of our order we've actually got our carrier created that strip and a tracking id which is of type string okay cool and then we've got tracking items okay so that's that's actually pretty good that's actually pretty good the only thing that we have messed up here is get orders so get orders is actually going to return a type of order list and we need to create that type so i'm going to type order list and this is going to have name which is going to be an id and it's going to have value which is going to be the order itself okay so that's just the way that fires firebase tends to give it back hit save we're going to cut that and we're going to do steps and start okay so we've got the same error all right now we've got to debug this materialized argument query of type string is required but it's not provided okay so let me see where i've made a slight mistake tracking items i've probably typed in something incorrect oh my god i've typed it in wrong there you go get tracking items by id you see that guys i made a mistake so don't do what i did and make a silly mistake like that actually type it in correctly please okay hit save and um let's just fix that right now okay so we're gonna pop that in hit save and then um we don't actually have get tracking item by id so i think what i've messed up here is my naming so let me just double check get tracking item by id okay and there we go okay so my naming is off all right there you go that's better so now what you can see is it's deployed at our local host and also if you want to use it online you can use this and then you can use your authorization key as your header to access it okay so in this case i'm going to use this i did that in the reddit clone so if you want to check that out you can go over there and check it out okay so we're now going to go over to localhost there we go done right here we are right so click on explorer hey we got our orders we got our tracking items so this is where the bloody magic happens right so the first thing i want to do is i want to get the name and the value of all my orders and you see guys look tracking items so i'm going to call everything but the tracking items firstly to show you if this actually works hit save and we get no okay interesting so we need to figure out what the hell that's going on there all right i'm going to figure out why that happened um get checking items by id let's go ahead and give that a try let me give get an id back so what have i done wrong here i've actually gone ahead and messed up something bad here so i've got my id.json id.json okay tracking ups clone there we go okay let's let's debug this is a tricky part this is where we've actually gotta kind of break it down and figure out live on there okay my item item is good let's actually get an id back over here and figure out what the hell's going on so if i get an idea of an order let's take this id for example let's go over to our step then oh no this one i've lost track of this now and hopping gorilla oh no i was on the wrong no that's different sorry i'm gonna close that out here we are get tracking that and by id let's go ahead and get rid of this and you can even put it here as well right so you can actually pop it in oh give me this come on and i want the customer ids okay yeah checking out miley okay so it's not correctly connecting so i need to debug this right live problems here we go let's go ahead and check our end points firstly so first thing we want to do is go ahead and create uh see if this is actually pulling so i need to do a dot json okay we are getting that information which is correct right customer id comes in so i'm not sure why we're not actually pulling that through right now um that is correct um we've got the id which is correct we've got the tracking items which let's just go ahead and test it and let's actually get all the items back as well so i'm going to create another query here get tracking items this is going to return a type of tracking items list so all of them i'm going to create the type up above it so we're going to basically we're just basically testing and debugging right now okay and then we're going to go ahead and we're going to change this to tracking items json cool and here for this one guys we actually need to do something slightly different we have to have a transforms so this is all in the documentation but essentially what we're doing is we're taking it from its current pattern and we're turning it into an array which is we're basically turning it from a json from the response type into an array hit save and now we are good to go okay so let's go ahead and see our get tracking items okay so heading over back to step then let's go here and let's hit refresh and now you can see we've got get tracking items i want to get the name of everything back i want to get rid of this get tracking items okay um this is annoying let me see what's going on get tracking items name yeah okay nice okay we got something back this is good so we know not everything's broken so let's firstly test this out okay hey this is good we've got our tracking items now what i can do is let's take an item id and let's go into our get tracking item by id let's pass in a value here for the id which is going to be a value of let's pass in um item and i should be able to pass in this id what's this happening right let's do that oops sorry guys item id bam hit save okay so it's working is working i don't know why it was ditching out weirdly before let's do get orders let's get all the orders now okay so i just needed a bit of a hard reset okay so my orders are broken but i'll get tracking items and get tracking is done so we fixed that problem now we just need to fix the orders so something went horribly wrong in orders so let's go ahead and figure out what's going on there so in this case i'm going to have the get orders which has got our orders list and that's looking pretty good so far so that is exactly what we wanted and our order list is our return value we go into that and we get our orders.json back oh okay i know why this is we forgot to add the transform guys so this is because okay so it was coming back and we weren't transforming it into an array so that's why it wasn't working oops my bad okay so we need to add a transformation okay so at this point don't forget to do that it's very important uh let's see if that works now it's gonna probably there we go bam we've done it trust me that took me a long time with documentation but it's done awesome stuff okay so at this point that's looking pretty good so we've got everything in and now i want to show you the magic so remember how we only got the item back right well no we only got that information limited to that remember i did that special materializer function this one so it's going to use the tracking id run a query connect it to the other one combine it all a uh all in a session all back in the response so now you can see i get that other data type and i can pull in only the things i really want so if i didn't want the item id i can do that hit enter bam look at that now look at that that is live i debugged that live i'm so happy so what i like about this is that you can pretty much now go ahead and connect a basically like a bunch of useless json strings like this into something useful now so in some sense this is now relational right so in this case we're using the tracking id to perform a separate query pull in the additional items and have it as we need it so you guys can see i hope you can see there the power of step zen and what we just did right we took a boring jason you know basically like a boring jason back end and we went ahead and made it a powerful interface with the graphql using step zen okay so that's very good i am very happy now okay now i'm going to show you how to add a get orders by id one in case you're wondering so if you did want to add a get orders by id you can do it just like that you can have your in this case i've got the wrong url sorry guys i've actually just copied that in you can go ahead and do the following you can do orders forward slash get rid of that and then you've got your id and that's going to be your dynamic value right so that's how you would do an orders by id so i've shown you now how to go ahead and do all of these things now what i'm going to do next is create the same type definitions on the front end so this consider steps in as the interface between our front end and our back end firstly hit the like button as well nearly about past 600 likes you guys are incredible today thank you for being awesome right so now i'm gonna go ahead and create the type definitions on the front end so that way we protect ourselves and we code this in the correct fashion all right so what's really nice about react native and chess lately is that if you go ahead and simply create a typings.d.t.s file this is a type definition file you actually don't need to go ahead and keep importing it into different files you can just go ahead and actually use these type definitions and it will pull it in when it compiles so at this point i'm going to create a customer type this customer type is going to have an email of string and a name of string as well okay and then we've got a type of customer list right customer list and this type of customer list has a name id and the value is going to be a customer right so you see how we can use different types of values right and as you can see we're slowly building it out now i want to show you something right going heading on back over to our um we haven't actually built out a customer yeah sorry that's id not idb cursor right going back over to steps then we actually need one more thing right so i wanted to go ahead and show you a final materializer which i forgot to do right let's finish it off strong is basically where we have our tracking items right so notice how in tracking items we have customer id so what do you think i'm gonna do right now right we have a customer id right there i've caught sight of it i know it's there so now what i'm gonna do is go over to my customers.json file and just stare at this json with uselessly right no well that's all that's not what we want to do instead what we want to do is basically take that id and materialize it and connect it okay so what i'm going to do now is go back to my code create a awesome materializer all right so i'm going to go ahead and firstly to do this i need to actually go ahead and get a connection so what i told you is they've got a nice little trick right and i'm going to do that same little trick again so i'm going to cut my actually need to cut it i'm going to create another one all right let's go ahead and do this i'm going to do steps and oh don't do it there do it cd steps and make sure you're in the correct folder and then i'm going to go ahead and do an import now what i'm going to do is i'm going to change my import here right i'm importing from customers okay so i'm importing from customers so jason the query type here is not going to be tracking list items the query type is actually going to be um give me one second the code i'm just checking it's going to be let's do get customers okay so it's going to be get customers query name oh no i've messed this up um query type is going to be customer that's it customer there you go all right query name is going to be get customers get customers and then dash dash name is going to be customer lowercase okay there we go all right hit enter and let the magic happen on its side and let's go ahead and go back into our code and you can see we've got a customer there we go and it had the same problem it kind of it struggles sometimes to figure out what the return type is that's fine we can depict it ourself so at this point we've got the type query over here i'm going to create a type customer and i'm going to do the following right so i've got the type customer the email string and remember this is not a type type script definition it's actually a graphql definition slightly different hence the capital os and then we've got string and i've got the customer list which is actually the return type so customer list is the return type and that name is actually the key believe it or not so that's why i'm putting id there and then we've got value which is the returned customer that comes back so that's just the type that i've done the hard work here search that for you it's easy don't worry about it now get customers i'll say get customer this is going to be customer list and it's going to be an array that returns and it's going to have all the basically ids of the users that come back and then the customer themself right and this is going to basically be customers.json remember this is returning an array okay so i'm going to transform that array so what i need to do there is go ahead and transform it that allows me to go ahead and show it along right so pretty good there the next thing i'm going to do is basically rewrite this but have it as get customer by id right so same thing and again i'm showing you all of this because that way you can go ahead and extend it as you need to right by id and if you really want to take this a bit further roy ducks did an amazing video on this over at the um at the uh step zen youtube channel so definitely check it out return type for a customer by id is a singular customer so here what i would do is i would change this to be customers forward slash the wildcard id we are not returning an array so i can simply do that hit save it's going to rebuild our back end hit refresh on step then and now you can go ahead and see that we have get customers and you see i can pull in the name the ids and just like that bam we have a graphql interface oh the music is sick and we are going well at this rate right so back in interface is done we pretty much made our whole graphql interface now we're going to connect up to our native app go crazy speed and we're going to go ahead and build this app to make it look beautiful let me know right now if you are finding this fun if you are learning something new and if you are focused because i can see so many people retaining onto this right now so i know you guys are literally coding along with me and focus right now okay now i want to show you something else we had the materializer that i didn't end up wearing so i got hyped um so let's go back to our um tracking items so that's the whole point of what i was going to do so where we have tracking items as being a return type what i'm actually going to do here is i'm going to return the items themselves and then i'm going to return a customer right and what i'm going to do here is the type of is going to be customer and that's going to be capital and i'm going to indent i'm going to say at materializer right so remember it doesn't get it doesn't actually come with the customer attached so we're actually going to use the materializer to go ahead and find and use the value the previous query for us to go ahead and connect it together okay so i'm going to type in get customer buy id so the reason why i'm doing that is because i'm basically connecting this get customer by id okay and that actually should be a lowercase i get custom ma right by id so i'm going to do get customizability then i'm going to say arguments it takes an array with an object inside so there we go it's going to be named the field that we're replacing is id so double things uh quotes the field that we're connecting to is customer id okay let's hit save and now we should have materialized our customer into our return so if we hit refresh now when i get my tracking items i should see a new field inside of the customer so you can see value items is it customer no tracking that's get ordered sorry it was in get was it orders where the heck am i again this is inside of tracking items tracking items inside of get tracking items okay so refresh get tracking items name customer id items it has an oh sorry guys silly me um i did not actually okay so it hasn't rebuilt um weirdly so let's go over here field cannot be queried like this customer tracking items there we go so get customized reference in your query materials like this okay so we are actually typed in the wrong value so get customer by id it says oh i've been i didn't save the file god damn it right deploying so check out your logs and it should show you then it says done 3.3 seconds yeah so now we refresh and we should see customize yes there we go so now i can pull in the customer as a return value this is graphql by the way yeah and now you can see i get the the item the item is in the tracking information the customer id with the information of the orders the items and it connects the customer bam bam bam that's damn powerful man that is actually wicked like that can turn any database source or several database sources into a response like that i don't think you understand just how powerful that is guys like you can make any query from any different data source so you can have like curl requests from one area super base request from some other combine it so all you're saying is i want the tracking items and give me the customer as well and use the customer's id to figure it out and you see what i mean you can pull in all this different information from the different sources which is so powerful right and all your front-end devs would have to do is come on to your graphical uh ui and basically play around with it oh okay i can see the customer i can access the customer and there you go right really really cool okay debugging 101 today jay we are doing damn well this is awesome man um almost at 600 likes smash the like button right let's keep moving guys so at this point we need to pull in that uh information from the front end so this is where we're gonna need to use some kind of client uh in this case this is where we love to use apollo right so apollo client is what we're gonna be using today so i'm going to head over to my browser i'm going to basically stop spamming my browser i'm going to have another tab here saying apollo client okay so what we're going to use is an apollo client for react okay so we're going to click on get started you've got v3 v2 we're going to use v3 and we're going to go ahead and install it so first thing we need to do is install the following dependencies so go ahead command j and uh remember i'm inside of step zen now so cd upper level yeah and then you want to do npm install at that level right so let's do this nightbot is is savage right it just slaps people out if they speak bad honestly uh it's once that smog did um so at this point we're doing pretty good um one second guys oh god what has always happened okay here we go so we've got this looking pretty nice so far next thing you want to do is go ahead and you need to basically wrap your entire app and initialize it so what i'm going to do now is actually do a local connection to my app so in this case if i was to connect here i'll show you how we do it so at the top here is go ahead and do the following i see you jay all right so at this point we're gonna go ahead and import from the apollo client and instead of the uri from the dummy demo that they gave i'm gonna go ahead and do the following right instead i'm gonna go ahead and take the steps in uri that they gave us so in this case my local host step then is running at dusty gopher all right so i'm going to copy that i'm going to go here now remember i told you when we actually set this up or when i started running it uh where was it so at the top over here whenever you basically run it it will give you two uris it'll give you the deployment one and it will give you the local one so when you're developing feel free to use the local one and then you can switch it again i did that in the reddit clone feel free to check it out if you're interested in how to do that so we've got the client here next thing we need to do is you can do it really above or below the tailwind provider i'm just going to do it below i'm going to pop in the client like so go around the navigation container and then exit like that so you see how we're powering the app up in a higher order component fashion okay at this point you probably want to check that your app hasn't crashed okay so we're doing pretty good so far okay okay and ah there we go um coulia needs to get out of here all right so at this point um let's go ahead and see this um we've got our application here we've got customers orders and um one second guys let's check this out let's do it so we've got navigation um container over here so now what i'm gonna do is basically we can actually use the inner components okay so i'm gonna go ahead and do the following now so right now yeah now we can start making our queries and so forth so i'm gonna show you a nice way of doing this now i haven't made use of every single query that we created okay instead now what we can do is we're going to go ahead and um create a nice folder structure because i always get that question sonny please make a photo structure as you would when you're building an apartment so i'm going to show you right now how to i'm going to have graphql photo okay and inside there i'm gonna have a queries folder okay so inside here this is gonna have all my queries logic so this one's gonna be a typescript file so it's gonna be queries.ts okay now inside of here i'm going to create some queries now you're probably wondering how do i know what the queries are well remember we were in steps in a second ago right well in fact what you need to do here is you just need to go ahead and if we click on export you can actually see here what i love about this is you can go ahead and do this you can do apollo use query hook you actually get the code right here okay so what you can do is once you've created your query from all the information that you needed you can go ahead and use this to get the snippets that we're going to go ahead and create okay and um one second guys so in this case you can see we've got the following so i'm going to go ahead and basically use that same way of doing things but basically streamline it so we're gonna get the customers and we're gonna get the orders right and we use those inner selectors to materialize things so it's not going to waste okay so check this out we're gonna go ahead and firstly create a query for the getting the customers so in this case bam we've got our customers and here you can see gql so that's actually from apollo client so i'm going to go ahead and pull that in right and uh bam just like that we're about to hit 600 likes wait for it wait for it wait for it it's about to go someone here someone hit the like there we go bam 602 lives bam there we go keep smashing that thumbs up let's hit a thousand let's do it let's break a thousand guys absolutely incredible stuff so there you go we've got the customers that's our first query and then we're going to go ahead and create an orders one so the orders one i'm actually going to go ahead and pull in all the information so i'm pulling in all of this information right here now again what is nice about um graphql is uh you can actually go ahead and say i don't need to create that right you can get rid of it and then it kind of reduces the network call bandwidth because you're not getting that information in every single time so you can actually be quite efficient with this and if you think about it all the heavyweight fetching and connecting from different apis is happening on the back end then you just get a single request response which is nicer than doing several requests on the front end right cool stuff okay at this point we've got the orders looking pretty nice um so i'm gonna go ahead and guys the likes are flying right now it's absolutely incredible okay so at this point we are going to um start pulling in this information okay so i'm actually going to create a few helpful hooks for us okay so we're actually going to use two custom hooks and i'm going to create them now and then we're going to use them inside of our build so if you think about this here we have all of our customers so i'm going to call this one the use customers hook and this is going to use that graphql query to pull in all the information in a certain way that we can basically go ahead and constantly use it in an easy approachable way then we're going to have another one here which is gonna be called the use orders hook and this is gonna fetch the information so that way we can render it on the front end like so so we're gonna create two custom hooks now the first custom hook let's go ahead and do that so i'm gonna create a hooks folder the first hook is going to be called use custom ah sorry use customer orders dot tsx okay bam just like that and now inside of use customer orders.tsx what i like to do guys is a little trick i like to do rfce right um and then i basically turn this into a functional component so bam make it an arrow function yes there is a snippet for it i know i know so in this case this is basically what we're doing and then what we're going to basically say is we're going to use the um use query hook from apollo and inside of here i'm going to say that we're going to have const and we're basically going to pull a bunch of stuff in from the uh from our graphql core now when i make a call to graphql to get the information that we should we saw earlier it's gonna give me three things back it's gonna give me loading it's gonna give me an error status and it's gonna give me the data that returns back so i'm destructuring the object here and i'm gonna go ahead and say equals use a query and i'm going to go ahead and pull in that get orders function that we query that we created earlier okay so really really good stuff let's go ahead and hit save and guys i just want to mention as well right universe code thank you dude he actually just dropped in such a lovely thing here he goes after two hours 200 people are still watching only the papa fam does that thank you dude absolutely incredible stuff right really really nice right um incredible incredible energy right uh says hello there what's up papa fam remember yo what's up good no that was good dude all right so at this point we're not returning jsx as well i'm going to show you how we're going to do this okay turkey in the house what's up all right so we're also going to have a piece of local state right so here i'm going to go ahead and say const orders set orders equals uh well we've got loads of people just flooding in that's awesome man yo use state and then i'm going to go ahead and import that from react and as you can see here this is going to start as an array now what i'm actually going to do here is we created an order type well we haven't created yet i'm going to create in a second so we're going to create this is going to be of type order array so going back to our typings i'm going to actually complete these i've completely forgot to type this up right so remember we have the customer list we also got tracking item which is basically this is all shaped to the graphql course that we did previously that means we've got our individual items we also got the order the customer response and the order response typings okay so these three are basically mapped out exactly as i wrote it inside of the uh the graphql um steps in area basically i completely lost my words there these type definitions match okay yes that's what i wanted to say right so now we've got our protection over there awesome stuff okay somebody says how long did that take you to learn coding i'm still learning right that's how i see it i shouldn't you should never say i've learned it right you're always learning i'm learning every day right so honestly you want to keep on going right so at this point now what we're gonna do is we're gonna have a water break because i'm parched that's the most british thing i've said on a youtube stream ever patched i'd never say that i'm thirsty all right thank you guys for that i'll never stop thanking you for that hundred thousand ah all right we're doing well so i think we can take this place we're doing very well all right let's go let's smash this [Music] okay so right now we're gonna go ahead and create a use effect now what's really cool about custom hook is that you can go ahead and have your own kind of specific logic and it's basically gonna have all the user effects like kind of stuff happening in the background right so it's it's really it's really quite a nice kind of finished product you'll see what i'm saying right the point is is that right what we're gonna say is if there is no data so basically if we're still fetching you can say if loading returned but i'm going to say if there is no data return so i'm going to do a little bit of defensive programming here okay so if there's no data right so if we're still fetching the get orders right remember it's going to first say loading and blah blah right but if there's no data then we're going to stop there right and this means that data is a dependency okay um but if there is data what i'm gonna do is i'm gonna create a new orders object and this is gonna be of type order so i'm gonna create an orders array and what i'm going to do is i'm going to access the orders and i'm going to return it so basically what i'm doing here is i'm transforming the data in a way that allows us to uh manipulate and play with it on the front end in a bit nicer response way okay so i'm going to say data ciao from italy what's up dude all right so i'm going to say data dot get order so basically what happens is is whenever we do any of these requests right for example get orders what actually happens is is that query guys is gonna return in the form of an object right so this information will come back to us and you can see it's data dot get orders dot and then you've got access to these things right so what i'm now doing is data dot get orders dot map so i'm basically kind of unwrapping it in a nice way right so i've got the i've got an arrow function here and i'm actually returning parentheses i'm returning an object right inside of the arrow what we have is the item and what i'm doing is i'm destructuring the item to get the value out but before i do that i'm going to cast the item right so how do i do this right now well what i do is i basically go ahead and i create an object and i go ahead here and i say it's the order response and that's actually something i created uh earlier so if we go click into that that's what we did in our type definitions and here i can actually go ahead and get the value out okay now what i'm going to do is i'm going to say the carrier basically i'm rebuilding up the object right so we've got a nice kind of presented front end so we'll say value dot and you can see here all my intellisense knows about what's happening right now yes i can do the spread operator if i really wanted to but i'm just going to make it explicitly clear as to what's going on right so at this point i'm going to basically fast track and we're going to pull in a bunch of stuff so we've got a few different things that we're pulling in okay and once it's done i'm going to set the orders to our orders so essentially what i'm doing here is i'm basically passing in the orders as it comes in from at the back end okay now what am i doing next rather than returning some jsx it's a custom hook so i'm going to return the loading state the error state and the orders not data so as you can see now this will either return some orders or it may be it may be loading uh but either way i can use all of this information as and when i need it okay cool stuff we're now going to do the exact same oh wow i've messed up right bad didn't it i've done the customer orders oh okay i've completely okay so tell you what guys this whole thing was for use orders right this i'm sorry guys this whole thing falls for used orders okay so never mind so when we're jay when you timestamp this please put use orders here right that was actually use orders i completely messed up my bad um use orders is what i was actually doing there so which means that you have to change this to use orders it's fine it happens a completely lost track right and the next one is going to be use customer orders there we go use customer orders i was reading the chat and i kind of got a bit mixed up right rfce bam okay now for the customer orders same similar thing but customer orders is a hook which takes actually it's gonna we're gonna pass in the user id and then it's gonna basically from the overall orders that we pull in it's gonna filter it down based on the customer id that we pass in yeah yes there are ways you could do this you could probably offload this to the back end you can i'm just going to show you how you can do on the front end okay so first step is we're going to go ahead and pull in a bunch of dependencies that i'm probably going to need like so okay and get orders i can pull in as i need it okay so first step is to pull from the get orders so i'm gonna go ahead and get my get orders like so and then what i'm gonna do is i'm gonna go ahead and um i'm gonna get a my orders set my orders and i'm gonna get uh it's gonna be an array of what is nice okay next stop is we're gonna have a user fax so very similar to what we just did guys okay very very similar to what we just did it's going to have a dependency the dependency in this case is going to be data we are going to have a defensive programming block so in this case i'm going to say if there is no data then we're going to return so if there's no data return bam call and then we're going to do the whole fetching so i'm going to say with the order so we're going to return a bunch of orders i'll say data.get order so very exactly pretty much similar to what we just did get orders.map and then we're going to have the same thing so uh parentheses arrow function i'm going to be returning implicitly returning an array so an object sorry an object yeah inside of here we have an object which is the order response this is a nice song actually this has the value inside of it bam and then the object that i'm rebuilding from this is going to be basically the same thing so it's basically exactly what i just did right only difference here is that we pass in a user id as a value okay this is going to be a string that gets passed in now when we have our orders here what we're actually going to be doing is we're going to be filtering based on the customer's order so i'm going to create something here and this one's going to say orders dot filter and what i'm now doing is i'm taking the orders that we just had and i'm going to say for every single order the predicate function so what i'm checking against is going to be order dot and as you can see here i've got all the vast things i'm going to say order the tracking id oh no sorry it's tracking items tracking items dot customer id is equivalent to user id so i'm checking if that is the case right so i'm filtering it out based on that now what i then do is i set the orders to the customer's orders cool that's it right and because we're using the user id here it also has to become a dependency any variable externally that you use inside of your user fat block has to be included in your dependency array as it is a dependency of your use effect right so if it changes your user effect has to effectively run again now rather than some jsx returning we don't care we're going to take the loading the error and the orders out done we have our useful hooks okay so useful hooks done now it's time to get back to our front end let's build out this app man let's go ahead and build this out and use modules and cool stuff like that right so heading back over to our screen so screen customer screen let's go ahead and do the following so this screen right here see how we're gonna move now it's gonna get real fun i'm telling you it's gonna get quite i'm gonna restart this jazz song because i kind of like this let's kind of turn the volume up quick little water break and we're gonna we're gonna smash that like button and just kill this now i think we're doing very well on the speed thank you sonny i really appreciate it was i understand the name of the channel cannot make you understand but trust me you know me thank you dude i appreciate you so much universe code you're awesome subscriber okay let's do it so we're first going to start with the customer screen so we are going to actually pull in that uh helpful hook um in fact what i did here was i still used our customers query okay so get customers i ended up using it so okay we're not actually using in this screen we're using a different one and i'll show you why we do that in a sec okay so i'll tell you what we'll do that's fine we're going to pull in the hook obviously loading uh error data so i'm going to use that graphql hook use query get customers i'm going to pull everything in like so and then we're actually going to render this out so i'm going going to render out the customers down here okay so let's do this let's go underneath our input and here i'm going to say data and it's going to be optional chain because there may be a case where it's still loading okay get customers and you can yes you can block based on the loading state if you really wanted to so next we're going to map through now each customer is going to get returned so we're going to return a customer and return something along with it now as you can see here we've actually got a um we've got the get customers and what i want to do instead here is i'm actually going to go ahead and say that this is an object of type customer response so i'm casting it a value okay and then there now i can go ahead and actually pull out values from it so i can say i'm going to get the name and inside the name i'm going to rename the name to id because it actually comes back as name but it really should be id kind of confusing but that's firebase for you all right so and then we're going to pull the value and that has inside of it the email and the name okay oh my god adamo thank you so much us 10 donation i appreciate you guys that means we're over 50 dollars in donations incredible stuff over 50 pounds sorry in donations that's huge thank you so much and we are literally near 700 likes absolutely not okay thank you dear i really really appreciate you then we're gonna have customer cards so now what we're going to do is we're going to build this customer card component okay so let's actually do that right now so we're going to say customer card and we're going to build that component the key for each customer card is going to be the id the email is going to be the email so these are going to be props that we're going to pass through the name is going to be name and the user id prop is going to be the user id all right so the id that we have here okay so let's go ahead and create our first component so uh well a separate component so i'm going to create a components photo oops no don't do that don't do that go to package.json then press photo there you go components cool we're going to go ahead and create the components folder now we're going to create the customer card so we're going to do that right now so create customer card dot tsx bam here rfce oh no our react native functional component why is my tabs doing that what the hell all right so there we go import it and now it's saying email now this is what's really nice about thank you apple that's really really kind of you um what's really nice about this is it says you haven't included that as a typescript prop so we're actually telling you the code is wrong so this is good this is very good it means that it's calling us out on something right so what we're actually going to do is we're going to take a bunch of props so you can see the props that we accepted in the previous screen were email name user id i've written out that type definition here the props come through here so props come through we assign it as props but i can just save ourselves a bit of time and destructure the props and get the email the name and the user id out like so okay next up i'm going to use our special customer orders hook to create the appropriate information or to pull in the appropriate information based on the customer's id uh id so in this case loading error data equals and we're going to say use customer orders and i'm going to pass in the user id so what we're essentially doing here is we're calling in all the information this is going to be order story not that alex says let's go pop from diamond go platinum off as hell yes dude so check this out so in this case we've got uh it's gonna it's probably won't load at the moment anyway because i haven't rendered it out correctly um so we've done that and then we're gonna go ahead and have stuff rendered out here so firstly we're going to use tailwind in this bit so i'm going to go ahead and do that so we're going to say con's tailwind equals use tailwind and then the final thing i'm going to do just to prep myself is use the navigation uh we're going to use that inside of here and we need to import our customer screen and navigation prop which we already created all right because the customer card is sitting inside customer screen we're gonna use that uh prop okay so hit save you can see we've got customer card here so it's starting to render out now cool stuff right now at this point we're gonna basically build out that card so it looks damn awesome and i'm gonna move damn fast okay so touchable opacity is a button component similar kind of button component it basically just makes something clickable right so it's like a touchable effect so now if i click it you see that i've got a clickable effect so touchable opacity is going to wrap our uh element then we're going to use something called a card right now the card i'm going to pull in from react native elements themed library and inside of here i'm going to have a view okay now as you can see we started getting cards okay now the first thing i want to do guys is inside of that card i'm going to change this style so the container for this is going to be a tailwind styling element and we're going to say um it's going to be padding a 5 it's going to be rounded large and for the flex items inside of it i'm going to justify the space between just for i mean to be fine i don't think we need that just yet actually so let that give that a second cool okay nice padding of five and then uh the view cool james tutu says sweet go papa react let's go dude i love your energy thank you for tuning in all right so first thing we've got here is we need to we're basically building this out right so we need to build out think of everything in boxes box box all right and then there's a box underneath and there's a divider between them right we're literally gonna just do that right now right so first things first we've got a view with two text fields inside of it so view with two text builds inside the text times two bound just like that all right then we're gonna pull the name in and over here i'm gonna pull the email in no sorry the id so i'm gonna say id user id oh my god id what am i doing my id is user id okay lucas matt jones we've got loads of stuff happening now underneath that i'm gonna have a view with some text columbia in the house what is up one all right now at this point i'm going to say if it's loading right so we can actually use that loading state for good use if it's slowly i'm going to say loading dot dot otherwise i want to say i'm going to do back ticks so i'm going to do some string interpolation here say orders dot length x so it means like this many orders so like basically when it's loading it'll say loading and then it'll say two objects right inside your order basically so looking good pretty decent right and then we got an icon now this icon is gonna have a bit of styling attached to it so i'm just gonna save us some time i'm gonna pull in the icon i'm actually gonna pull it in from a react native ui elements themed now this has got margin bottom of five margin left of auto name is box and typo is the type if you want to know the types you can command click here icon type is where you'll find all of the different types hit save already started to look a bit funky it's kind of getting there but it's not there yet okay now outside of the icon right outside of this view outside of this view we have a card divider card dot divider okay and then underneath it we have a text with the email inside of it cool now i'm going to start this up to look like what we see behind us right there let's move let's move the first thing we're going to do is style up the see how i'm always switching between react and and next yes so um uh no we're not native in next year's i'm getting so confused tigre in the house erasmus sunny i'm absolutely excited to catch you live what is up dude good to see you here thank you for tuning in tailwind let's go ahead and do it right so it's 700 likes guys smash that like get this up if you're watching the replay like guys worth thousands of likes what the hell are you saying all right at this point we say text to xl and then i'm going to say font should be bone and for the user id style is going to be um and i'll show you what we can do here right so if you want to combine inline styles with tailwind styles you put an array and then you just add in your elements so in this case i'm going to pop some tail in style so text should be small and then i'm going to put a comma and then you can have inline styles so color should be black oh no i'm going to do the actual um a little theme color that we have going on right so i'm going to actually add that in kenya in the house what is going on guys well then there you see bam just like that looks good um text to excel this is looking nice okay okay now outside of this the view i'm gonna have a style actually um i've messed up a little bit i think i want to have it so this view should be encapsulating these this view should be styled and i'm going to do tailwind and inside of it on the flex row i'll pump it in a line let's see flex roll and that's not what i wanted that's not what justify space between justify between that's because this view right here should go underneath that view there we go that's what i wanted there we go all right now the only thing that's messed up is this view this is the one that i need to make flex so style tailwind uh flex row items in the center hit save and i'm going to justify it at the end so you'll see here is justify at the end this will basically put them on the baseline together cool the text over here i want to make it like a nice blue color so style is going to be that nice blue so i'm going to say color should be the blue that we previously had um bam like so okay just like that how look at that nice okay very good um tell me something i've been learning to code for four years of student currently confused because i'm stuck with basics not able to create projects guide me use my basics guys i'm literally giving you free stuff like basics 101 and react make sure you use it um surav yes you can use um style components from ratnav okay so at this point we have that and it's a star there you go nice pretty cool okay now i want to do something before i implement the screen the pop-up the modal that stuff i want to go back to my customer screen remember i have a typing function here i want this to basically work right i don't want it to not work so i'm going to put a little it's kind of like obviously you can always go ahead and change this up if you want to but i'm going to have it so that way when you type in it will filter based on what you've typed in so i'm just going to show you how you can do it inline you can feel free to neaten it up you can always neaten it up if you want to okay so i'm actually going to do a little kind of piping trick here so i'm going to say data don't get customers which we already did and then i'm going to say that could also be kind of you know the optional change we could say filter it okay so i'm going to filter here and obviously it's going to kind of look a bit weird for now we'll say filter and for every single customer okay so the customer type here is actually going to be customer list customer list is a type we're going to return a check so basically i'm going to say filter if this predicate is true so i'll say customer dot value dot email no sorry name and we're gonna do dot includes includes the input input is what we mapped previously to our entry box and then the outcome of that is what we map out you go okay so as i type in now you guys can see this oh i love that prisma okay i'm so sorry if i pronounce this wrong prism myslaw lunik says i'm an experienced developer almost of 10 years in software development guys use sunny stuff it's better than a lot of paid stuff and it is so good that they're so goodly described that i love to watch it jay please screenshot that dude i massively appreciate that feedback especially from a veteran who's got 10 years on him thank you so much him or her i'm not sure but thank you so much i appreciate you all right so now as we type in it should filter so if i type in bill hey look at that salim oh look at that mandy hey and let's go down here and type in john oh oops okay that's nice and this happened john oh guys look at that that's sick right works cool and yes there are more optimal efficient ways i ain't getting into it right now it looks pretty good though okay awesome stuff this is going very well right very very well now at this point i'm gonna go ahead and create the uh clicking in um sort of modal that you see so how do we do that well first thing is i need to prepare for that model so we're actually going to go to our root navigator and prepare a stack for the modal so first things first we are going to create a new root stack group okay so i'm going to copy in the root stack group so just how we had one for the screen i'm gonna have another one for this okay and the difference with this one is inside of it i am gonna have a screen so i'm gonna copy that in but here it's not gonna be this it's gonna be my modal because that's what we basically called it and also guys i forgot to actually pass in the roots uh root param list here there you go that's why i didn't pop up and i was wondering so here my model and then the component for this would be the modal screen which we haven't created yet so we're going to go ahead and do that chris says huh i bought a subscription to skillshare from a previous pub fan video nice that is awesome thank you and if you are interested in uh learning more from the ogs at the papa fam including myself and their success coaches then feel free to come over to paprika.com zero to full stack hero is our community and course all right literally if you want to feel free to come and join us all right so we've got the model screen here and um i'm going to go ahead and show you how we basically tell it it's a modal so we basically change the screen options here and here what i'm doing is i'm going ahead and changing something called the presentation and what you can do here is you can put modal as a type now if i go ahead and do command or control space where you can see transparent modal modal full screen modal contain modal craziness honestly i know so much to learn but we're only doing the model okay it's fine and then what i'm going to do is for this screen you can remember i did i showed you how to do header shown false in the actual component but what if you want to do it at this level or just as a heads up to show you both ways well you can go ahead and say options and you can make headers shown so header shown you can actually go ahead and change it here as well so there's two ways you can do it okay so head is shown is another way you can do it here now for modal screen it's going to obviously freak out because it doesn't exist so let's create that screen modal screen we've got tsx react native functional exported component bam hit save and let's go back to our root navigator pull it in just like that hit save and voila done okay we have a mode screen so you can't see it right now you're probably wondering what's the point of that well i'll show you now now i can navigate to it and it will work right so if i go into my customer screen i'll show you how it works um where we have our customer card i'm gonna have it that way when you click into a customer card it's gonna go ahead and actually take you to my model screen and pass along the appropriate properties so what's cool about react native navigation is as you navigate from one screen to another you can pass props with that navigation request so imagine if i go from the home screen to the modal screen and i say hey when you do that navigation take the user id and name with you right so you see you go from one screen to the next but you can take data with you so we can basically pass props through now the way i showed you that earlier is inside of the root navigator you can see we actually defined it inside type definitions we had user id and name both being a string so now inside of the customer card let's go back there in touchable opacity i actually had the navigation with the correct prop type and all i'm going to do here say on press and uh we're going to go ahead and have some arrow function oops our function here guys what i'm going to say is it's going to be a one-liner so we don't need that we can just actually say um sorry i'm gonna say navigation dot navigate and what i'm gonna do here is i'm gonna put colon as you can see it knows what screens based on that prop type so you can see really i know it was a bit to set up but it was really worth it right sam khan says love you bro i love you too thank you for tuning in my model let's go pop that in and then i can pass in the data so you can see the parameter even knows the params because of the prop types which is so damn cool right so at this point i can take the u the name and i'm passing through the name here so we already have the name so i'm going to pass in my name i'm hustling user id and i'm literally going to pass through the values now let's check out if this works lucas bill click it bam header shown is false because i've disabled it but if i didn't disable it and i go back to the root navigator and i get rid of this you will now see if i click this my model look at that guys amazing all right pops up so i'm going to disable that as well boom right but if i showed you in real time you can see it actually pops up like so i'm going to disable that okay cool now let's make this screen this one right here so we're going to have lucasbill deliveries and we've got the delivery cards which are basically going to go ahead and show everything zor 20 with the 8.99 pound donation papariat changing lives thank you sir let's go thank you dude for being incredible absolutely amazing stuff we are moving and we're literally nearly at 700 likes i love this right now i love it this is element this is flow glow to the max right module screen let's go so first thing i want to do right now is i want to go ahead and start styling out so we've got the view everything inside of the view is going to be attachable opacity well no it's not what am i saying no it's not i'm going to have a backbind which is going to be detachable opacity so this button right here is going to be a absolutely positioned button on the top right of this element so let's do that now so i'm going to have a touchable opacity oops i'm going to say i like that pop-up i like it too man much more opacity let's go pop that in okay and that touch of opacity is going to have an icon inside of it so that icon is going to come from the theme library and then we're going to have the name is going to be closed circle close circle and the uh type so the basically where it's from is going to be and design yeah that's the one there you go there you go there it is and this is going to be styled up appropriately with tailwind so i'm going to need the tailwind uh edition so let's go pop that in over here let's import it so control spacebar at the end bam here and then we can say tailwind and let's make this absolutely positioned on the top right so right of five and top of five and we're gonna give it a z of tens that way it doesn't get buried behind anything so that index means it's layered up to the top and if we hit save now top right and as you can see it's actually relative already to the parent right so typically when you do web dev you have to make the parent relative but we don't have to do that this time okay now what's really cool here is i'm going to go ahead and make it so that if i click that x button it actually closes the screen now how the hell do i do that so i'm going to go ahead and pull in a navigation constant navigation navigation equals use navigation and i'm going to go pop this in now remember we used remember i said when we get to these second level screens we start having that more com complicated composite navigation prop type so in this case what i'm gonna do is i'm gonna repeat that same pattern i'm gonna say type and this is going to say modal screen navigation prop equals composite navigation prop and then it's basically the exact same as what i put last time except the only difference is is that when you come to putting in your screen you're actually putting in the module instead so i'm going to import all of these things a nice little trick there you go there you go and then here i'm actually going to go ahead and say my modal so this is where you would pick which screen you're currently in my model and then we basically pass that in as a generic template hit save and now on this one what i can do is i can say on press i can say navigation [Music] dot go back and just like that guys bam isn't do you just love it when code works for the first time so cool man so so cool we're lillian how'd you like smash that like button all right really really cool so look at that as soon as you do that boom hey it's cool it works really nice okay so that's looking really good let's continue on at that same momentum and get it looking the way we want it all right so uh what i'm actually going to do here oops so i'm going to move this slightly to the right so this that way i can kind of pull it as a reference when i need it okay so next thing i'm going to do is probably do the header so there's a view inside that i'm gonna have a view with two text fields with two text fields okay first one is gonna have the name and then it's gonna have deliveries um it's freaking out right now because it doesn't have that right now so it was this name is deprecated okay that's because it's not pulling out the name from anywhere right we need to say where do you get it from so remember i passed it through the customer card right when we navigated here the way you basically get it out as of that prop you have to go ahead and do the following so you have to say const um it's basically root equals use root okay and then what you have to do is you have to pass in your modal screen um root prop so we haven't actually made that so i'm going to make that and show you how that works so the way this one works is you say type modal screen oops type modal screen root prop okay and then we say root prop which is a special type of prop we import it from native navigation awesome stuff and then this takes a generic uh template and i mean this takes in the root stack param list and what page we're on so in this case my modal i then pass that in here and it now knows you have access to those variables right so if i destructure the root inside of there you will now see i have params and inside of the params you will now see the name and the id so what i love about typescript is that if you do it correctly it will tell you that you're actually doing the right thing so you see how you're saving yourself from bugs all that kind of stuff you're not messing up like that right so in this case look at that we get lucas build deliveries if i go down here and i go to mandy jones mandy jones comes through as so all right so now i've got the user id as well awesome stuff right next thing i want to do is i'm going to pull in the information using my custom hook based off of that user id so i'm going to say loading errors or loading error orders sorry guys from use customer orders i'm going to basically import my custom hook so all these good programming practices come in handy right you can use it to kind of build out this awesome page and kind of make it you know do whatever the hell you want so at this point you can even do a map so i showed you how you did a map now if you're not using a scroll view and you can you just want a scrollable list in a more optimized way you can use something called a flat list so i'm going to show you how to use a flat list to render out something inside of react native so in this case i'm going to say flat list like so and the flat list we have to import like like so uh from renativ where is it not there it's okay sir and then this takes a bunch of important things okay the first thing is it takes some data the data has to be an array of information so our information here is the orders then what we have to do is we have to extract a key every time it goes through it what is that papi chuck good to see you so every time we do this basically what we do is we say that each order so each singular from me go for it is i'm gonna map it to the order dot and as you can see i've got access to everything so in this case i'm gonna say the tracking id is unique i'm gonna make that the key right keys are important when you're looping through things in react because it know it tells react what each individual item is in the list and it prevents it from re-rendering the entire list if one element changes in that list if you don't have keys it's going to re-render everything in the list it's not optimal okay i know there's so many ways to optimize and react it gets crazy all right guys seven likes away from uh away from uh 700 this is crazy wow all right then now what we do is we say render item function and what we do here is we have a arrow function so in this case arrow function that returns some jsx so in this case we're going to return something called a delivery card all right so i'm going to create a delivery card and this is going to have the order as a prop which is going to be the order that we pass in and what happens here is what we do is we actually get inside the parentheses we get the something known as the item right so item you see and we're going to rename it to order basically that's what i've done there and now we just have to create delivery card okay so let's do that quickly and that way so something um let's go to our components let's create a delivery card dot tsx react native functional export and i'm going to create a type of props with um sorry guys with uh inside of it the order of type order and that will have inside of here the order of tire and that's going to be our props okay cool save it go back import it and you see it stops complaining as now it expects order which is the exact same type it works right so the prop types declared it goes through as slow okay now here what i want to do is just if i hit this you can see delivery card delivery card so there's some things rendering we're obviously going to style it out and make it look nice so let's firstly make this look pretty so that way we've got something beautiful to look at rather than this hideous thing um so the view all right let's start with that so the style here i'm going to show you you can do a margin top with tailwind whatever you really want i'm just i'm always showing you both so that way you can feel free to do it yourself i'm not doing one or the other to be consistent trust me i know you can change it up but yeah you know okay i'm here for the energy chris fan says i'm here the power of this community is so damn high that's what i love doing that's exactly what we do it for and just like that as he says that 700 likes let's go ladies and gentlemen that is so sick that is so sick is israel says how are you thank you dude i'm i'm doing amazing peter says i can do anything i try it's stressful but we do it okay thank you man um style let's do it so for the name and the deliveries what i've done here is i've actually done two so i've got tailwind stuff and i've got you know inline stuff planning y of five border bottom and then outside of it i've got a color no sorry border color because i don't know how to change it in that it wasn't working in the tailwind way and i've got the sort of the actual the color that we're sticking to in this build um let's go ahead and do that boom okay and it should pop in in a sec okay just like that style let's go ahead and do it again tell when let's start this one up so this one is gonna be uh again in an array we're gonna have the text to be of type center text should be extra sorry guys text should be in the center x should be extra large and the font should be bold font should be bold awesome okay it should chuck it in a bit there you go and the deliveries is gonna be somewhat similar as well and i also want to change the color of that so that's why i did two um nice stuff jay i see you all right let's go ahead and check the color in there this is awesome let's go check that in so we got the color will also change and then i want to change the style here um oops style and i want to do a array tailwind let's chuck in here on the text center italic text should be small nice sassa says you're killing it man dude thank you i'm only doing this off of your energy that is why i do what i do it's thanks to you guys i can do it because you guys have such amazing energy it's honestly what powers me uh here we've got something called the content container style and this allows me to pan out the bottom so that way you can scroll a little bit past the bottom which is kind of important right otherwise you kind of get this like right next to the bottom thing so it's kind of annoying right so see this right cool um jay can tell you the computer spec in the chat um okay here we go quite nice you don't you won't notice until i actually add in the the delivery cards but now you're gonna see we're gonna build this now what's awesome guys which you probably didn't realize is this delivery card is the same component here that's the exact same component there that's actually the same component the only cool the cool thing that about this is that it just takes a prop called full width and if you pass in full width it changes to that and if you don't pass in full width it is becomes a card so really really cool okay let's go ahead and build out the delivery card okay so delivery card and then believe me we're actually nearly nearly there we're nearly there right so at this point um we're gonna go ahead and build out the delivery card so i need tailwind here so we're gonna use pulling tailwind like this oh my back it's hiding all right so at this point we're going to do this i'm going to pop in a card instead here so this is going to be a themed card and as you can see it starts looking a little bit better right a little bit and then inside of here we're going to have a view instead of that and the first thing we're gonna see is an icon right so an icon and self-closing component there we go themed and this icon is gonna be a name a box um what are you if you're wondering what i'm building is this right now the box is the icon that we're writing right now okay uh the type is antipo and the color is white okay hit save i can't tell right now because that background is not a color so we're going to change up we're going to make it so uh the card has a container style of the following i'm going to say it has an array because i want to have some tailwind as well we'll say tailwind and here i'm gonna put in the following i'm gonna say it should be rounded large so rounded large and margin y of two okay marginalize you want to okay cool and then we're gonna do um a slight change we're gonna have the inline style next to it and then in here i've got a bunch of things now i'm gonna just put this on the screen basically it's a bunch of padding and it's shadows so i'm going to show you what's happening so we've got padding of zero shadow black shadow offset which is basically where the shadow arrives the shadow opacity so if i change it to like 0.9 you see how it shadow becomes way darker and the shadow radius so if you change that to a bigger radius it becomes more of a bigger spread so you can really play around with that to get the ultimate kind of feel that you want um oh thank you so much universe code i appreciate that uh okay so that way we kind of get the background okay and then the background color is the final bit so background color in this case we're just gonna stick with the um this one right here so background color right there okay there we go nice now you can see that cool so we're going to slowly build this out and then i'm going to implement that full width you know sort of thing that we can do afterwards so we've got the icon there we've got a view and inside that view the first thing that we're going to see is a piece of text inside of there we've got the order and i've got the carrier dash oops carrier carrier dash and i've got all their tracking id so i've just kind of customized it as we're looking for order tracking id so as you see it's going to pop in that text we're going to style it up and this is going to say the following it's going to have tailwind it's going to say text should be extra small text should be in the center uppercase uh text should be white and i want the font to be bold bam just like that just like that look at that all right next things next is expected delivery all right so we're gonna have a text and this one's going to say expected delivery expected delivery and this is going to have a space and then it's going to have a we're going to pass the order that created that day now i am going to be using the created that day as a dummy here but you would actually in real life have a actual due date um but in this case i'm just doing it like this right so i'm gonna just it's a demo okay so order dot created app and then i'm gonna say dot to locale date stream bam there you go expected delivery eighth or fourth okay and obviously you would have a time in real life and so forth you know you can really take it as far as you want um just depends on your back end what it's bringing in so tailwind i'm going to change this to text white text should be in the center uh text should be large and i also want it to be a front board here we go let's say bam cool um that's looking a bit better already uh underneath that i'm gonna have a divider divider divider there you go get rid of that import it from react native theme the color of that divider is going to be white okay so white um and you can't see it because there's no padding underneath it right now all right so i will make that padding uh more present we're gonna have a view under that we're gonna have a text and that's gonna have the address inside of it okay and then we're gonna have um the text under it which is going to be the order dot address uh order dot city okay um and in fact i'm gonna have a little comma by next to it and then we're gonna have text and it's gonna say shipping cost and i've not done a you know i if you were gonna do this in a production environment honestly for the sake of time i haven't done it today but i'll use a currency formatting library in this case i've just done pound time right but you would typically get that back from the back end so it would typically say what currency and then you would pass that in and you would basically format it based on that okay someone said how did he zoom the camera who knows who knows okay we're doing we're doing more let's go okay so at this point i'm gonna go ahead and um for this bit i'm gonna center it out so i'm going to say style should be tailwind um mx auto and then i'm going to say style equals tailwind and it's going to be text based so we don't actually need to change that we could say text center text center oh god i can't spell today text center text should be white font bold margin top five bam there we go and then actually you know what i don't know i think text base is bigger than that text base you see did it change yeah it is bigger i thought so style equals um yeah guys there's a zero tolerance policy for anyone being rude to the team okay i'm just shouting that out if anyone's rude to team like straight man there's no ifs but we don't tolerate here only positive vibes text white upper family is all about growth that is it all right this song gets me hyped all right so we're going to say text small so tailwind x small and i will say text should be center italics and text should be white oh text should be white my god i cannot type today text should be white um there we go nice all right so there you go looking pretty decent so far all right and then um green says love for the team honestly the team loves you guys that's that's what we're about it's all about positivity divider let's go bam color should be white there we go um right view right inside this we've got view view text text okay so we've got a view inside of the view we've got uh two pieces of text and then emmet is so powerful guys here you've got item name and here you've got oh actually i've messed this one right up so we've not got this we've got um the all so basically we're going to loop through the order item so order dot tracking items dot items dot map so we're going to basically map through the items so for every single item i need to return the following and there i'm going to do a view with a view with a text as y2 okay and then that will have the item dot there you go name item.quantity item.quantity there we go um we'll hit save there you go you can start seeing the items coming in from the orders and then we can style it out so the top one is going to be a style of tailwind and this is going to be flex row justified between justify between item center so i would really recommend getting familiar with tailwind right also with flexbox and again i will stress this out every single time oh god we're nearly 800 lives what the hell all right i would definitely recommend um that you spend a lot of time just play flexbox froggy okay and watch my youtube video where we talk about it because flexbox froggy taught me how to tell uh flexbox and i knew after that and it was just so much easier after playing that one game so if you've never played it definitely do so monique what's up hey good to see you got papa fam og members in the house we've got members of zero to full stack hero in the house it's awesome to see members here from our own community the papa farms best community right so that was the wrong place to put it i actually messed up i'm gonna take this style and i'm going to pop it here okay and then this one i'm going to put inside of a text i saw style and then it's tailwind and inside of here we're going to have text white dash white text xl okay for anyone asking where those components are coming from that kind of stuff honestly watch the video throughout because it's coming from react native elements ui library uh justify between uh items center and also we're using rat native they have their own components right so i justify between so that should actually be pushing it away so i've messed up here because that is shouldn't be yeah my bad uh and also what the hell have i done why have i put the two views here we didn't need that yeah there we go i don't know why i did that right and then there should be a view around the entire thing so if you push this underneath [Music] style should be a tailwind padding around it of five there we go hit save and there you go looks very good all right and in fact for the quantity i want to say x so that way it's kind of like times one times two times three so forth okay so already looking damn nice damn pretty this is good right the next thing we have is the map view so let's show you how to do a map right so for a map we're going to go ahead and use react native maps so i'm going to show you how to go ahead and implement that so first thing you want to do is type in render maps it will take you to or dev now it's actually very easy to use right you just use the export install like i explained earlier so in this case um you can go ahead and do export install react native apps map sorry there you go and then i'm gonna do command j i'm going to go ahead and install it into our project and we can do this and you can use mpx in exponents tool use the local version of it okay [Music] almost 800 likes let's go guys right [Music] so i had a chiropractor reset my neck and now my neck actually hurts when i'm doing this for longer because it's supposed to be straight which is a good thing i guess because it means it's actually fixed it okay so at this point let's go ahead and um do do do do we need to put underneath the view so first thing you want to do now is actually import the following from a react native map so we've just imported the dependencies uh this works on ios and android not the web okay so if you are planning to do the three platforms you have pretty much ruled out web at this point you'd have to use a separate map and do a platform check to see if you're on web and then replace the map with that just to fyi okay so in this case we've got map view and then we're going to have the a marker inside of it but for initially what i want to do is i'm going to have a map view and the initial region is going to be the following so the latitude is going to be oh sorry guys i've actually put an object here the latitude is going to be the order dot lat oops sorry guys order not that the longitude is going to be order.long um the latitude delta is basically the rate at which you've zoomed out or zoomed in so i found a sweet spot for this was 0.05 which is kind of like what we what we kind of naturally tend to find these apps looking at right and then what i do is i'm going to have a style here i'm going to style it out i'm basically going to have some tailwind and something else here so tailwind i'm going to have a width of 4. and then i'm gonna have um flex grow is one okay so actually you know what i'm gonna implement that afterwards that's for when i have my full width add-on i don't want to show you that yeah instead of this right now what we're going to say is um height of 200 yeah that's it height of 200. there you go cool okay so this is what we're doing first now i want a map marker to basically pop onto it um onto the screen right so let's check this out so here i'm going to have i'm going to say if there is only only if there is order.lat and an order.long then we want to basically put out the following on the screen i want to have a marker on the screen and inside that i'm going to have the coordinates so coordinates are going to be the latitude which is yes it's going to be the uh order.that and then the longitude which is order.long and then underneath that i'm gonna have a title which is going to be the delivery location so delivery location and then i'm gonna have the description which is going to be the order address so order dot address okay um and then we've got the identifier is going to be the origin right because again you could do destination as well i mean i guess a kind of destination really destination um yeah you mess around with whatever you want but there you go right basically it's in the center of the map right so you see it's actually stuck to the exact corner if i click it delivery location 123 main street is exactly correct and the only thing that's messed up here is the padding below shipping cost so shipping cost right here should actually have some padding beneath there that i've forgotten about or the view that i put in there is actually the one so yeah the view that i put in there is supposed to have some styling on it which is i've forgotten to do so this one right here should have had some styling on it this one here so style is going to be the following tailwind items start i want to do them as a baseline adding a five and i'm gonna bring it slightly up margin top of three okay so just like oh i've messed it up um okay no i've completely ruined that that's not the one i'm looking at my eyes are a bit playing tricks on me right now i've got my text here what am i doing where's the icon oh this one okay so it was supposed to be here my bad um items should be at the start sorry guys tailwind items start padding of five minus margin top of three i wanna bring it up slightly what am i doing oh my god this is screwing me over right now um okay you know what i've just i'm gonna forget this i'm just gonna go with my gut right it looks perfect except the address bit the address bit belongs here where the heck is it where is it um it's what happens when i get tired address is here there we go so i'm just going to pop in a padding bottom of 10. and wait for it wait for it bam okay there we go it's a bit too big five is enough i think [Music] that's good yeah see um don't always have to go with the old stuff that works cool right that looks kind of nice i mean there's i've kind of got it differently aligned here it's fine i mean the actual code is in the um the thing i'm not going to spend too long on the line um but yeah you guys can feel free to change it up as you need to okay there you can you can have it like that or like this it's completely up to you but there you go that's that right that looks pretty damn good okay that's actually very nice now if i go into mandy jones you'll see her card pops up and this is for mandy so union square if i go to saleem ali you can see there's a very different package xbox one s xbox one so forth now the only thing that's kind of weird here is saleem ali has got one oh no that's correct that's correct actually yeah lucas bill has two uh john doe has a zero right so in this case he has no click um so you can actually have it so you don't have that it's very simple you just say if the length is zero don't have a navigate uh at this point i'm just going to leave it i'm going to show you because i'm the whole point here is just to show you the options but i want to spend more time on this screen which is the order screen and how we can go ahead and leverage these with a sort function with the full screen variant of what we need so let's go ahead and jump into that quick little water break we're going damn well guys we're literally nearly about to hit 800 likes okay uh green just i'm pretty sure it does yeah i'm sure you'll use google maps on android um because it uses your native uh yeah the room is dark now yeah the room is dark right let me actually brighten it let me brighten it a bit let me go ahead and chuck on my um make my camera bring my face up a little bit because i think it's a bit dark as in like the the room it's hard to see me right now so give me two seconds guys i'm just gonna make it a little bit brighter in this room so wow magic look at that look at that whoa turn the iso in the camera up and the whole thing is about to go down there you go bam okay magic and back to the studio here we go all right so at this point um let's do this okay so alex says is there a solution to write only one snap without it yeah you can do it but remember dependencies are gonna have conflicting moments for example the maps right so that's where you're gonna have to basically say if this platform then do this you're gonna have to deal with it that way so that's the trade-off but you have one code base and plus they are they tend to be very different mobile apps versus web apps so i'm a fan of doing ios and android react native and xjs web because you can be a lot more efficient and you can be a lot more like it's just nicer to use xjs in my opinion for the web um whole different kind of flow um okay so in this case let's just fly on to the order screen so orders screen bam okay so now we are on the order screen and we're gonna go and move at a relatively fast pace so two things i now need guys i now need to basically go ahead and firstly customize my prop type so that way it all makes sense and then i need to kind of or i'm just changing something quickly okay so two things i'm going to need in there i'm going to need the navigation and i'm going to need access to the route uh so i'm going to need a few things so i'm basically going to make my type definitions early to save you a bit of time remember we did this earlier so i'm not going to repeat it we basically are going to import our parameters but i'm basically making a composite navigation type same thing i did earlier and then i'm pulling in my orders but except this time on i'm on the orders screen so remember your customers and orders that's the difference okay then what i'm going to do is i'm going to get my use navigation and i'm going to plug it with that order screen navigation prop so plugging that in like so will allow me to do that import and now we've got access to the navigation prop the final thing is once we hit this orders screen i'm actually going to be on the um once again what if i down there orders screen oh sorry i've gone to the wrong oh god i've gone to the wrong thing or the screen navigation problem that's fine that's fine that's actually completely fine i've done it right yeah i don't need the root yeah not yet not yet right um okay okay hold on let's go is that so let's do cons tailwind equals use talent and i'm going to go ahead and hit this and uh you tell me so we've got tailwind working well and then we're going to go ahead and have the following so i'm going to pull in my use orders hook i'm going to say const uh loading error orders and i'm going to say equals use orders like so okay and now i've got access to those then i'm gonna need something for the sort so for here i'm gonna have eventually a ascending sort of boolean toggle so i'm gonna prepare that now so i'm gonna say ascending set ascending and then we're not using this one we're going to use the actual import there we go uh this is going to be a boolean value and yes if you give it initial value it will also infer it but i'm just going to write it anyway so you know both okay and then what i want to do is i want to change up this orders to be a certain color so the way i do that is i use the layout effect oops i use layout effect import it like so similar to a use effect it's gonna be the exact same thing right navigation.set options now here i'm not gonna have i'm just gonna use that to basically write out but i'm not gonna use that let's go here i'm gonna have headers shown header shown as false so that way we don't see the header there and i also want to have the tab bar label okay i'm actually going to go ahead and do something with that tab bar later so that's actually this bottom orders bit okay so i'm going to show you how we can change that so first things first i'm going to put some text there and this is going to be basically just going to say orders here what we do is we get two things we get the focus and the color background and what we can do here is i can go ahead and say that the color of this should be so i can style it based on that prop so i can go ahead and say something like this color if focused is enabled i love this song right if color is focused then it should be that pink color right so we're gonna have a nice little pink color else oh god whatever down there that's horrible else it should be uh the color that it originally was okay and then i'm gonna go ahead and say the font size oops there you go now it's pink and it says orders nice okay so pretty cool we've got that down so we change that so we've got that fixed and then now we're going to go ahead and change the top bit so first things first make it a scroll view let's go ahead and do this so scroll let's go ahead and do this so i'm going to go and say scroll view react native and then i'm going to go ahead and say that we have an image self closing component this is going to go ahead and be a rack native themed uh element it's going to say source is i've actually done the hard work for you guys i'm gonna say uri is um the pink is this one guys by the way remember this pink [Music] um so i've got this right here [Music] and let's just chuck it there there we go i've got this string cool and i'm going to go ahead and oops no this one here i'm going to start this image out that's why we're not seeing it at the moment so container style is our sun is live yes i'm loved it all right we're pretty good right it says excellent connection right now so um container jay how are we doing status let's do this 64. nice there we go looking good and then we can put a placeholder uh there like we did earlier right again you can really you don't have to do that i'm just showing you that you can do it you can change it up if you really want to awesome stuff right so at this point of view i'm gonna have a view and inside of my view i'm gonna have a button right now this button i'm gonna import from react native themed and this button is gonna say basically if it's ascending it's gonna be the sort button so this one if it's ascending it's gonna say short show first and so forth right so i'm gonna go ahead and do the following i've actually helped us out save a bit of time we'll put this there and there we go showing others first otherwise it's showing in the there you go so there you go showing all this first when we click it it's going to do the opposite right so on press it will set the opposite so now you can see if i click it it does the opposite and then eventually we'll have that connected to our rendering logic okay so at this point uh thank you marius i appreciate you dude color here is gonna just a straight up pink button the title um style is gonna be um color it's gonna be gray and then it's gonna be font weight of 400 bam okay and i'm going to say the style here should be um a tailwind sorry talent and it will be having y of two finding x of five planning x of five hit save okay there we go so that's how we're getting that effect right nice now the scroll view i want the background color to be that pink color so that way it kind of has this continuation effect from the picture okay there you go just like that all right so this is how we get this effect right and as you can see if i click it it shows off like that now we get the orders pulling in through our handy little hook so what i can now do is i'm actually going to go ahead and pull in the orders as so so we're going to say orders and i'm actually going to apply my sorting logic right now off the back so i'm going to say sort and if you've never done a sort before basically you have two items you have item one and item two now instead of making this complicated we just call it a b right and you put parentheses around it now what you do is you do a callback function and you do a um you basically will have a check to see if a something value is greater than b something value then return a 1 or return a minus one and what this basically does is it sorts out that array to basically put it in order based on what you want so in this case i'm gonna say if it's ascending i'm gonna do the following sort right and yes you can completely move this into another thing or do it to the back end you can really kind of change up as you want but in this case i'm going to pass the date so i'm going to say new day a dot created that so you not created that i'm going to say if that date is greater than new date be dot created out then it's going to be one uh otherwise a minus one okay so you can kind of go ahead and do that and then you can say else and you basically want to do the opposite so you basically got the same thing but you've got less than okay so that's essentially what you're doing then what that will do is it will sort that entire list and return an array so then you want to go ahead and map through each order right and each order i'm going to go ahead and render out something called an order card which we're going to go ahead and create the key for the order card is going to go ahead and say um order got tracking id because that's unique the item is going to be the order okay in this case if we could say that is order whether that's fine it doesn't matter so i'm going to go ahead and create this uh component right now so let's go to components let's create a order card.tsx react native functional exploit component hit save this will actually take two types of props as in props goes here the props that we said is going to be an item of type order and then we go ahead and pull in the item like so append it like this hit save go back to our uh order screen go down here [Music] and we pull it in like so cool now at this point you should be able to see order card order card order card being on the screen okay so this now gives us context to go ahead and build out these individual items and then from there we can go ahead and do as we wish okay and also the sort is not breaking things which means it's probably working correctly okay we'll see once we go ahead and build out the actual order card if that was the case so we're very close to the end actually now so very very good stuff quick little water break and we're about to smash 800 likes so stick with me guys you guys have been incredible we're doing very very well guys all right let's let's punch it let's go order card so we've got at first we've got a touchable opacity so touchable opacity bam and here i'm gonna go ahead and do this bam bam and then we're going to have a card uh okay so card oh god that's horrible card uh yep there you go save okay cool now inside this i'm going to have a view inside that view i'm gonna have an icon the icon is gonna be a themed icon it's a self-close component and then that is gonna have the following it's gonna be a truck delivery and it's gonna be from the material community library so bam there you go yeah we're starting to form okay nice and then oh this is a vibe all right and then inside of that i'm gonna have some text that text is gonna have a date item and that is gonna be the item created at dot created that to date stream i'm gonna style it and instead down here i'm just gonna make it very easy i'm just gonna say it's a font size oh sorry font size of 10. let's see almost 800 likes guys absolutely killing it okay and uh the view that surrounds everything i'm gonna go ahead and create style from that i will say tailwind and i'm actually going to go ahead and do things three walk what the hell is drew over um tell him let's go pop that in like so pop that here and now inside of the overall view uh it's actually not this view is it it's i've got this mixed up this is not the view that i'm on it's actually a view outside of this view and then this view goes inside of that and then style and now here i'm going to say that we've got style the tailwind is going to be flex row i want it to be justified between and we're going to say items should be put in the center the actual card itself the container style it's good it's going to be a tailwind component as in tailwind sorry styling padding x and axes of five so we can push it out from the sides and run around the corners a bit so rounded lg bam okay so that's looking pretty good pretty pretty good so far okay and um i want to next up have outside of my view i want to have a view with two pieces of text and so view text times by two emmett baum first one is going to be item dot tracking items dot items dot length right a bit of a mouthful but items dot length and that will give me the actual item length so i can say two of a certain thing and then actually it's not going to be a um text on next maybe an icon so we're going to switch it with a feather there we go right and in order to put that next to each other we're going to make that a flex uh rule so we're going to say tailwind should be flexed row and items should be aligned vertically on the central axis that way it kind of goes in center and then the uh text i'm going to make pink okay so i'm going to say the style of that is going to be an array tailwind and inside of that i'm going to say it's going to be small items are going to be essentially aligned it doesn't really need the central alignment to be honest and then here we can go ahead and put in the color which is our pink color all right so you can combine it there you go pink boom looking good looking good um cj says down bro you're going really strong for three hours straight thank you dude i appreciate you i would say i'm in damn good flow right now and look at this if we go ahead and sort notice the dates are working so sort works way it's always good then your code works nice um so there you go showing most recent first showing oh this first night is perfect it works okay so at this point we've got the view looking pretty good inside of the view i want to have a text and inside of here i'm going to have um [Music] oh actually i've completely skipped a bit my bad so i'm on before this view i'm gonna have a view with two pieces of text i knew i wasn't going crazy i knew it was two to piece of text right here we're gonna have item dot carrier dash [Music] item dragon id item dot tracking id and this will show like you know the the item the ups item or whatever you are doing um and then the next one will be items the customer's name basically right so it's the item.tracking items.customer.name okay and here what i want to do i want to say style equals tailwind um text gray 500 somewhere using tailwinds colors and the text should be extra large right that looks good and uh we're not spaced out right here this is looking weird so we're going to say style equals tailwind text gray 400 text gray 400 and for this one i want to say that it should be flex roll no i might flicks right now i'm going to do that instead what i'm doing i'll make the [Music] this a array and font size of 10. there you go bam that's bell right so that's kind of more spacious okay looking good right so in this case now you guys can see that's actually looking pretty sweet and these are clickable so naturally now what we can do is you see it actually works so it flicks them and stuff and we see actual real numbers of orders so when i click it now i want to take me to that order okay so essentially now i need to have it so it takes me to an order screen so in order to do that first i need to go into my root navigator and i need to create an or another group so in this case root navigator and remember we had two groups so far i need one more group underneath all of this i need one more group and this is kind of like your screen stack i would say right so you would have all of your different screens in here this because we had a model and a different type of tab navigator here but in this case i can go ahead and do this um boom okay so this one's going to be modal screen oh no this is going to be order screen order screen okay and not orders screen so don't get it wrong okay um so anton says hey is this all done on the back end or front in this case i don't know on the front end but yes in an optimal way if you had more time i'd probably shift any sorting to kind of the back end right um but it wasn't sorting on the back end though um okay all the screen so let's go ahead and do this now so i'm going to pull the screen in i'm going to create a screen sorry order screen dot tsx there we go right um okay uh jc click cloud what's up dude um all right we're at native functional export um but why the array starting because i have a mixture of tail and styling and inline styling that's why all right so we're gonna pull this in um order screen there we go and now i have something to navigate to okay um so let's go to orders screen and uh thank you papita i appreciate that or does screen sorry and here i'm gonna go ahead and when i click on the actual order card i want this touchable opacity to have a navigation to it so order card now needs to basically have some navigation so i'm going to create an order screen navigation prop that basically that prop that we used earlier i'm gonna go do the same thing okay um so we gotta make a composite so i'm not gonna repeat what we did here we did this before so i'm basically doing the same thing oops okay that's nice [Music] and then we got that cool uh and then i'm making sure i'm on the orders screen cool okay so order card no wait yeah yeah okay it's being rendered in the order cards that's why we okay cool right and then what we're going to do is we're going to say const navigation use navigation and pin it to that and we have to import i'll use navigation cool okay next step is on press of this i need to navigate to my order passing the order alongside it so arrow function we're going to say navigation dot navigate to the see i love that navigate to the order screen and inside i'm going to pass in the order and my order here is in the form of an item an item is not complaining because it is of type order okay we have a mouthful but we've done it nice whoa my god 800 likes let's go guys and we still have so much retention i love this i love you guys to pieces oh my god typescript is killing it i know anton it's actually so powerful today all right okay let's go and remember guys if you want to join the community scan that qr code i wanted to shout it out at some point but there's a qr code above me right now feel free to scan it join us over at the papa fam um i thought it was kind of a nice place to put something in that gap uh we're slowly building out the stream okay and let me know if you want to see streams on this channel where i'm prepping that's kind of an interesting one okay so at this point we've got this now okay so if i navigate now you see that guys boom i go to the screen that's exactly what i wanted all right so now if i go here you can see we're going to go we're basically going to transition this to this and the amazing part is i'm going to reuse the delivery card but introduce a full screen prop okay so let's do that so at this point we're going to go to the order screen and we're going to go ahead and customize it out so let's do this so order screen and this is actually a lot cleaner than you might think right order screen bum um and here there we go we're going to bring in tailwind we're going to need it and at this point this is going to be a view and it's very simple this screen honestly it's just going to have a tail end of minus margin top two and i'll show you why afterwards it'll make a bit of sense it's gonna pull it up it'll look quite nice afterwards um and then here i'm gonna have const navigation navigation equals use navigation i'm gonna pass in the order screen navigation prop which i will create right now and that is going to be and again you can see why i would probably recommend that you pull this into a separate file otherwise you're probably going to like clutter up your app but it's kind of worth it to be honest um for the trade-off you're getting right so i'm not going to explain this but again we've done that before as we're rendering it inside the order screen it's going to be the orders like so all right so it's either one of those we're entering an order screen so cool stuff now at this point we're gonna do a use layout effect so use layout effect okay i'm gonna import this stuff like so and what i'm gonna do here is based on the order that comes in and i'll show you how we get the order through the root prop as i mentioned before so what we actually i'm gonna do now actually i need that so let's make a type and this type we did earlier with a root crop so remember when i say you transition from one screen to another and pass a bunch of props in by introducing this root prop you can now go ahead and fetch that information so heading into our code we can see if i do const root equals use root and i pass in the following and i pull this in now if i destructure this object and see what's inside of it you can see we've got params and inside of params i've got the order that's why we get i then use that as a dependency in the dependency array and we can go ahead and do the following so now i'm going to say navigation.set options and rather than this i'm going to say the header title is actually going to be um not that sorry header title hello title i want it to be the order dot tracking i would basically want it to be the guys or girl's name so this is actually going to be um all right so i just want to check something all right to order that track and i was why am i not getting intellisense here order okay interesting order screen root prop order screen navigation prop rams order and my params order here is any okay interesting why is that root stack paramnessed undefined oh here okay yeah so order remember we forgot to change that but that's cool you see what typescript just did that in the flesh it caught me out because i was like wait why aren't i getting intellisense so i was thinking what is wrong with that right so now you know right order dot um now that's he that is very good that's exactly where that was actual proof of where i would show up like in in a handy situation because i because something felt wrong and i was like it's not giving me my suggestions why is it any and then you find the problem before it becomes apparent in part of that production right so awesome stuff now name there we go um there we go all right so this point header title and then i'm going to say um i want to actually hide the no we don't hide it here sorry we don't hide it um instead what i did here was i want to get rid of that for example firstly and i'm going to go ahead and say that the header back title and style is going to be the following so let's start those up so the color of the back title is going to be um header title it's going to be black sorry and then the header tint color is gonna be pink there you go yeah if i didn't do this by the way it would have become pink eventually or at some point yeah there's a there's a reason why i did that all right so anyway we're going back here so there we go jane do mandy jones awesome now i've got the order to basically go ahead and render out a delivery card right so this is where it gets really nice with reusable components right all i'm doing now is popping in my order chucking the order in and wait for it look we get a delivery card right so how do i make a component reusable at this point okay so how do i do this right so check this out so now what i'm going to do is i'm going to introduce a prop call for called full width right there you got full width now inside of my delivery card i'm now going to change everything up i'm going to introduce it there and i'm going to say it's a optional boolean so you don't need to give it but if you do give it we should do something with it right now what i'm going to do is i'm going to go around my code and i'm going to start styling based on certain things so the first thing i want to do is this one here i'm going to say the style here if we pass in full width only then should the height be 100 okay 100 hit save and we get that effect right and you're probably wondering that does not look nice well i'm getting there stay with me okay um so at this point we've got that okay the next thing that i want to do is the container style so for the container style i'm now going to change this into backticks um i'm now going to have the following an effect so i'm going to say if we passed in full width right then it's going to be rounded none so the corners are going to be rounded done with a margin of zero otherwise otherwise it will be um rounded large okay now you can see the rounded corners are gone and the margin becomes zero nice right you see even though if we went to our customer they render differently right so they're in a reusable fashion here we're in a full width fashion okay next thing is the background color easy enough we can go ahead and say if there's full width i can say four or four widths then you want to go ahead and have the pink right so in this case i'm just depicting it based on that you could pass in color props that kind of stuff probably more of a production thing i'd pass in color props but in this case i'm just making it easy we don't want to go too long on this build so that looks a lot better already and then the final thing really is the map okay so the map is where we kind of need to fix it now so the map what we're going to do is we're going to say width should be this and then i'm gonna say flex grow should be one and i'm gonna pass in something else here now i'm gonna say here if it's not full width only then do you have a set height otherwise you should just grow and use up as much space as you possibly can right now we have a slight issue where i haven't set up the spacing correctly so let's see where my issue is at right so final bit of debugging and then we are in the clear and i see why it's because my overall flex i've messed up something to do with my flexbox um it's gonna be in my let's have a look it's going to be the view and we have tracking items it's going to reflect oh no it's not that one okay it's going to be oh okay this is gonna be tricky now we're gonna have to find the issue okay remember to drink water friends thank you dude i definitely will okay so let's debug this right so let's firstly refresh the app let's see if it was just a little refresh issue now that's good we can check into this okay firstly each charge should have a unique list um key so i forgot to put keys here so each key should be item dot item id there we go so that way we'll get rid of that error there we go and then the next thing is our map view right so our map view is not showing on the screen right now it will show on uh non-forward so it will show there and this is most likely because we haven't got a height right so in this case i'm saying if there's no full width and the height is 200 flex scroll one um tailwind width [Music] right now let's find the bug find the bug we're so close this is literally the final thing in this build and then we are done so i know where the issue is i just can't find it so i'm putting flex somewhere in the wrong place no it's not flex here it's also something to do around my expected delivery because that is not rendering in the way that i expected it to so let's just start there and we're also not seeing okay we're not seeing the um the the children here so that's a good point to look at so here we have the divider white heading of five okay and underneath that we have our view okay okay so i've screwed up somewhere one second so we've got our divider white we've got the view which encapsulates encapsulates all the way up until there it says items again that's where it is right i've messed it right up no no i haven't no it's here no what the hell okay so that's wrong all right so this view right here is surrounding the wrong thing it has to be around all of the group hit save and then this view right here is a should be styled up and it should say um tailwind [Music] items what's that what the hell was my tailwind yeah [Music] okay so talent items start and [Music] no no no i've completely screwed this up okay oh okay we'll make it we will make it we will make it i like this i like when you guys can see me in a stressful position um okay we've got the carrier id let's break it down but the carrier id we've got surrounded inside of this inside another one oh i see okay so i should have had a view around this as well so my view that i'm missing is actually around the divider here so okay so it should be a view around the divider there we go that's better and then here my overall outstanding one should be tillwind um items start padding five minus margin top of three okay yep that's good and then i do mxo to center it core tailwind mx auto nice [Music] and then we've got my view which finishes there my view which finishes there and then we've got an extra view which is not needed now so that can go and this is where i've screwed up okay so we've got a divider we've got a view we've got view text okay so this is one view too many okay so now at this point my where have i messed this up i have my view i have my container my card my icon my view for my style my view for my style my text my divider up until there cool and then after this we have in 47 we have another view my text my text my text my view my view my divider my view okay it's actually underneath all of this [Music] that's why nice my viewers are completely in the wrong place oh wow all right so you see it there you go um just got to be patient with that and to try and figure out so in that situation what i would do is obviously i'm sort of using reference content but if i was doing this directly i would have probably broken it down and my idea here honestly would just be to just do this honestly if you ever get in that specific position just comment things out just do one at a time okay so that's not affecting my my thing you know come here that's not affecting my build and then you slowly break it down and eventually you'll hit the point that you want to find right but the main thing is is that just symbolizes that we did it guys so three items yep three items with the correct delivery location santa clara there we go perfect stuff we can sort we can do all the stuff we wanted to do we can go ahead and filter based on name as well the app is pretty much down there so finishing things off we've got our steps in graphql api oh my goodness let me go ahead and just get some music up right now let me get this energy pretty big right now i need a song for this i need something no no no no this ain't gonna do it guys i need uh what's one of my og songs let's go ahead and do something okay i'm gonna do it straight let's do it all right papa farm this is literally your ups 2 0.0 clone all right it was an absolutely mad build it was a big build right we did loads of stuff in this build let's context it down for for let's put it down into context right my brain is mushy right now don't blame me we took a scenario where you went ahead and had a back end from a client you had the task of building a delivery tracking app and building an interface which takes the information from this graph of this json database which has no structure to it create an interface with graphql using step zen to go ahead and make some kind of relational pulling querying for queries from the the back end to our front end my my mouth is everywhere right now okay but then we went ahead and did that right we did that in an amazing fashion we used steps and two has full capabilities we built out these and we used exceptions amazing import you guys saw how beneficial it was and then we went ahead and used apollo to bring it onto the front end we used react native elements to make it look beautiful we use tailwind css to absolutely crush the design i showed you loads of different approaches as to how this can be done right and uh yeah it's absolutely incredible all right lots and lots of things that you can then go ahead and add onto this build and you can even add on mutations from step then so it is supported and if you want to know more about that check out roy dirk's video on the steps and youtube channel absolutely incredible video and guys while we're here i just want to say an absolute thank you to everyone all of you are incredible i cannot ever ever get over the energy the popper fan brings i hope you enjoyed today's build make sure you use the first link in the description to get 300 000 free monthly requests using the stepson account and it supports the proper fam so thank you for that this has been your papa react this has been your boy papariat and uh i hope you guys have enjoyed this this video i'm gonna wrap this one up with uh with something different today i'm going to go ahead and find the song my brain is kind of everywhere right now oh this is this is pretty old it's cool man this is good right yeah but i'm going to wrap it up there guys thank you so much for tuning in if you want to go ahead and join the papa family and join us at zero to full stack hero this qr code is in the top of the screen right now it's our flagship community this is where we pretty much do this stuff week in week out with our members our members are awesome i love and appreciate every single one of you youtube members and zero to four staff members and anyone supporting the papa fan so without further ado wrapping this video up thank you so much guys like comment subscribe hit the bell notification icon for more and yeah until the next video peace [Music] [Music]

Channel: Sonny Sangha

Views: 180,625

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: hvvWv2GLWss

Length: 217min 17sec (13037 seconds)

Published: Sat Sep 10 2022